swiper 增加一个鼠标移入分页器的小点后就切换展示图片


1、头部加载插件:
<link rel="stylesheet" href="swiper.min.css">
<script src="swiper.min.js"></script>

2、html部分:

<div class="swiper-container">    
  <div class="swiper-wrapper">      
    <div class="swiper-slide">Slide 1</div>      
    <div class="swiper-slide">Slide 2</div>      
    <div class="swiper-slide">Slide 3</div>   
   </div>    
  <!-- 如果需要分页器 -->    
  <div class="swiper-pagination"></div>
</div>

3、js部分:
$(document).ready(function() {
      var mySwiper = new Swiper('.swiper-container', {
        loop:true,
        autoplay:true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        }
      });
      //此方法为模拟的,hover到分页器的小圆点后自动触发其本身的click事件
      $(".swiper-pagination-bullet").hover(function() {
          $(this).click(); //鼠标划上去之后,自动触发点击事件来模仿鼠标划上去的事件
      },function() {
          mySwiper.autoplay.start(); //鼠标移出之后,自动轮播开启
      })
    })

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
一个swiper里面实现两个分页,可以使用Swiper的pagination配置项和pagination.el选项。 具体实现方式如下: 1. 在HTML中,创建两个分页,分别为"swiper-pagination1"和"swiper-pagination2"。 ```html <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 第一个分页 --> <div class="swiper-pagination1"></div> <!-- 第二个分页 --> <div class="swiper-pagination2"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> ``` 2. 在JavaScript中,创建一个Swiper实例,并在pagination配置项中设置两个分页,分别为".swiper-pagination1"和".swiper-pagination2"。同时,设置pagination.el选项为".swiper-pagination1",表示Swiper会将第一个分页作为默认分页。 ```javascript var mySwiper = new Swiper('.swiper-container', { // 其他配置项... pagination: { el: '.swiper-pagination1', // 默认分页 type: 'bullets', // 小圆点分页 bulletElement: 'span' // 小圆点的标签可以自定义,默认是li }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); // 创建第二个分页 var mySwiper2 = new Swiper('.swiper-container', { // 其他配置项... pagination: { el: '.swiper-pagination2', // 第二个分页 clickable: true, // 可点击切换当前slide renderBullet: function (index, className) { // 返回自定义的bullet元素 return '<span class="' + className + '">' + (index + 1) + '</span>'; } }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); // 通过监听事件,实现两个分页的联动 mySwiper.on('slideChange', function () { var activeIndex = mySwiper.activeIndex; mySwiper2.slideTo(activeIndex, 300, false); }); mySwiper2.on('click', function () { var activeIndex = mySwiper2.clickedIndex; mySwiper.slideTo(activeIndex, 300, false); }); ``` 在上面的代码中,我们先创建了一个Swiper实例mySwiper,并将第一个分页设置为默认分页。然后,我们通过创建第二个Swiper实例mySwiper2,来创建第二个分页。在第二个分页中,我们设置了clickable为true,表示可以点击切换当前slide,并通过renderBullet函数来自定义分页的内容。 在实现联动时,我们通过监听mySwiper的slideChange事件和mySwiper2的click事件,来实现两个分页的联动。具体实现方式为:当mySwiper的slideChange事件被触发时,我们获取当前的activeIndex,并通过mySwiper2.slideTo方法来切换第二个分页;当mySwiper2的click事件被触发时,我们获取点击的分页索引,并通过mySwiper.slideTo方法来切换当前swiper的slide。 需要注意的是,在实现本方法时,需要确保两个分页的容位置、样式等保持一致,否则可能会出现样式错乱等问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时间在飞飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值