快捷導(dǎo)航

Swiper.js插件超簡(jiǎn)單實(shí)現(xiàn)輪播圖

更新時(shí)間：2021年03月24日 11:14:29 作者：魚(yú)與風(fēng)。

這篇文章主要介紹了Swiper.js插件超簡(jiǎn)單實(shí)現(xiàn)輪播圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Swiper是純javascript打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。超好用
話不多說(shuō)，直接上教程

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

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

請(qǐng)勿直接引入Swiper中文網(wǎng)的文件

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

x <link  rel="external nofollow" />

2、CSS樣式

 <style>
    .swiper-container {
    //你可以在這里設(shè)置寬高
      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>

效果圖

你只需要替換一下圖片，和修改一下圖片及輪播圖的大小就可以輕輕松松寫(xiě)出一個(gè)很棒的輪播圖，怎么樣是不是很簡(jiǎn)單

補(bǔ)充：怎么用swiper實(shí)現(xiàn)勻速無(wú)縫輪播

1.設(shè)置屬性

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;
}

補(bǔ)充2：移動(dòng)端swiper.js中的坑

步驟：

1，渲染日歷：日歷是自己開(kāi)發(fā)的（注意幾點(diǎn)：1，獲得當(dāng)前日期；2，一個(gè)月多少天；3，閏月情況；4，每個(gè)月1號(hào)是禮拜幾；。。。）

2，因項(xiàng)目比較近，所以采用了swiper.js控件來(lái)做滑動(dòng)效果；

問(wèn)題：

1，首先遇到的是在ios上測(cè)試是沒(méi)有問(wèn)題的，包括UC，百度等瀏覽器；不過(guò)在魅族，華為手機(jī)上測(cè)試出現(xiàn)問(wèn)題了-----不能來(lái)回切換；

解決方法：考慮到應(yīng)該是兼容性問(wèn)題，于是乎查找swiper.js官方文檔，因?yàn)楫?dāng)時(shí)只是引用了swiper.js，而沒(méi)有引入swiper.css和swiper.animate.js；

重新引入后，ok了，問(wèn)題得到解決；

<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，引入需要的文件后，發(fā)現(xiàn)ios和安卓瀏覽器是沒(méi)有問(wèn)題的，但是，安卓app里又出現(xiàn)問(wèn)題了，來(lái)回切換不流暢，此時(shí)自己也是百度了一下，沒(méi)有找到解決方法
最后還得看官方文檔，查看屬性和方法
解決方案：

 // 輪播圖--左右滑動(dòng)和切換
  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自己或子元素時(shí)，自動(dòng)初始化swiper
    observeParents: true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper
    onSlideChangeEnd:function(swiper){ // 當(dāng)滑動(dòng)結(jié)束后---月份日期切換同步左右左右切換
      changeMonth();
    }
  });

注意：初始化的時(shí)候添加的這幾個(gè)屬性，有不明白的可以查看官方文檔；

溫馨提示：swper.js我用的3xxx版本以上的，各個(gè)版本差別還是挺大的！

到此這篇關(guān)于Swiper.js插件超簡(jiǎn)單實(shí)現(xiàn)輪播圖的文章就介紹到這了,更多相關(guān)Swiper.js 輪播圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: