脚本宝典收集整理的这篇文章主要介绍了Swiper介绍及使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1. Swiper介绍及使用

https://www.swiper.com.cn/

1. 概念及使用

• 概念

  Swiper是一款专门用来实现滑动效果的插件(适用于移动端和pc端)​https://www.swiper.com.cn/

• 基本使用

  • 下载

  • 引入文件 swiper-bundle.min.js和swiper-bundle.min.css

    1. swiper-bundle.min.js和swiper-bundle.min.css  文件默认在 package 文件夹中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 class="swiper-button-prev"></div>    <div class="swiper-button-next"></div>        <!-- 如果需要滚动条 -->    <div class="swiper-scrollbar"></div></div>

  • 初始化

    <script>          var mySwiper = new Swiper ('.swiper-container', {    direction: 'vertical', // 垂直切换选项    loop: true, // 循环模式选项        // 如果需要分页器    pagination: {      el: '.swiper-pagination',    },        // 如果需要前进后退按钮    navigation: {      nextEl: '.swiper-button-next',      prevEl: '.swiper-button-prev',    },        // 如果需要滚动条    scrollbar: {      el: '.swiper-scrollbar',    },  })          </script>

2. 其他配置介绍

• 查看API文档

• 具体配置选项介绍

  var mySwiper = new Swiper('.swiper-container',{    //设置默认显示第几个, 从0开始    initialSlide :2,    //设置滑动方向, 默认horizontal水平显示, vertical代表垂直显示    direction : 'vertical',    //设置切换速度单位毫秒    speed: 300,    //设置是否循环切换, false不循环, true循环    loop : true,    //是否自动切换    autoplay: true,    //设置切换效果 'fade', 'cube'    effect: 'cube',    //设置分页    pagination: {        el: '.swiper-pagination',        //点击小圆点切换        clickable :true,    },    //显示上一页,下一页按钮    navigation: {      nextEl: '.swiper-button-next',      prevEl: '.swiper-button-prev',    },    // 添加滚动条    scrollbar: {       el: '.swiper-scrollbar',    },    // 设置通过键盘控制    keyboard : true,})

• 样式设置

  .swiper-container{    --swiper-theme-color: #ff6600;/* 设置Swiper风格 */    --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */    --swiper-navigation-size: 30px;/* 设置按钮大小 */    --swiper-pagination-color: #00ff33;/* 设置分页器颜色 */}

•  

脚本宝典总结

以上是脚本宝典为你收集整理的Swiper介绍及使用全部内容，希望文章能够帮你解决Swiper介绍及使用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。