Vue.js輪播庫熱門精選

要建立一個輪播圖，咱們必須動態地建立顯示圖片，並添加導航按鈕來在它們之間導航，咱們可能還須要自動播放功能。

這些都須要時間來構建，並且極有可能咱們能夠更好地利用這些時間作其餘事情。在這篇文章中，咱們將看看Vue.js的一些輪播圖庫，讓咱們的生活變得更輕鬆，並讓咱們拿回一些寶貴的時間。

vue-easy-slider

vue-easy-slider 是一個簡單的Vue滑塊組件，可與鼠標和觸摸屏一塊兒使用。它是可自定義的，並帶有動畫效果。

要使用它，咱們經過運行如下命令進行安裝：

npm i -S vue-easy-slider
複製代碼

而後咱們能夠經過編寫如下代碼來使用它：

//main.js

import Vue from "vue";
import App from "./App.vue";
import EasySlider from "vue-easy-slider";

Vue.use(EasySlider);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");
複製代碼

//App.vue

<template>
  <div id="app">
    <slider animation="fade">
      <slider-item v-for="(i, index) in list" :key="index">
        <img :src="i">
      </slider-item>
    </slider>
  </div>
</template>

<script> export default { name: "App", data() { return { index: 0, list: Array(5) .fill() .map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`) }; } }; </script>
複製代碼

咱們使用 slider 組件來添加輪播，animation 屬性設置動畫效果。顧名思義，slider-item 存放的是輪播項目。

咱們還能夠更改樣式。例如，咱們能夠經過編寫如下內容來更改寬度和高度：

<template>
  <div id="app">
    <slider animation="fade" width="400px" height="250px">
      <slider-item v-for="(i, index) in list" :key="index">
        <img :src="i">
      </slider-item>
    </slider>
  </div>
</template>

<script> export default { name: "App", data() { return { index: 0, list: Array(5) .fill() .map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`) }; } }; </script>
複製代碼

咱們還能夠啓用或禁用觸摸控制並更改幻燈片切換的速度。它還會發出一些事件，例如 change，在切換幻燈片時會觸發。當顯示下一張或上一張幻燈片時觸發。

它還具備用於放置佔位符的插槽，以便在加載幻燈片時顯示某些內容。

vue-awesome-swiper

vue-awesome-swiper是Vue應用程序的另外一個易於使用的輪播組件。它基於Swiper，所以咱們必須將其與軟件包一塊兒安裝：

npm install swiper vue-awesome-swiper --save
複製代碼

而後咱們能夠經過編寫如下代碼來使用它：

//app.js

import Vue from "vue";
import App from "./App.vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css";

Vue.use(VueAwesomeSwiper);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");
複製代碼

//App.vue

<template>
  <div id="app">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(i, index) in list" :key="index">
        <img :src="i">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script> export default { data() { return { list: Array(5) .fill() .map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`), swiperOptions: { pagination: { el: ".swiper-pagination" } } }; } }; </script>
複製代碼

在這裏，咱們使用帶有某些選項的 swiper 組件。 swiper-slide 組件可容納幻燈片，所以咱們將圖像放入其中。咱們還將swiperOptions 傳遞給 options 屬性。

咱們使用 pagination 槽填充內容，併爲分頁設置一個類，以即可以對其進行樣式設置。

咱們也能夠經過編程方式轉到幻燈片。這就是爲何咱們將 ref 分配給滑塊的緣由之一——移至所需的幻燈片。例如，咱們能夠這樣寫：

//App.js

<template>
  <div id="app">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(i, index) in list" :key="index">
        <img :src="i">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script> export default { data() { return { list: Array(5) .fill() .map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`), swiperOptions: { pagination: { el: ".swiper-pagination" } } }; }, computed: { swiper() { return this.$refs.mySwiper.$swiper; } }, mounted() { this.swiper.slideTo(2, 1000, false); } }; </script>
複製代碼

咱們使用分配給滑塊的mySwiper ref建立了一個計算屬性，而後調用 slideTo 方法來改變爲具備給定索引的幻燈片。索引在第一個參數中，第二個參數是延遲，第三個參數指示咱們是否要運行回調。若是將其設置爲 true，它將在切換期間發出事件。

像vue-easy-slider同樣，該輪播庫也具備動畫效果。

Slick for Vue.js

Slick for Vue.js庫爲咱們提供了另外一個滑塊。 jQuery是一個依賴項，所以咱們也必須安裝它。要安裝依賴項，請運行：

npm install jquery vue-slick --save
複製代碼

接下來，咱們能夠經過編寫如下代碼來使用它：

//main.js

import Vue from "vue";
import App from "./App.vue";
import "slick-carousel/slick/slick.css";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");
//App.vue
複製代碼

//App.vue

<template>
  <slick ref="slick" :options="slickOptions">
    <div v-for="(i, index) in list" :key="index">
      <img :src="i">
    </div>
  </slick>
</template>

