夏日限定438 2022-10-15 13:50 采纳率: 40%
浏览 17
已结题

swiper插件使用轮播图

swiper的min.css和min.js我都引入了，控制台也没有报错。就是运行不起来，运行了就在第一次照片也不能点到下一张照片。最后一张图是我引入的样式。

img

img

img

img

img

  • 写回答

3条回答 默认 最新

  • 人间小美味695 2022-10-16 04:14
    关注

    CSS的确是用link引入，但是JS需要用script，文件路径放在src。

    <script src="./js/index.js"></script>

    如有帮助请采纳，谢谢

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • JS常用插件 Swiper插件 实现轮播图
    2024-01-15 18:56
    斐波娜娜的博客 Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架中文官网地址:点击查看Swiper演示，里面的功能和样式十分丰富，根据自己的需求选择确认插件实现的功能去官网查看使用说明下载插件打开demo实例文件，查看需要...
  • 使用Swiper插件制作轮播图
    2021-11-16 21:07
    前端王基的博客 1.进入Swiper官网 2.点击获取Swiper，下载Swiper 3.下载后进行解压 ...5.在我需要使用轮播图的代码中引入swiper-bundle.min.js和swiper-bundle.min.css <!DOCTYPE html> <html lang="en"> ...
  • Vue里面使用swiper插件实现轮播图
    2022-05-12 19:31
    努力成长的__小白的博客 引入css文件，如果多个地方用到轮播图，就在入口文件内引入 // 引入swiper的样式 import 'swiper/css/swiper.css' 3.在template加入轮播图的结构,注意每个版本都有点区别的 <div class="swiper-container" ...
  • swiper插件实现轮播图
    2023-01-14 08:30
    紫陌~的博客 即使这样也还是无法实现轮播...但是这样有缺点：当页面中有多个轮播图时，因为它们使用了相同的class修饰的DOM，就会出现所有的swiper使用同样的数据，这肯定不是我们希望看到的。文章有写的不当的地方，欢迎指正修改。
  • vue中使用swiper插件实现轮播图
    2022-01-11 16:47
    yarKin.的博客 轮播图数据是通过异步...一、在项目中安装swiper插件 cnpm install --save swiper@5 安装版本5的swiper 二、在轮播图组件中引入swiper的js文件和css文件 import Swiper from 'swiper' import 'swiper/css/...
  • 前端开发---用Swiper实现轮播图
    2024-11-10 21:43
    火龙谷的博客 前端开发----swiper实现轮播图效果
  • Vue封装Swiper实现图片轮播效果
    2020-11-26 14:04
    在本文中，我们将探讨如何使用Vue.js封装Swiper这个强大的滑动特效插件，来实现一个图片轮播组件。 **一、Swiper介绍** Swiper是一个基于JavaScript编写的滑动插件，特别适合于移动设备，如手机和平板电脑。它支持...
  • 前端轮播图插件Swiper使用新手详细教程
    2020-05-27 11:47
    sea9528的博客 Swiper应用广泛，使用频率仅次于jQuery，轮播图类排名第一，是网页设计师必备技能。 大量demo即下即用，前端新手亦可快捷做出精美效果. 使用Swiper swiper官网链接. 1.进入官网，点击开始使用 2.下载Swiper 1.点击...
  • 学习前端前期想做出轮播图效果之swiper插件的介绍
    2022-07-23 16:38
    Tea-pd的博客 swiper是一款轻量级的轮播图插件，不仅支持pc端更是为移动端而生，用它可以快速地做出一个轮播图，或者扩展使其做出复杂的轮播效果。 基本用法 swiper使用需要两个文件，一个是swiper.css，里面..swiper是什么？ ...
  • Vue2中使用swiper插件实现轮播图
    2024-11-28 12:43
    Lucky^的博客 3、在需要展示的页面使用 <template> <swiper :options="swiperOptions"> <swiper-slide v-for="(image, index) in images" :key="index"> 轮播图图片"> </swiper-slide> <!-- 分页器 --> <div class="swiper-...
  • swiper倾斜图片左右切换特效
    2021-06-24 09:48
    Swiper的核心功能是实现平滑的滑动效果，常用于轮播图、产品展示等场景。在这个特效中，Swiper被用来处理图片的左右切换，提供了流畅的过渡动画。 接下来，我们来关注“倾斜图片”这个概念。这种设计通常涉及到CSS3...
  • 使用Swiper插件做轮播图
    2019-09-05 15:34
    新手前端王老四的博客 今天开始做轮播，但是用原生js来写特别麻烦，何况我是一名js小白。。。 实习的第一天，boss让我们实习生做公司的官网首页，而...回家后上网上查找，看到了Swiper，于是我的第一个轮播图就做出来了（ps：这也是我的第...
  • 前端插件swiper
    2024-08-22 10:59
    简 。单的博客 swiper-wrapper是一个按照一定顺序排泄的所有轮播图的集合，在默认情况下是从左到右的排列；swiper-slid：每一张轮播图。...swiper是一款功能强大、开源、免费的前端轮播图插件。（是以一个对象的形式传参的）
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 10月24日
  • 已采纳回答 10月16日
  • 创建了问题 10月15日