Swiper实现正反向无缝轮播(跑马灯)

Swiper实现正反向无缝轮播(跑马灯)

附上Swiper官方文档:https://www.swiper.com.cn/api/index.html

1.首先加载插件,需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件,不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。如下:

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper-bundle.min.js"></script>
    ...
</body>
</html>

2.html和js中内容,初始化。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
	autoplay: true,//可选选项,自动滑动
})
</script>

3.如果用到框架,vue,angular,react啥的,可以这样

var Swiper = require('swiper');    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });

上面的直接看文档就能解决,下面主要介绍如何实现反向无缝,还有就是我实现反向的时候会有bug(切换页面样式错乱!!!)
1.首先要保证轮播图数据先获取到,再去初始化轮播图。
2.附上代码

 this.swiperF2 = new Swiper('.swiper-container-f2', { //名字可以改
        observer: true,  
        observeSlideChildren: true,
        observeParents: true,  //这三个可以去文档看下介绍,主要就是异步情况会重新加载swiper。
        loop: true, //开启环路
        speed: 10000, //每个轮播图过渡的时间
        spaceBetween: 30, //每个轮播图间隔
        slidesPerView: 'auto', //当前页面显示几个,这里是auto
        loopedSlides: 6, //比你页面显示的数量大于2就好
        updateOnWindowResize: false,  //分辨率改变时,防止样式错乱加上!
        autoplay: {
          delay: 0,   //每循环一圈,间隔时间,无缝轮询,则为0
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
      });

还需要改变下css样式,目的是覆盖原来的切换效果,变为平滑过渡:

    .swiper-wrapper {
        transition-timing-function: linear !important; //想好具体位置放到哪,得能替换!
    }

到这里已经实现了无缝轮播,但我在实现反向的时候出现了bug,切换tab页后样式错乱。困扰了好久,最后我选择了不用官方文档的 reverseDirection: true属性设置,而是这样:

 <div class="swiper-container" dir="rtl"> 

既原来还是正向,这样就能反过来!!!!!

写的不是很详细,有问题私信,免费及时解决!!!

你可能感兴趣的:(前端常见场景问题,javascript,html,前端)