<script> import Slick from "vue-slick"; export default { components: { Slick }, data() { return { slickOptions: { slidesToShow: 1 }, list: Array(5) .fill() .map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`) }; }, methods: {} }; </script>
複製代碼

咱們在 main.js 中註冊插件並導入CSS，而後使用 slick 組件來建立咱們的輪播圖。咱們傳入咱們的 slickOptions 對象，並將slidesToShow 屬性設置爲 1 ，只顯示一張幻燈片。幻燈片是經過使用 v-for 來渲染圖片來建立的。

它發出許多事件：

• 咱們能夠監聽 afterChange 事件，該事件在幻燈片切換後發出
• 在幻燈片切換以前發出 beforeChange
• 卸載滑塊時會發出 destroy
• 執行滑動動做時會觸發 swipe
• 還有不少

咱們也能夠調用 this.$refs.slick.reSlick(); 來更新咱們的幻燈片，若是咱們改變了圖片列表，就使用最新的圖片。

vue-flickity

接下來是vue-flickity，它爲咱們提供了許多自定義選項。要安裝它，咱們能夠運行：

npm install vue-flickity --save
複製代碼

讓咱們來看看如何使用它：

//App.vue

<template>
  <div>
    <flickity ref="flickity" :options="flickityOptions">
     <div class="carousel-cell" v-for="(i, index) in list" :key="index">
      <img :src="i">
    </div>
    </flickity>

    <button @click="previous()">Previous</button>
    <button @click="next()">Next</button>
  </div>
</template>

<script> import Flickity from "vue-flickity"; export default { components: { Flickity}, data() { return { flickityOptions: { initialIndex: 3, prevNextButtons: false, pageDots: false, wrapAround: true }, list: Array(5) .fill() .map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`) }; }, methods: { next() { this.$refs.flickity.next(); }, previous() { this.$refs.flickity.previous(); } } }; </script>
複製代碼

咱們使用 flickity 組件添加滑塊，而且能夠經過 options 屬性對其進行自定義。咱們使用它經過 initialIndex 屬性設置初始幻燈片。

prevNextButton 可讓咱們顯示或隱藏內置的導航按鈕，咱們能夠選擇是否要用 pageDots 來顯示導航點，wrapAround 表示當咱們到達輪播圖的結束或開始時，分別回到第一張或最後一張幻燈片。

咱們還爲導航添加了一些自定義的按鈕，咱們建立了一個用於導航到上一張幻燈片的按鈕和一個用於導航到下一張幻燈片的按鈕。 ref獲取ref，讓咱們分別調用下一張或上一張方法來移動到下一張或上一張幻燈片。

咱們可使用CSS設置輪播和幻燈片的樣式。它將輪播添加到 carousel-cell 類中，以便咱們對其進行樣式設置。內置的導航按鈕和圓點也有它們的類，這意味着咱們能夠輕鬆地設置樣式。

Vue Carousel 3D

Vue Carousel 3D是一個有趣的滑塊。它以3D幻燈片而不是2D形式顯示幻燈片。當咱們瀏覽幻燈片時，正在顯示的幻燈片是在其餘幻燈片的前面建立的，而且當咱們翻轉幻燈片時，它會顯示旋轉效果。

要安裝它，咱們運行：

npm install -S vue-carousel-3d
複製代碼

要使用它，咱們寫：

//main.js

import Vue from "vue";
import App from "./App.vue";
import Carousel3d from "vue-carousel-3d";

Vue.use(Carousel3d);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");
複製代碼

//App.vue

<template>
  <div>
    <carousel-3d>
      <slide v-for="(i, index) in list" :key="index" :index="index">
        <img :src="i">
      </slide>
    </carousel-3d>
  </div>
</template>

<script> export default { data() { return { list: Array(5) .fill() .map((_, i) => `http://lorempixel.com/400/200/sports/${i}/`) }; } }; </script>
複製代碼

咱們使用 carousel-3d 組件添加輪播，而後使用 slide 組件添加幻燈片。咱們傳入索引，以便正確放置幻燈片。內置3D樣式。

除此以外，它還有一些自定義選項。咱們能夠：

• 使用 autoplay prop啓用或禁用自動播放
• 更改誤差，即當幻燈片數量爲偶數時，誤差更大
• 設置輪播無限循環
• 調整寬度和高度
• 自定義滑動距離並控制寬度和高度

總結

大多數庫都很是類似，而Vue Carousel 3D無疑是最獨特的。其餘都是二維的，具備相似的自定義選項。

它們的性能類似，而且都很容易使用。它們均可以在觸摸屏上使用，而且都具備動畫效果。

Slick for Vue.js會發出不少事件，所以，若是咱們須要在幻燈片更改或相似狀況發生時作一些事情，那咱們就應該選擇該庫。若是咱們但願每頁顯示多張幻燈片，則Slick for Vue.js也頗有用。

---

來源：blog.logrocket.com，做者：John Au-Yeung，翻譯：公衆號《前端全棧開發者》