vue項目的package.json中顯示的"vue-awesome-swiper": "^2.5.4",用npm install自動安裝依賴時裝的版本爲"version": "2.6.7"
2.5.4與2.6.7都是基於swiper3的,從官網上swiper3的教程來看並不須要單獨引入樣式文件,而2.6.7版本須要單獨引入swiper/dist/css目錄下的swiper.css樣式文件(相似於swiper4)。javascript
而且2.6.7版本swiper位於node_modules/vue-awesome-swiper/node_modules下;2.5.4不須要單獨引入樣式文件,而且swiper直接位於node_modules文件夾下。css
/*全局引入*/ import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css'//這裏注意具體看使用的版本是否須要引入樣式,以及具體位置。 Vue.use(VueAwesomeSwiper, /* { default global options } */)
/*組件方式引用*/ import 'swiper/dist/css/swiper.css'////這裏注意具體看使用的版本是否須要引入樣式,以及具體位置。 import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }
就是通常組件的用法html
<swiper :options="swiperOption"> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> </swiper> <!--如下看須要添加--> <div class="swiper-scrollbar"></div> //滾動條 <div class="swiper-button-next"></div> //下一項 <div class="swiper-button-prev"></div> //上一項 <div class="swiper-pagination"></div> //標頁碼
data(){
return{ swiperOption: {//swiper3 autoplay: 3000, speed: 1000, } } }
參數 | 類型(swiper3) | 默認值(swiper3) | 類型(swiper4) | 默認值(swiper4) | 說明 |
---|---|---|---|---|---|
autoplay | Number/Boolean | 0/false | Object | autoplay | 自動切換 |
speed | Number | 300 | Number | 300 | 切換速度 |
loop | Boolean | false | Boolean | false | loop模式 |
loopAdditionalSlides | Number | 0 | Number | 0 | loop模式下會在slides先後複製若干個slide,,先後複製的個數不會大於原總個數。 |
loopedSlides | Number | 1 | Number | 1 | 在loop模式下使用slidesPerview:'auto',還需使用該參數設置所要用到的loop個數。 |
direction | String | horizontal | String | horizontal | Slides的滑動方向 |
autoplayDisableOnInteraction | Boolean | true | - | - | 用戶操做swiper以後,是否禁止autoplay |
autoplayStopOnLast | Boolean | true | - | - | 切換到最後一個slide時中止自動切換 |
grabCursor | Boolean | false | Boolean | false | 鼠標覆蓋Swiper時指針會變成手掌形狀,拖動時指針會變成抓手形狀 |
width | Number | - | Number | - | 強制Swiper的寬度 |
height | Number | - | Number | - | 強制Swiper的高度 |
autoHeight | Boolean | false | Boolean | false | 自動高度 |
freeMode: | swiper3/4 api相同 | ||||
freeMode | Boolean | false | - | - | free模式,slide會根據慣性滑動且不會貼合 |
freeModeMomentum | Boolean | true | - | - | free模式動量。若設置爲false則關閉動量,釋放slide以後當即中止不會滑動。 |
freeModeMomentumRatio | Number | 1 | - | - | free模式動量值(移動慣量) |
freeModeMomentumVelocityRatio | Number | 1 | - | - | 動量反彈 |
freeModeMomentumBounce | Boolean | true | - | - | Slides的滑動方向 |
freeModeMomentumBounceRatio | Number | 1 | - | - | 值越大產生的邊界反彈效果越明顯,反彈距離越大。 |
freeModeSticky | Boolean | false | - | - | 使得freeMode也能自動貼合。 |
effect: | swiper3/4 api相同 | ||||
effect | String | slide | - | - | slide的切換效果。 |
fade/fadeEffect(4) | Object | fade | - | - | fade效果參數。 |
cube/cubeEffect | Object | cube | - | - | cube效果參數。 |
coverflow/coverflowEffect | Object | coverflow | - | - | coverflow效果參數。 |
flip/flipEffect | Object | flip | - | - | flip效果參數。 |
Zoom: | |||||
zoom | Boolean | false | Object | zoom | 焦距功能:雙擊slide會放大,而且在手機端可雙指觸摸縮放。 |
zoomMax | Number | 3 | - | - | 最大縮放焦距(放大倍率). |
zoomMin | Number | 1 | - | - | 最小縮放焦距(縮小倍率)。 |
zoomToggle | Boolean | true | - | - | 設置爲false,不容許雙擊縮放,只容許手機端觸摸縮放。 |
pagination: | |||||
pagination | String | - | Object | pagination | 分頁器容器的css選擇器或HTML標籤 |
paginationType | String | - | - | - | bullets’ 圓點(默認)‘fraction’ 分式 ‘progress’ 進度條‘custom’ 自定義 |
paginationClickable | Boolean | false | - | - | 點擊分頁器的指示點分頁器控制Swiper切換 |
paginationHide | Boolean | false | - | - | 默認分頁器會一直顯示 |
paginationElement | String | span | - | - | 設定分頁器指示器(小點)的HTML標籤。 |
Navigation Buttons: | swiper4 navigation | ||||
nextButton | string / HTMLElement | - | - | - | 前進按鈕的css選擇器或HTML元素。 |
prevtButton | string / HTMLElement | - | - | - | 後退按鈕的css選擇器或HTML元素。 |
Scrollbar: | |||||
scrollbar | string / HTMLElement | - | Object | swiper4 Scrollbar | Scrollbar容器的css選擇器或HTML元素 |
scrollbarHide | Bolean | true | - | - | 滾動條是否自動隱藏。 |
scrollbarDraggable | Boolean | false | - | - | 該參數設置爲true時容許拖動滾動條。 |
scrollbarSnapOnRelease | Boolean | false | - | - | 若是設置爲true,釋放滾動條時slide自動貼合。 |
autoplay:vue
autoplay: {
delay: 3000, //自動切換的時間間隔,單位ms stopOnLastSlide: false, //當切換到最後一個slide時中止自動切換 stopOnLastSlide: true, //若是設置爲true,當切換到最後一個slide時中止自動切換。 disableOnInteraction: true, //用戶操做swiper以後,是否禁止autoplay。 reverseDirection: true, //開啓反向自動輪播。 waitForTransition: true, //等待過渡完畢。自動切換會在slide過渡完畢後纔開始計時。 },
fade:java
fadeEffect: {
crossFade: false, }
cube:node
cubeEffect: {
slideShadows: true, //開啓slide陰影。默認 true。 shadow: true, //開啓投影。默認 true。 shadowOffset: 100, //投影距離。默認 20,單位px。 shadowScale: 0.6 //投影縮放比例。默認0.94。 },
coverflow:npm
coverflowEffect: {
rotate: 30, //slide作3d旋轉時Y軸的旋轉角度。默認50。 stretch: 10, //每一個slide之間的拉伸值,越大slide靠得越緊。 默認0。 depth: 60, //slide的位置深度。值越大z軸距離越遠,看起來越小。 默認100。 modifier: 2, //depth和rotate和stretch的倍率,至關於depth*modifier、rotate*modifier、stretch*modifier,值越大這三個參數的效果越明顯。默認1。 slideShadows : true //開啓slide陰影。默認 true。 },
flip:json
flipEffect: {
slideShadows : true, //slides的陰影。默認true。 limitRotation : true, //限制最大旋轉角度爲180度,默認true。 }
zoom:segmentfault
zoom: {
maxRatio: 5, //最大倍數 minRatio: 2, //最小倍數 toggle: false, //不容許雙擊縮放,只容許手機端觸摸縮放。 containerClass: 'my-zoom-container', //zoom container 類名 },
navigation:api
navigation: {
nextEl: '.swiper-button-next', //前進按鈕的css選擇器或HTML元素。 prevEl: '.swiper-button-prev', //後退按鈕的css選擇器或HTML元素。 hideOnClick: true, //點擊slide時顯示/隱藏按鈕 disabledClass: 'my-button-disabled', //前進後退按鈕不可用時的類名。 hiddenClass: 'my-button-hidden', //按鈕隱藏時的Class },
pagination: {
el: '.swiper-pagination', type: 'bullets', //type: 'fraction', //type : 'progressbar', //type : 'custom', progressbarOpposite: true, //使進度條分頁器與Swiper的direction參數相反 bulletElement : 'li', //設定分頁器指示器(小點)的HTML標籤。 dynamicBullets: true, //動態分頁器,當你的slide不少時,開啓後,分頁器小點的數量會部分隱藏。 dynamicMainBullets: 2, //動態分頁器的主指示點的數量 hideOnClick: true, //默認分頁器會一直顯示。這個選項設置爲true時點擊Swiper會隱藏/顯示分頁器。 clickable: true, //此參數設置爲true時,點擊分頁器的指示點分頁器會控制Swiper切換。 },
scrollbar: {
el: '.swiper-scrollbar', hide: true, //滾動條是否自動隱藏。默認:false,不會自動隱藏。 draggable: true, //該參數設置爲true時容許拖動滾動條。 snapOnRelease: true, //若是設置爲false,釋放滾動條時slide不會自動貼合。 dragSize: 30, //設置滾動條指示的尺寸。默認'auto': 自動,或者設置num(px)。 },