swiper使用笔记

山沟沟里的娃

已于 2024-04-26 09:40:07 修改

阅读量86

点赞数 1

文章标签：笔记前端 javascript

于 2024-04-16 09:06:12 首次发布

本文链接：https://blog.csdn.net/qq_34856863/article/details/137808451

版权

本文介绍了如何使用Swiper库在网页中实现图片轮播，包括设置自动播放、循环模式、滑块间距，以及添加导航按钮和分页器，并详细讲解了transitionEnd事件的监听和分页器的自定义配置。

摘要由CSDN通过智能技术生成

结构

<div class="swiper">
      <div class="swiper-wrapper">
           <div class="swiper-slide">
               <img src="magic/images/detailsBanner.jpg" alt="">
           </div>
           <div class="swiper-slide">
               <img src="magic/images/detailsBanner.jpg" alt="">
           </div>
     </div>
     <div class="swiper-pagination"></div> <!--分页器-->
	<div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
    <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
 </div>

var detailsBanner = new Swiper('.detailsBanner',{
         // effect: 'fade',    //切换效果
           autoplay: {
               disableOnInteraction: false,  //如果手动干预后swiper会停止自动切换
           },
           loop: true,   //循环
            slidesPerView: 3,  //显示几个滑块
            spaceBetween : 20,  //滑块与滑块间的距离
           //左右按钮
           navigation: {
			      nextEl: '.swiper-button-next',
			      prevEl: '.swiper-button-prev',
    		},
    		//事件监听
            on: {
            			//滑块停止后触发以下事件
                    transitionEnd: function(){
                        // let i = this.activeIndex-4 <= 0 ? 0 :this.activeIndex-4;//loop模式下返回的索引不对应
                        let i = this.realIndex;//loop模式下返回对应索引
                        console.log(this.realIndex);
                        $('.partition .tabTop .tabClick').eq(i).addClass('active').siblings().removeClass('active');
                    }
             },
           // 分页器配置
           pagination: {
               el: '.swiper-pagination',
               type: 'fraction',   //类型
               renderFraction: function (currentClass, totalClass) {
                   return '<span class="' + currentClass + '"></span>' +
                       '/' +
                       '<span class="' + totalClass + '"></span>';
               },
               //  返回所有滑块数量
               formatFractionTotal: function (number) {
                   return number < 10 ? '0' + number : number;
               },
               // 返回当前滑块索引
               formatFractionCurrent: function (number) {
                   return number < 10 ? '0' + number : number;
               }
           },
 });