Swiper实战Demo大全

编程语言 2018-05-09 13:55:48 阅读次数: 2

【前言】

   本文我用Swiper.js来做一些常见的特效案例，关于手机和PC的适配也做了一些处理，在这里分享记录下

   效果展示方面可以看我的git，最后发下Demo效果链接

    更多实例，可以查看Swiper官方展示http://www.swiper.com.cn/demo/web/index.html

 

【列表】

（1）基础滑动

（2）按钮切换

（3）分页

 （4）分页器 / 动态指示点

（5）进度条指示器

（6）分式指示器

（7）自定义指示器

（8）滚动条

（9）垂直切换

（10）slides之间设置间隔

（11）过渡前执行动画

（12）一页显示多个Slides

（13）自定义slide宽度 / Carousel转盘模式

（14）slides居中

（15）Slides居中 + 自定义Slides宽度

（16）free自由模式 / 不贴合边缘

（17）垂直方向内容滚动

（18）多行slides分布

（19）Swipers嵌套

（20）抓手光标

（21）Loop模式 / 无限循环模式

（22）Loop模式+Slides分组

（23）切换效果

（24）键盘控制

（25）鼠标滚轮控制

（26）自动切换

（27）动态添加Slides

（28）缩略图控制 / Swiper互相控制

（29）缩略图控制 / 无限循环

（30）视差效果

（31）延迟加载图片

（32）响应式设置

（33）虚拟Slides 

 

【主体】

先写出基础页面架构

<div class="swiper-container ">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
    </div>
</div>

 

（1）基础滑动

   初始化Swiper

 var mySwiper = new Swiper('.swiper-container');
（2）按钮切换 
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
//以下为JS代码
navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
},
 （3）分页 
<div class="swiper-pagination"></div>
//以下为JS代码
pagination: {//分页
            el: '.swiper-pagination',
},
 （4）分页器 / 动态指示点 
pagination: {//分页
            el: '.swiper-pagination',//添加分页
            dynamicBullets: true,//动态指示点
},
（5）进度条指示器 
pagination: {//分页
            el: '.swiper-pagination',//添加分页
            type: 'progressbar',//进度条指示器
},

（6）分式指示器

pagination: {//分页
            el: '.swiper-pagination',//添加分页
            type: 'fraction',//分式指示器
},

 （7）自定义指示器

//css
.swiper-pagination-bullet {
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #000;
            opacity: 1;
            background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active {
            color: #fff;
            background: #007aff;
}
//JS代码
pagination: {//分页
            el: '.swiper-pagination',
            clickable: true,//分页指示点可点击
            renderBullet: function (index, className) {//分页点加索引
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            },
},

 （8）滚动条

<div class="swiper-scrollbar"></div>
//以下为JS代码
 scrollbar: {
            el: '.swiper-scrollbar',
            hide: true,//控制显示隐藏
},

 （9）垂直切换

//CSS代码
#Swiper-first{
         width: 100%;
         height: 300px;
         overflow-y: hidden;
}
<!--垂直分页-->
<div class="swiper-pagination"></div>
//以下为JS代码
direction: 'vertical',
pagination: {
      el: '.swiper-pagination',
      clickable: true,
},

 （10）slides之间设置间隔

spaceBetween: 30,//设置slides间隔

 （11）过渡前执行动画

   ①添加类名和参数，在需要运动的元素上面增加类名ani，具体可以参考文章Swiper Animate用法详解

   ②JS控制显示添加删除

<div class="swiper-container" id="Swiper-one">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="fadeInUp">内容1</p>
        </div>
        <div class="swiper-slide"><p>
            <p class="ani" swiper-animate-effect="fadeInLeft">内容2</p>
        </div>
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="fadeInDown">内容3</p>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>
//JS代码
var mySwiper = new Swiper ('.swiper-container', {  
    on:{  
      init: function(){  
        swiperAnimateCache(this); //隐藏动画元素   
        swiperAnimate(this); //初始化完成开始动画  
      },   
      slideChangeTransitionEnd: function(){   
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画  
      }   
    }  
  })

 （12）一页显示多个Slides

slidesPerView: 3,

 （13）自定义slide宽度 / Carousel转盘模式

 

