使用swiper.js写轮播

「爱情、让人受尽委屈。」 2022-05-14 10:14 285阅读 0赞

初涉swiper.js，记录一下使用过程  
1.首先引入js和css

<script src="./js/swiper-3.4.2.jquery.min.js"></script>
    <link href="./css/swiper-3.4.2.min.css" rel="stylesheet">

2.结合swiper，自己写样式布局

<style>.smallwai{ padding: 0 5px;}</style>
    <div class="swiper-container">
             <div class="swiper-wrapper">
                 <div class="swiper-slide">
                     <div class="col-xs-4 smallwai">
                         <img class="bopic" src="./img/yue1.png"/>
                         <div>
                             <B>丰田-汉兰达</B>
                             <div class="fsize">省油|舒适|7座</div>
                             <div class="fsize">新车|保险齐全</div>
                         </div>
                     </div>
                     <div class="col-xs-4 smallwai">
                         <img class="bopic" src="./img/yue2.png"/>
                         <div>
                             <B>路虎</B>
                             <div class="fsize">省油|舒适|5座</div>
                             <div class="fsize">新车|保险齐全</div>
                         </div>
                     </div>
                     <div class="col-xs-4 smallwai">
                         <img class="bopic" src="./img/yue3.png"/>
                         <div>
                             <B>丰田-普拉多</B>
                             <div class="fsize">省油|舒适|5座</div>
                             <div class="fsize">新车|保险齐全</div>
                         </div>
                     </div>
                 </div>
                 <div class="swiper-slide">
                     <div class="col-xs-4 smallwai">
                         <img class="bopic" src="./img/yue4.png"/>
                         <div>
                             <B>丰田陆地巡洋舰</B>
                             <div class="fsize">省油|舒适|5座</div>
                             <div class="fsize">新车|保险齐全</div>
                         </div>
                     </div>
                     <div class="col-xs-4 smallwai">
                         <img class="bopic" src="./img/yue5.png"/>
                         <div>
                             <B>路虎</B>
                             <div class="fsize">省油|舒适|5座</div>
                             <div class="fsize">新车|保险齐全</div>
                         </div>
                     </div>
                     <div class="col-xs-4 smallwai">
                         <img class="bopic" src="./img/yue6.png"/>
                         <div>
                             <B>保时捷Macan</B>
                             <div class="fsize">省油|舒适|2座</div>
                             <div class="fsize">新车|保险齐全</div>
                         </div>
                     </div>
                 </div>
                 <div class="swiper-slide">
                     <div class="col-xs-4 smallwai">
                         <img class="bopic" src="./img/yue1.png"/>
                         <div>
                             <B>丰田-汉兰达</B>
                             <div class="fsize">省油|舒适|7座</div>
                             <div class="fsize">新车|保险齐全</div>
                         </div>
                     </div>
                     <div class="col-xs-4 smallwai">
                         <img class="bopic" src="./img/yue3.png"/>
                         <div>
                             <B>丰田-普拉多</B>
                             <div class="fsize">省油|舒适|5座</div>
                             <div class="fsize">新车|保险齐全</div>
                         </div>
                     </div>
                     <div class="col-xs-4 smallwai">
                         <img class="bopic" src="./img/yue5.png"/>
                         <div>
                             <B>路虎</B>
                             <div class="fsize">省油|舒适|5座</div>
                             <div class="fsize">新车|保险齐全</div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         
         <div class="swiper-pagination dian"></div>

3.根据需求选择所要的属性

<script type="text/javascript"> window.onload = function() { var mySwiper = new Swiper ('.swiper-container', { // 轮播图的方向，也可以是vertical方向 direction:'horizontal', //播放速度 loop: true, // 自动播放时间 autoplay:1000, // 播放的速度 speed:2000, // 如果需要分页器，即下面的小圆点 pagination: '.swiper-pagination', // 滑动之后， 定时器也不会被清除 autoplayDisableOnInteraction : false, }); } </script>

样式效果图如下  
![这里写图片描述][70]

[70]: /images/20220514/11913de6df3a4ffdb53fdf3dfd97729c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关用js写图片轮播

好的。要用 JavaScript 写图片轮播，你需要做的是： 1. 准备好你要轮播的图片，并把它们放在一个数组中。 2. 使用 JavaScript 来创建一个图片轮

骑猪看日落/ 2024年03月27日 12:37/ 0 赞/ 109 阅读

相关原生JS写轮播效果

一、设计概述 > 这次的轮播图功能很全面，里面有鼠标事件效果，比如鼠标移入，停止自动播放，鼠标离开图片开始自动播放，当鼠标移入时会有箭头出现，鼠标离开始时箭头就会消失，图

秒速五厘米/ 2023年07月16日 11:55/ 0 赞/ 13 阅读

相关使用 element 写轮播图

html <div class="lunbo-box"> <el-carousel indicator-position="non

青旅半醒/ 2023年05月30日 09:13/ 0 赞/ 149 阅读

相关 vue写轮播组件

写轮播组件的思路： 1、确定传入的参数：轮播图的数据（图片地址，跳转href，图片ID，标题等基础数据）、轮询时间 2、写好轮播图的基本样式，父组件传入参数，动态加载进

淩亂°似流年/ 2023年02月18日 03:18/ 0 赞/ 52 阅读

相关手写轮播

//手写轮播 //第一块： <style> \win \{ width:250px; height:100px; overflow:hidden; \}

古城微笑少年丶/ 2022年06月06日 09:35/ 0 赞/ 201 阅读

相关使用Vue写一个图片轮播组件

在制作这个组件之前，笔者google了不少关于轮播的文章，发现实现一个轮播的思路虽然各有不同，但是大的逻辑其实差不多，本文主要依据慕课网上[焦点轮播图特效][Link 1]这节

爱被打了一巴掌/ 2022年05月29日 12:14/ 0 赞/ 291 阅读

相关面向对象写轮播图

运行效果图 ![20180517132055955][] html代码 <div id="banner"> <ul> <li><i

川长思鸟来/ 2022年05月24日 00:54/ 0 赞/ 245 阅读

相关使用swiper.js写轮播

初涉swiper.js，记录一下使用过程 1.首先引入js和css <script src="./js/swiper-3.4.2.jquery.min.js"><

「爱情、让人受尽委屈。」/ 2022年05月14日 10:14/ 0 赞/ 286 阅读

相关 html写轮播图

这个用到定时器来实现；思路：使用`<ul><li>`来放图片，按照我们的要求来排版；溢出的隐藏，还需要用到最主要的一个属性；就是动画属性：`animation @ke

偏执的太偏执、/ 2021年12月04日 08:25/ 0 赞/ 356 阅读

相关手写轮播图

效果如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

小灰灰/ 2021年09月08日 12:48/ 0 赞/ 490 阅读