swiper官网找了好久,好像没有找到这种设置,干脆自己写js控制把

这个是初始化swiper

var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 1,//每个滑块距右边的距离
        grabCursor: true,//鼠标光标
        loop: true,//图片无限转动
        setWrapperSize :true,//自动轮播
        autoplay: 1500, //轮播的时间
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      });



      /*鼠标移入停止轮播,鼠标离开 继续轮播*/
      var comtainer = document.getElementById('swiper_container');
      comtainer.onmouseenter = function () {
        swiper.stopAutoplay();
      };
      comtainer.onmouseleave = function () {
        swiper.startAutoplay();
      }


    <!-- Swiper -->
    <div class="swiper-container" id="swiper_container" style="min-width: 1000px;">
      <div class="swiper-wrapper">
        <div
          v-loading="sliderLoading"
          style="width: 100%">
        </div>
        <div class="swiper-slide" v-for="item in sliderArray"><img :src="item.imgUrl" alt=""></div>
      
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination">

      </div>
      <!-- 如果需要导航按钮 -->
      <!--<div class="swiper-button-prev"></div>-->
      <!--<div class="swiper-button-next"></div>-->
    </div>

Logo

一站式虚拟内容创作平台,激发创意,赋能创作,进入R空间,遇见同道,让优质作品闪耀发光。​

更多推荐