JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

Swiper.js插件超简单实现轮播图

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Swiper.js插件超简单实现轮播图，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

SwiPEr是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用
话不多说，直接上教程

1、首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

 <!-- Link Swiper-->
  <link rel="stylesheet" href="https://cdnjs.clouDFlare.COM/ajax/libs/Swiper/4.0.2/css/swiper.min.css" rel="external nofollow" >
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

请勿直接引入Swiper中文网的文件

x <script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>

x <link href="http://www.swiper.com.cn/dist/css/swiper.min.css" rel="external nofollow" />

2、CSS样式

 <style>
    .swiper-container {
    //你可以在这里设置宽高
      width: 50%;
      height: 50%;
    }
    .swiper-slide {
      text-align: center;
      font-Size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkIT-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    img{
      width:250px;
    }
  </style>

3、HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img/000.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/001.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/002.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/003.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/004.jpg" alt=""></div>
    //添加图片
  </div>
  <!-- Add pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

4、javaScript

<script>
  VAR swiper = new Swiper('.swiper-container', {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      PRevEl: '.swiper-button-prev',
    },
  });
</script>

&nbsp;效果图

你只需要替换一下图片，和修改一下图片及轮播图的大小就可以轻轻松松写出一个很棒的轮播图，怎么样是不是很简单

补充：怎么用swiper实现匀速无缝轮播

1.设置属性

freeMode:true,

autoplay: {

delay:0

}

2.然后再修改或者覆盖样式

.swiper-container-free-mode>.swiper-wrapper {
  -webkit-transition-timing-function: linear; /*之前是ease-out*/
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  margin: 0 auto;
}

补充2：移动端swiper.js中的坑

步骤：

1，渲染日历：日历是自己开发的（注意几点：1，获得当前日期；2，一个月多少天；3，闰月情况；4，每个月1号是礼拜几；。。。）

2，因项目比较近，所以采用了swiper.js控件来做滑动效果；

问题： 

1，首先遇到的是在ios上测试是没有问题的，包括UC，百度等浏览器；不过在魅族，华为手机上测试出现问题了-----不能来回切换；

解决方法：考虑到应该是兼容性问题，于是乎查找swiper.js官方文档，因为当时只是引用了swiper.js，而没有引入swiper.css和swiper.aniMATE.js；

重新引入后，ok了，问题得到解决；

<link rel="stylesheet" href="../../styles/library/swiper.min.css" rel="external nofollow" />
<script src="../../scripts/common/swiper-3.3.1.min.js"></script>
<script src="../../scripts/common/swiper.animate.min.js"></script>

2，引入需要的文件后，发现ios和安卓浏览器是没有问题的，但是，安卓app里又出现问题了，来回切换不流畅，此时自己也是百度了一下，没有找到解决方法
最后还得看官方文档，查看属性和方法
解决方案：

 // 轮播图--左右滑动和切换
  var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    loop:false,
    mode: 'horizontal',
    freeMode:false,
    touchRatio:0.5,
    longSwipesRatio:0.1,
    threshold:50,
    followFinger:false,
    observer: true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents: true,//修改swiper的父元素时，自动初始化swiper
    onSlideChangeEnd:function(swiper){ // 当滑动结束后---月份日期切换同步左右左右切换
      changeMonth();
    }
  });

注意：初始化的时候添加的这几个属性，有不明白的可以查看官方文档；

温馨提示：swper.js我用的3xxx版本以上的，各个版本差别还是挺大的！

到此这篇关于Swiper.js插件超简单实现轮播图的文章就介绍到这了,更多相关Swiper.js 轮播图内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的Swiper.js插件超简单实现轮播图全部内容，希望文章能够帮你解决Swiper.js插件超简单实现轮播图所遇到的问题。

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

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：轮播图轮播图
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程