swiper 鼠标移入停止轮播 鼠标离开 开始轮播

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

    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>

点这里可以跳转到人工智能网站

发表评论