Swiper.js使用方法

最新推荐文章于 2025-02-27 20:04:11 发布
转载 最新推荐文章于 2025-02-27 20:04:11 发布 · 5.7k 阅读 · 2
文章标签：

#swiper #滑动 #轮播 #banner #广告

本文通过三个实例展示了如何使用Swiper库实现不同场景下的轮播效果，包括基础图片轮播、带商品详情的轮播及无缝滑动轮播等。 
 <!DOCTYPE html> 
    <html> 
        <head>
            ...     
            <link rel="stylesheet" href="path/swiper.min.css">
        </head> 
        <body>
            ...     
            <script src="path/swiper.min.js"></script> 
        </body> 
    </html>
案例一：banner广告图片轮播

html如下：
注（红色部分是必须的，可以再添加一个class写自己需要的样式）
<div class="banner-container swiper-container">
    <div class="swiper-wrapper">
        <div class="banner-slide swiper-slide">
            <a href="javascript:viod(0);"><img src="images/banner/bannerImg01.png"></a>
        </div>
        <div class="banner-slide swiper-slide">
            <a href="javascript:viod(0);"><img src="images/banner/bannerImg02.png"></a>
        </div>
        <div class="banner-slide swiper-slide">
            <a href="javascript:viod(0);"><img src="images/banner/bannerImg03.png"></a>
        </div>
        <div class="banner-slide swiper-slide">
            <a href="javascript:viod(0);"><img src="images/banner/bannerImg04.png"></a>
        </div>
    </div> 
    <!--需要焦点按钮时加这段div-->
    <div class="banner-pagination pagination">
        <span></span>
    </div>
</div>
js如下:
<script type="text/javascript">
    var mySwiper = new Swiper('.banner-container',{
        loop: true,                                         //用来循环播放
        pagination: '.banner-pagination',                   //显示焦点按钮
        paginationClickable: '.banner-pagination',          //焦点按钮可点击
    });  
    setInterval("mySwiper.slideNext()", 2000);              //加定时器的目的是：点击焦点按钮后，自动播放你所点击的那张图片的下一张
</script>




案例二：一定数量的banner切换

html如下：
注（红色部分是必须的，可以再添加一个class写自己需要的样式）

<div class="recommed-bd swiper-container" id="dietRecom-swiper">
    <div class="swiper-wrapper">
		<div class="swiper-slide">
			  <a href="#"><img src="img/product/pro20160808.jpg"/></a>
			  <div class="proInfo set-flex flex-ver">
				 <h3 class="name">海南桂味荔枝 500g</h3>
				 <span class="desc">果肉晶莹剔透</span>
				 <span class="origin">产地：爱尔兰</span>
				 <del class="delPrice">￥20.00</del>
				 <em class="nprice">￥15.00</em>
				 <a href="#" class="btn_cart"></a>
			  </div>
		</div>
		<div class="swiper-slide">
			  <a href="#"><img src="img/product/pro20160808.jpg"/></a>
			  <div class="proInfo set-flex flex-ver">
				 <h3 class="name">海南桂味荔枝 500g</h3>
				 <span class="desc">果肉晶莹剔透</span>
				 <span class="origin">产地：爱尔兰</span>
				 <del class="delPrice">￥20.00</del>
				 <em class="nprice">￥15.00</em>
				 <a href="#" class="btn_cart"></a>
			  </div>
		</div>					   
		<!--需要左右按钮时加这段div-->
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
 </div>
js如下:
<script type="text/javascript">
    var dietSwiper = new Swiper('#dietRecom-swiper',{
        pagination: '.swiper-pagination',
	prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        paginationClickable: true ,
	slidesPerView : 2,                        //同时显示的slides数量
	slidesPerGroup: 2,                        //几个一组滑动
	spaceBetween: 15                          //slide之间的距离（单位px）
    });  
</script>