//CSS代码
.swiper-slide{
       width: 80%;
}
//JS代码
slidesPerView: 'auto'//开启slide宽度自定义功能
 （14）slides居中

   适用于一页显示多个Slides的幻灯片

slidesPerView: 4,//一页4个
centeredSlides: true,//首个居中
 （15）Slides居中 + 自定义Slides宽度 
slidesPerView: 'auto'//开启slide宽度自定义功能
centeredSlides: true,//首个居中
 （16）free自由模式 / 不贴合边缘 
freeMode: true,
 （17）垂直方向内容滚动 
<!--滚动条-->
<div class="swiper-scrollbar"></div>
//JS代码
direction: 'vertical',
        slidesPerView: 'auto',//自定义宽度/高度
        freeMode: true,//自由模式
        scrollbar: {
            el: '.swiper-scrollbar',
},
mousewheel: true,// 开启鼠标滚轮
 （18）多行slides分布 
//CSS 
.swiper-container {
            width: 100%;
            height: auto;
            margin-left: auto;
            margin-right: auto;
}
//JS代码
slidesPerColumn: 2,//两行
 （19）Swipers嵌套 
<div class="swiper-container" id="Swiper-one">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            1
        </div>
        <div class="swiper-slide">
            <div class="swiper-container" id="Swiper-two">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">1</div>
                    <div class="swiper-slide">2</div>
                    <div class="swiper-slide">3</div>
                </div>
                <div class="swiper-pagination swiper-pagination-v"></div>
            </div>
        </div>
        <div class="swiper-slide">
            3
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-h"></div>
</div>
//JS代码
<script>
    var swiperH = new Swiper('#Swiper-one', {
        spaceBetween: 50,
        pagination: {
            el: '.swiper-pagination-h',
            clickable: true,
        },
    });
    var swiperV = new Swiper('#Swiper-two', {
        direction: 'vertical',
        spaceBetween: 50,
        pagination: {
            el: '.swiper-pagination-v',
            clickable: true,
        },
    });
</script>

（20）抓手光标

grabCursor: true,
（21）Loop模式 / 无限循环模式 
loop: true,
（22）Loop模式+Slides分组 
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: true,
loopFillGroupWithBlank: true,//在loop模式下，为group填充空白slide
 （23）切换效果
①渐变切换 
effect: 'fade',//淡入
②3D方块切换 
effect:'cube'//方块
③3D滚动切换 
effect:'coverflow'//3D流

④3D翻转切换

effect:'flip'//翻动

（24）键盘控制

keyboard: {
        enabled: true,//启用键盘
},

（25）鼠标滚轮控制

mousewheel: true,//开启滚轮

（26）自动切换

autoplay:true,
//等同于以下设置
autoplay: {
   delay: 3000,/延迟300ms
   stopOnLastSlide: false,//是否停在最后一张
   disableOnInteraction: true,//开启交互
},

（27）动态添加Slides

<p class="append-buttons">
    <a href="#" class="prepend-2-slides">Prepend 2 Slides</a>
    <a href="#" class="prepend-slide">Prepend Slide</a>
    <a href="#" class="append-slide">Append Slide</a>
    <a href="#" class="append-2-slides">Append 2 Slides</a>
  </p>
//JS代码
    var appendNumber = 4;
    var prependNumber = 1;
    document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.prependSlide([
        '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
        '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
        ]);
    });
    document.querySelector('.prepend-slide').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.prependSlide('<div class="swiper-slide">Slide ' + 
         (--prependNumber) + '</div>');
    });
    document.querySelector('.append-slide').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
    });
    document.querySelector('.append-2-slides').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.appendSlide([
        '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
        '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
        ]);
    });

（28）缩略图控制 / Swiper互相控制

     具体我在文章Swiper缩略图Demo里做了案例

（29）缩略图控制 / 无限循环

    经过测试后，发现稳定性较差，存在BUG

（30）视差效果

    parallax（视差）                         类型：boolean     默认：false

设置为true开启视差效果，效果可以应用于container或slide的子元素

    效果列表：

   1.视差位移变化

在所需要的元素上增加data-swiper-parallax属性（与Swiper切换方向相同）或data-swiper-parallax-x （x方向） data-swiper-parallax-y（y方向）

