swiper4的用法

佚名 2024-04-15 01:08:20 举报

篇首语：本文由小编为大家整理，主要介绍了swiper4的用法相关的知识，希望对你有一定的参考价值。

1.swiper：html结构

slider1

slider2

slider3

　　2.样式

       .swiper-container            margin:0 auto;            width:100px;            height:200px;            overflow: hidden;            border:1px solid red;                .swiper-wrapper,.swiper-slide            width:100px;            height:200px;

　　3.水平轮播

var mySwiper = new Swiper(".swiper-container",         autoplay: true,//可选选项，自动滑动        loop:true    )

　　4.垂直轮播

    var mySwiper = new Swiper(".swiper-container",         autoplay: true,//可选选项，自动滑动        direction : "vertical",//控制滚动的方向，水平或垂直        loop:true    )

　　5.轮播可视区域展示多个slide项

   var mySwiper = new Swiper(".swiper-container",         autoplay: true,//可选选项，自动滑动        direction : "vertical",        loop:true,        slidesPerView : 3,//设置slider容器能够同时显示的slides数量(carousel模式)    )

　　6.左右切换，获取activeIndex的值

var mySwiper = new Swiper(".swiper-container",  on:     //slideChangeTransitionStart开始切换时告诉我现在是第几个slide    slideChangeTransitionEnd: function()      alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide    ,  ,)

　　7.分页1/3展示效果

var mySwiper = new Swiper(".swiper-container",    pagination:        el: ".swiper-pagination",       type:"fraction",       //type: "bullets",圆点默认       //type: "fraction",分页       //type : "progressbar",进度条       //type : "custom",自定义     ,)

　　8.延迟加载图片

　　9.滚动条

　　10.缩略图

　　11.锚导航

以上是关于swiper4的用法的主要内容，如果未能解决你的问题，请参考以下文章