案例三：无缝滑动（不知道叫什么）
html如下：
注（红色部分是必须的，可以再添加一个class写自己需要的样式）
<div class="store-container swiper-container">
    <div class="swiper-wrapper">
        <!--swiper-slide为一本书-->
        <div class="swiper-slide">
            <dl>
                <dt>
                    <img src="images/book/book01.png" />
                </dt>
                <dd>
                    <h6>我怀疑人们在密谋让我幸福</h6>
                    <span>张玮佳</span>
                    <p>当我们谈起生活时当我们谈起生活时，我们谈什么？事儿，谎言，习惯，欲望，面子，嫉妒。</p>
                </dd>
            </dl>
        </div>
        <!--swiper-slide为一本书-->
        <div class="swiper-slide">
            <dl>
                <dt>
                    <img src="images/book/book02.png" />
                </dt>
                <dd>
                    <h6>世界上有趣的事太多</h6>
                    <span>张玮佳</span>
                    <p>当我们谈起生活时，我们谈什么？事儿，谎言，习惯，欲望，面子，嫉妒。</p>
                </dd>
            </dl>    
        </div>
        <!--swiper-slide为一本书-->
        <div class="swiper-slide">
            <dl>
                <dt>
                    <img src="images/book/book06.png" />
                </dt>
                <dd>
                    <h6>舍得，舍不得</h6>
                    <span>蒋勋</span>
                    <p>当我们谈起生活时，我们谈什么？事儿，谎言，习惯，欲望，面子，嫉妒。</p>
                </dd>
            </dl>    
        </div>
    </div>
</div>
js如下：
<script type="text/javascript">
    var mySwiper = new Swiper('.swiper-container',{
        slidesPerView: 'auto',                   
        spaceBetween: 24,
    });  
</script>

案例三：无缝滑动2（不知道叫什么）
html如下：
注（红色部分是必须的，可以再添加一个class写自己需要的样式）
<div class="column-container swiper-container">
    <div class="column-wrapper swiper-wrapper">
        <div class="column-slide swiper-slide"> 
            <a href="bookClassify.html">
                <div class="column-bg">
                    <img src="images/column/columnImg01.png" />
                </div>
                <p>分类</p>
            </a>
        </div>
        <div class="column-slide swiper-slide"> 
            <a href="newBook.html">
                <div class="column-bg">
                    <img src="images/column/columnImg03.png" />
                </div>
                <p>新书</p>
            </a>
        </div>
        <div class="column-slide swiper-slide"> 
            <a href="freeBook.html">
                <div class="column-bg">
                    <img src="images/column/columnImg02.png" />
                </div>
                <p>免费</p>
            </a>
        </div>
        <div class="column-slide swiper-slide"> 
            <a href="hotSale.html">
                <div class="column-bg">
                    <img src="images/column/columnImg04.png" />
                </div>
                <p>热销</p>
            </a>
        </div>
        <div class="column-slide swiper-slide"> 
            <a href="store.html">
                <div class="column-bg">
                    <img src="images/column/columnImg05.png" />
                </div>
                <p>书店</p>
            </a>
        </div>
        <div class="column-slide swiper-slide"> 
            <a href="bookClassify.html">
                <div class="column-bg">
                    <img src="images/column/columnImg01.png" />
                </div>
                <p>分类</p>
            </a>
        </div>
        <div class="column-slide swiper-slide"> 
            <a href="newBook.html">
                <div class="column-bg">
                    <img src="images/column/columnImg03.png" />
                </div>
                <p>新书</p>
            </a>
        </div>
        <div class="column-slide swiper-slide"> 
            <a href="freeBook.html">
                <div class="column-bg">
                    <img src="images/column/columnImg02.png" />
                </div>
                <p>免费</p>
            </a>
        </div>
        <div class="column-slide swiper-slide"> 
            <a href="hotSale.html">
                <div class="column-bg">
                    <img src="images/column/columnImg04.png" />
                </div>
                <p>热销</p>
            </a>
        </div>
        <div class="column-slide swiper-slide"> 
            <a href="store.html">
                <div class="column-bg">
                    <img src="images/column/columnImg05.png" />
                </div>
                <p>书店</p>
            </a>
        </div>
    </div>
    <!--需要焦点按钮时加这段div-->
    <div class="column-pagination pagination">
        <span></span>
    </div> 
</div> 
js如下：
<script type="text/javascript">
    var mySwiper = new Swiper('.column-container',{
        loop: true,                                         //用来循环播放
        pagination: '.column-pagination',
        slidesPerView: 'auto', 
        paginationClickable: true, 
        slidesPerGroup: 5,                                  //每次滑动5个
        speed: 600                                          //滑动的速度
    });  
</script>