data-swiper-parallax接受两种类型的参数

          number（单位：px），如-300，从右边300px进入左边出去；

          percentage（百分比），移动距离=该元素宽度 * percentage

    2.透明度变化data-swiper-parallax-opacity，可选值0-1

    3.缩放变化data-swiper-parallax-scale属性

    4.持续时间data-swiper-parallax-duration设定视差动画持续时间（ms）

注意：设定透明度或缩放必须同时设定位移，否则无效 

    案例：

具体我在文章Swiper视差效果Demo里做了案例

（31）延迟加载图片

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 延迟加载图片的结构 -->
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>

        <!-- 使用srscet的延迟加载图片的结构(注：2x,2倍分辨率如retina屏幕时加载)-->
        <div class="swiper-slide">
            <img data-src="path/to/logo-small.png" 
             data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>

        <!-- 延迟加载背景图的结构 -->
        <div class="swiper-slide">
            <div data-background="path/to/picture-2.jpg" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
        </div>

        <!-- slide的背景延迟加载 -->
        <div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>
</div>

<script> 
var mySwiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
  },
});
</script>

（32）响应式设置

主要原理是断点设置

breakpoints: {
        1024: {
          slidesPerView: 4,
          spaceBetween: 40,
        },
        768: {
          slidesPerView: 3,
          spaceBetween: 30,
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        320: {
          slidesPerView: 1,
          spaceBetween: 10,
        }
      }

（33）自动高度

autoHeight: true, //启用自动高度

（34）虚拟Slides

<div class="swiper-pagination"></div>
//JS代码
pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
},
virtual: {
            slides: (function () {
                var slides = [];
                for (var i = 0; i < 600; i += 1) {
                    slides.push('Slide ' + (i + 1));
                }
                return slides;
            }()),
},
document.querySelector('.slide-1').addEventListener('click', function (e) {
        e.preventDefault();
        swiper.slideTo(0, 0);
});
document.querySelector('.slide-250').addEventListener('click', function (e) {
        e.preventDefault();
        swiper.slideTo(249, 0);
});
 document.querySelector('.slide-500').addEventListener('click', function (e) {
        e.preventDefault();
        swiper.slideTo(499, 0);
});

（35）可滑动菜单

 我在后面文章Swiper滑动菜单Demo里做了总结

 

 

.

【前言】

   本文我用Swiper.js来做一些常见的特效案例，关于手机和PC的适配也做了一些处理，在这里分享记录下

   效果展示方面可以看我的git，最后发下Demo效果链接

    更多实例，可以查看Swiper官方展示http://www.swiper.com.cn/demo/web/index.html

 

【列表】

（1）基础滑动

（2）按钮切换

（3）分页

 （4）分页器 / 动态指示点

（5）进度条指示器

（6）分式指示器

（7）自定义指示器

（8）滚动条

（9）垂直切换

（10）slides之间设置间隔

（11）过渡前执行动画

（12）一页显示多个Slides

（13）自定义slide宽度 / Carousel转盘模式

（14）slides居中

（15）Slides居中 + 自定义Slides宽度

（16）free自由模式 / 不贴合边缘

（17）垂直方向内容滚动

（18）多行slides分布

（19）Swipers嵌套

（20）抓手光标

（21）Loop模式 / 无限循环模式

（22）Loop模式+Slides分组

（23）切换效果

（24）键盘控制

（25）鼠标滚轮控制

（26）自动切换

（27）动态添加Slides

（28）缩略图控制 / Swiper互相控制

（29）缩略图控制 / 无限循环

（30）视差效果

（31）延迟加载图片

（32）响应式设置

（33）虚拟Slides 

 

【主体】

先写出基础页面架构

<div class="swiper-container ">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
    </div>
</div>

 

（1）基础滑动

   初始化Swiper

 var mySwiper = new Swiper('.swiper-container');
（2）按钮切换 
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
//以下为JS代码
navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
},
 （3）分页 
<div class="swiper-pagination"></div>
//以下为JS代码
pagination: {//分页
            el: '.swiper-pagination',
},
 （4）分页器 / 动态指示点 
pagination: {//分页
            el: '.swiper-pagination',//添加分页
            dynamicBullets: true,//动态指示点
},
（5）进度条指示器 
pagination: {//分页
            el: '.swiper-pagination',//添加分页
            type: 'progressbar',//进度条指示器
},

（6）分式指示器

