整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
wiper是網頁中非常強大的一款輪播插件，說是輪播插件都不恰當，因為它能做的事情太多了，swiper在vue下也是能用的，需要依賴專門的vue-swiper插件，因為vue是沒有操作dom的邏輯的，所以寫法大不一樣，下面附swiper在vue中正確的使用方法
1.安裝swiper，執行npm install vue-awesome-swiper –save命令
2.在main.js中添加下面三行
import ‘swiper/dist/css/swiper.css’import VueAwesomeSwiper from ‘vue-awesome-swiper’Vue.use(VueAwesomeSwiper)3.在html部分添加
<swiper :options=”swiperOption”><swiper-slide>slide1</swiper-slide><swiper-slide>slide2</swiper-slide><div class=”swiper-pagination” slot=”pagination”></div><div class=”swiper-button-prev” slot=”button-prev”></div><div class=”swiper-button-next” slot=”button-next”></div></swiper>4.將下面js部分添加到data里面
swiperOption: {pagination: {el: ‘.swiper-pagination’,clickable: true // 允許點擊小圓點跳轉},autoplay: {delay: 3000,disableOnInteraction: false // 手動切換之后繼續自動輪播},loop: true,navigation: {nextEl: ‘.swiper-button-next’,prevEl: ‘.swiper-button-prev’}},
Swiper - 是免費且最現代化的移動觸摸滑塊，具有硬件加速過渡和驚人的原生行為。 它旨在用于移動網站，移動網絡應用程序和移動本機/混合應用程序。 主要針對iOS設計，但也適用于最新的Android，Windows Phone 8和現代桌面瀏覽器。github star 20K+，最新版本4.5。
開源，免費，文檔豐富，應用廣泛的swiper，簡單配置就可以實現PC,移動端的各種輪播特效，如下截圖：(前端同學必須了解)
Swiper無需加載任何公共庫（如jquery）即可運行，這保證了Swiper的輕量和運行速度。Swiper也可以在加載了公共庫的環境下安全的運行，如jQuery, Zepto, jQuery Mobile等
Swiper默認的觸摸比例為1:1，你可以通過修改Swiper的設置來改變這個比例。
Swiper可以通過設置開啟監視器，有了這個功能Swiper可以在你動態改變Dom或Swiper的樣式時自動重新初始化并計算所需的元素。
Swiper 擁有豐富的API，允許你建立自己獨特的分頁器、導航、視差滾動、或其他精彩的效果
Swiper是唯一一個支持100%RTL(右向左)布局的滑動插件。可在swiper-container上加dir="rtl"。
Swiper允許多行Slides布局，這樣每行的slide就會較少。
增加了三種新的過渡效果：淡入、3D方塊、3D流。
現在Swiper可以用來控制其他的Swiper，甚至可以同時控制。
Swiper配備了常用的導航控制器，包括分頁器，切換箭頭，滾動條。
Swiper使用流行的flexbox布局，這樣就解決了很多計算尺寸方面的問題。這種布局也允許用CSS來設定Slides。
你可以在Swiper初始化的時候設定slide的顯示，包括每行、每列、每組數量以及他們的間距等。
Swiper支持流行的視差效果，你可以將視差效果應用于Swiper的內部元素，如圖片、文本、標題、背景圖等等..
Swiper對非active slide內的圖片實行延遲加載，這個功能加快了頁面的打開速度，提高了Swiper的使用體驗。
Swiper 4新增了虛擬slides特性，當你有很多Slide或有很多內容的slide的時候可以在DOM中只保留需要的slide。
Swiper4還包含了所有swiper2的優秀特性，包括自適應、滾動反彈、抵抗反彈、loop模式、嵌套Swiper。
1.首先加載插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下載Swiper文件或使用CDN。
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="dist/css/swiper.min.css"> </head> <body> ... <script src="dist/js/swiper.min.js"></script> ... </body> </html>
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> 導航等組件可以放在container之外
3.你可能想要給Swiper定義一個大小，當然不要也行。
.swiper-container {
width: 600px;
height: 300px;
}
4.初始化Swiper：最好是挨著</body>標簽
...
<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>
</body>
如果不能寫在HTML內容的后面，則需要在頁面加載完成后再初始化。
<script>
window.onload = function() {
...
}
</script>
或者這樣（Jquery和Zepto）(推薦)
<script>
$(document).ready(function () {
...
})
</script>
5.完成。恭喜你，現在你的Swiper應該已經能正常切換了。
$ npm install swiper
var Swiper = require('swiper');
var mySwiper = new Swiper('.swiper-container', { /* ... */ });
直接上截圖,來自中文網的截圖（可以自行去官網了解更多）
wiper是一個在切圖中好用到不行的圖片輪播插件，包括3d輪播、h5滑屏等復雜應用都不在話下，到了vue項目一切邏輯完全顛覆了，沒有獲取dom的概念，還好有 vue-awesome-swiper組件，讓我們可以無縫的繼續使用swiper。如果沒記錯的話vue-awesome-swiper基于swiper3.x 開發得來。
1.npm安裝
npm install vue-awesome-swiper –save
2.main.js全局安裝
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
3.組件里調用
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
4、縮略圖（普通的swiper很簡單，網上有很多可以借鑒 我備注一下縮略圖的）template中
<div class="swiper-box" style="height: 500px">
<!-- swiper1 -->
<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
<swiper-slide class="slide-1"></swiper-slide>
<swiper-slide class="slide-2"></swiper-slide>
<swiper-slide class="slide-3"></swiper-slide>
<swiper-slide class="slide-4"></swiper-slide>
<swiper-slide class="slide-5"></swiper-slide>
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
</swiper>
<!-- swiper2 Thumbs -->
<swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
<swiper-slide class="slide-1"></swiper-slide>
<swiper-slide class="slide-2"></swiper-slide>
<swiper-slide class="slide-3"></swiper-slide>
<swiper-slide class="slide-4"></swiper-slide>
<swiper-slide class="slide-5"></swiper-slide>
</swiper>
</div>
data中定義
data() {
return {
swiperOptionTop: {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
},
swiperOptionThumbs: {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true
}
}
},
mounted中
mounted() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.swiper
const swiperThumbs = this.$refs.swiperThumbs.swiper
swiperTop.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperTop
})
}
style部分
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