Swiper轮播图的使用流程
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
09-22 394
需要 js,css,html 这三个部分组成才可以，根据自己的需要添加对应功能。5.根据里面引入的东西加到自己的页面。
swiper.animate.min.js
01-08
基于vue移动端项目，修改后的swiper.animate.min.js文件，因为官方源码不支持 AMD/CMD/UMD 用法，具体请查看我博客相关文章
swiper.min.js
11-09
swiper.min.js js滑动插件 方便好用，推荐下载 简单易学
vue-swiper的使用教程
12-12
swiper是我之前做前端页面会用到的一个插件,我自己认为是非常好用的。swiper提供了形式多种多样、适应各个终端的轮播图效果。本文是小编给大家带来的vue-swiper的使用教程。 vue-awesome-swiper官网链接https://www.npmjs.com/package/vue-awesome-swiper 和上一篇随笔一样，我们先下载包，然后去main.js里面配置。 npm install vue-awesome-swiper --save 　　我们可以用import的方法 // import import Vue from 'vue' import VueAweso
Swiper.js的使用
dxj124的博客
11-05 2145
官方文档：https://www.swiper.com.cn/api/start/new.html 下载地址：https://www.swiper.com.cn/download/ 步骤: 1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
swiper.animate1.0.3.min.js
11-06
swiper.animate.js是swiper提供的swiper结合animate的工具,然而他在vue中使用的话需要做一些修改.只是做了部分修改能使用了就可以了没有做什么大神的工厂模式各种设计,也没那能力.哈哈哈哈,反正能用,我是能用.
idangerous.swiper.min.js
04-09
idangerous.swiper.min.js添加轮播图滑动事件，引用使用
jQuery+swiper.js幻灯片图片视差滚动轮播特效
06-09
Swiper.js提供了丰富的API和插件，可以方便地与jQuery或其他JavaScript库结合使用。在这个特效中，Swiper.js主要负责图片的视差滚动效果和轮播逻辑。 **视差滚动**是一种视觉效果，当用户滚动页面时，背景元素以较...
Swiper js使用方法
jgftyfc的博客
01-26 861
Swiper js使用方法
swiper.js的使用
weixin_30552811的博客
02-20 176
点击api文档地址， （1）图片轮播banner <script src="js/jquery-2.1.4.min.js"></script> <script src="js/swiper.jquery.min.js"></script> <script src="js/flexible.js"></scr...
JavaScript Swiper 插件的使用教程：打造流畅的滑动效果
最新发布
m0_62599305的博客
02-27 2596
Swiper支持触摸滑动：适用于移动端设备，支持触摸和滑动手势。响应式设计：自动适应不同设备的屏幕尺寸，灵活显示内容。丰富的配置选项：提供多种自定义选项，如自动播放、分页、导航按钮等。性能优化：滑动流畅，即使在大量图片或内容的情况下也能保持良好的性能。Swiper 适用于创建幻灯片、横向滚动、图片滑动、内容展示等各种滑动效果。Swiper 插件是实现滑动效果和响应式设计的最佳选择之一，凭借其强大的功能和灵活的配置选项，它可以适应各种不同的需求。
JS：swiper插件的使用
2301_80270332的博客
02-22 571
Swiper 是一款功能强大且灵活的滑动插件，专为移动设备和桌面浏览器设计，广泛应用于轮播图、焦点图、Tab切换等场景。它基于纯JavaScript开发，开源免费，支持多种滑动效果（如淡入淡出、立方体旋转等），并具备高度的可定制性和响应式设计能力。Swiper 提供了丰富的API和插件支持，能够轻松实现无缝滚动、懒加载、虚拟化等功能，同时兼容主流前端框架（如Vue、React），是开发高性能滑动界面的首选工具
Swiper使用方法(常用介绍)
weixin_30502157的博客
03-23 820
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。 <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head> <b...
JS Swiper插件使用
qq_42421169的博客
06-12 2752
可以用来做左右滑动的效果,也可以用来做自动轮播的效果,大部分滑动的效果都能实现 1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。 2.html 三层结构 ,类名不变,循环的内容是 swiper-slide的内容 div class=“swiper-container”> div class=“swiper-w...
swiper.js插件使用
u012028371的博客
08-22 680
兼容移动端和pc端的滑动插件（以移动端为主），可左右播放（其实，轮播的就是left值），上下轮播（轮播的是top的值）  用法： var mySwiper = new Swiper({    pagination: ".pagination" ,  //生成页面点符的容器   loop:true,   autoplay:true,   paginationClickab
JS常用插件 Swiper插件 实现轮播图
christmassss的博客
01-15 3374
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架中文官网地址:点击查看Swiper演示，里面的功能和样式十分丰富，根据自己的需求选择确认插件实现的功能去官网查看使用说明下载插件打开demo实例文件，查看需要引入的相关文件，并且引入复制demo实例文件中的结构html，样式css以及js代码。
Swiper.js完整实例：效果演示与JavaScript集成指南
Swiper.js是一个广泛使用的JavaScript库，专门用于创建响应式触摸滑动轮播。...通过阅读和实践Swiper.js的文档与示例，开发者可以快速上手并掌握Swiper.js的使用方法，进而利用它来丰富自己的网页或应用程序。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值