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

話不多說(shuō)，直接上教程

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

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

x

x

2、CSS樣式

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

}

3、HTML

//添加圖片

4、javaScript

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',

},

});

效果圖

你只需要替換一下圖片，和修改一下圖片及輪播圖的大小就可以輕輕松松寫出一個(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，渲染日歷：日歷是自己開發(fā)的(注意幾點(diǎn)：1，獲得當(dāng)前日期；2，一個(gè)月多少天；3，閏月情況；4，每個(gè)月1號(hào)是禮拜幾；。。。)

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

問題：

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

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

重新引入后，ok了，問題得到解決；

2，引入需要的文件后，發(fā)現(xiàn)ios和安卓瀏覽器是沒有問題的，但是，安卓app里又出現(xiàn)問題了，來(lái)回切換不流暢，此時(shí)自己也是百度了一下，沒有找到解決方法

最后還得看官方文檔，查看屬性和方法

解決方案：

// 輪播圖--左右滑動(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)文章希望大家以后多多支持腳本之家！

總結(jié)

以上是生活随笔為你收集整理的swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。