pagination: {//分页
            el: '.swiper-pagination',//添加分页
            type: 'fraction',//分式指示器
},

 （7）自定义指示器

//css
.swiper-pagination-bullet {
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #000;
            opacity: 1;
            background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active {
            color: #fff;
            background: #007aff;
}
//JS代码
pagination: {//分页
            el: '.swiper-pagination',
            clickable: true,//分页指示点可点击
            renderBullet: function (index, className) {//分页点加索引
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            },
},

 （8）滚动条

<div class="swiper-scrollbar"></div>
//以下为JS代码
 scrollbar: {
            el: '.swiper-scrollbar',
            hide: true,//控制显示隐藏
},

 （9）垂直切换

//CSS代码
#Swiper-first{
         width: 100%;
         height: 300px;
         overflow-y: hidden;
}
<!--垂直分页-->
<div class="swiper-pagination"></div>
//以下为JS代码
direction: 'vertical',
pagination: {
      el: '.swiper-pagination',
      clickable: true,
},

 （10）slides之间设置间隔

spaceBetween: 30,//设置slides间隔

 （11）过渡前执行动画

   ①添加类名和参数，在需要运动的元素上面增加类名ani，具体可以参考文章Swiper Animate用法详解

   ②JS控制显示添加删除

<div class="swiper-container" id="Swiper-one">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="fadeInUp">内容1</p>
        </div>
        <div class="swiper-slide"><p>
            <p class="ani" swiper-animate-effect="fadeInLeft">内容2</p>
        </div>
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="fadeInDown">内容3</p>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>
//JS代码
var mySwiper = new Swiper ('.swiper-container', {  
    on:{  
      init: function(){  
        swiperAnimateCache(this); //隐藏动画元素   
        swiperAnimate(this); //初始化完成开始动画  
      },   
      slideChangeTransitionEnd: function(){   
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画  
      }   
    }  
  })

 （12）一页显示多个Slides

slidesPerView: 3,

 （13）自定义slide宽度 / Carousel转盘模式

 

//CSS代码
.swiper-slide{
       width: 80%;
}
//JS代码
slidesPerView: 'auto'//开启slide宽度自定义功能
 （14）slides居中

   适用于一页显示多个Slides的幻灯片

slidesPerView: 4,//一页4个
centeredSlides: true,//首个居中
 （15）Slides居中 + 自定义Slides宽度 
slidesPerView: 'auto'//开启slide宽度自定义功能
centeredSlides: true,//首个居中
 （16）free自由模式 / 不贴合边缘 
freeMode: true,
 （17）垂直方向内容滚动 
<!--滚动条-->
<div class="swiper-scrollbar"></div>
//JS代码
direction: 'vertical',
        slidesPerView: 'auto',//自定义宽度/高度
        freeMode: true,//自由模式
        scrollbar: {
            el: '.swiper-scrollbar',
},
mousewheel: true,// 开启鼠标滚轮
 （18）多行slides分布 
//CSS 
.swiper-container {
            width: 100%;
            height: auto;
            margin-left: auto;
            margin-right: auto;
}
//JS代码
slidesPerColumn: 2,//两行
 （19）Swipers嵌套 
<div class="swiper-container" id="Swiper-one">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            1
        </div>
        <div class="swiper-slide">
            <div class="swiper-container" id="Swiper-two">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">1</div>
                    <div class="swiper-slide">2</div>
                    <div class="swiper-slide">3</div>
                </div>
                <div class="swiper-pagination swiper-pagination-v"></div>
            </div>
        </div>
        <div class="swiper-slide">
            3
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-h"></div>
</div>
//JS代码
<script>
    var swiperH = new Swiper('#Swiper-one', {
        spaceBetween: 50,
        pagination: {
            el: '.swiper-pagination-h',
            clickable: true,
        },
    });
    var swiperV = new Swiper('#Swiper-two', {
        direction: 'vertical',
        spaceBetween: 50,
        pagination: {
            el: '.swiper-pagination-v',
            clickable: true,
        },
    });
</script>

（20）抓手光标

grabCursor: true,
（21）Loop模式 / 无限循环模式 
loop: true,
（22）Loop模式+Slides分组 
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: true,
loopFillGroupWithBlank: true,//在loop模式下，为group填充空白slide
 （23）切换效果 ①渐变切换 
effect: 'fade',//淡入
②3D方块切换 
effect:'cube'//方块
③3D滚动切换 
effect:'coverflow'//3D流

④3D翻转切换

effect:'flip'//翻动

（24）键盘控制

keyboard: {
        enabled: true,//启用键盘
},

（25）鼠标滚轮控制

mousewheel: true,//开启滚轮

（26）自动切换

autoplay:true,
//等同于以下设置
autoplay: {
   delay: 3000,/延迟300ms
   stopOnLastSlide: false,//是否停在最后一张
   disableOnInteraction: true,//开启交互
},

（27）动态添加Slides

<p class="append-buttons">
    <a href="#" class="prepend-2-slides">Prepend 2 Slides</a>
    <a href="#" class="prepend-slide">Prepend Slide</a>
    <a href="#" class="append-slide">Append Slide</a>
    <a href="#" class="append-2-slides">Append 2 Slides</a>
  </p>
//JS代码
    var appendNumber = 4;
    var prependNumber = 1;
    document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.prependSlide([
        '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
        '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
        ]);
    });
    document.querySelector('.prepend-slide').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.prependSlide('<div class="swiper-slide">Slide ' + 
         (--prependNumber) + '</div>');
    });
    document.querySelector('.append-slide').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
    });
    document.querySelector('.append-2-slides').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.appendSlide([
        '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
        '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
        ]);
    });

（28）缩略图控制 / Swiper互相控制

     具体我在文章Swiper缩略图Demo里做了案例

（29）缩略图控制 / 无限循环

    经过测试后，发现稳定性较差，存在BUG

（30）视差效果

    parallax（视差）                         类型：boolean     默认：false

设置为true开启视差效果，效果可以应用于container或slide的子元素

    效果列表：

   1.视差位移变化

在所需要的元素上增加data-swiper-parallax属性（与Swiper切换方向相同）或data-swiper-parallax-x （x方向） data-swiper-parallax-y（y方向）

data-swiper-parallax接受两种类型的参数

          number（单位：px），如-300，从右边300px进入左边出去；

          percentage（百分比），移动距离=该元素宽度 * percentage

    2.透明度变化data-swiper-parallax-opacity，可选值0-1

    3.缩放变化data-swiper-parallax-scale属性

    4.持续时间data-swiper-parallax-duration设定视差动画持续时间（ms）

注意：设定透明度或缩放必须同时设定位移，否则无效 

    案例：

具体我在文章Swiper视差效果Demo里做了案例

（31）延迟加载图片

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 延迟加载图片的结构 -->
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>

        <!-- 使用srscet的延迟加载图片的结构(注：2x,2倍分辨率如retina屏幕时加载)-->
        <div class="swiper-slide">
            <img data-src="path/to/logo-small.png" 
             data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>

        <!-- 延迟加载背景图的结构 -->
        <div class="swiper-slide">
            <div data-background="path/to/picture-2.jpg" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
        </div>

        <!-- slide的背景延迟加载 -->
        <div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>
</div>

<script> 
var mySwiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
  },
});
</script>

（32）响应式设置

主要原理是断点设置

breakpoints: {
        1024: {
          slidesPerView: 4,
          spaceBetween: 40,
        },
        768: {
          slidesPerView: 3,
          spaceBetween: 30,
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        320: {
          slidesPerView: 1,
          spaceBetween: 10,
        }
      }

（33）自动高度

autoHeight: true, //启用自动高度

（34）虚拟Slides

<div class="swiper-pagination"></div>
//JS代码
pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
},
virtual: {
            slides: (function () {
                var slides = [];
                for (var i = 0; i < 600; i += 1) {
                    slides.push('Slide ' + (i + 1));
                }
                return slides;
            }()),
},
document.querySelector('.slide-1').addEventListener('click', function (e) {
        e.preventDefault();
        swiper.slideTo(0, 0);
});
document.querySelector('.slide-250').addEventListener('click', function (e) {
        e.preventDefault();
        swiper.slideTo(249, 0);
});
 document.querySelector('.slide-500').addEventListener('click', function (e) {
        e.preventDefault();
        swiper.slideTo(499, 0);
});

（35）可滑动菜单

 我在后面文章Swiper滑动菜单Demo里做了总结

 

 

.

猜你喜欢

转载自570109268.iteye.com/blog/2412628
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022