# [swiper 4 ( ver 3.1.3 )](https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3) 套用注意事項

swiper.js 是一個可以讓你輕易製作出可以利用滑動的方式來控制 carousel 圖片的套件,

該套件感覺當初在製作時，並沒有考慮到太多命名上的統一性，對剛接觸的人還蠻不友善的，

（光套件名稱從舊版的　vue-awesome-swipe　變成　swiper　就不一樣了）,所以稍微紀錄一下使用過程

<small style="color:red;">最新的版本僅支援 Vue3 , 故使用 Vue 2 的必須降版來套用</small>

## 套件的安裝

1. 載入套件

    npm install vue-awesome-swiper --save

2. 導入套件

全域註冊

    在 main.js 裡加入下列兩行
    
    import 'swiper/swiper-bundle.css';
    
    Vue.use(VueAwesomeSwiper);
    

局部註冊

    在 要使用的頁面上加入下列 code
    
    // require styles
    
    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    
    export default {
            components: {
                        swiper,
                        swiperSlide
                    }
                }
    

<br/>

成功導入後就可以[來這邊](https://github.surmon.me/vue-awesome-swiper/)挑自己要的樣式

## 套件的選用

當前用過有最大問題的就是 [Thumbs gallery with Two-way control](https://github.com/surmon-china/surmon-china.github.io/blob/source/projects/vue-awesome-swiper/examples/30-thumbs-gallery.vue) 這個套件

這個套件正常來說可以利用下方的 Thumbs 來控制上方的大圖,

如果直接照 github 文件裡寫的套用,會一直出現

**<h1 style="color:red; font-size: 15px;">Error in nextTick: "TypeError: Cannot read property 'controller' of undefined"</h1>**

控制的部分則無法正確的作用,如要正確運行,必須把原文件當中

 mounted() {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.$swiper
        const swiperThumbs = this.$refs.swiperThumbs.$swiper
        swiperTop.controller.control = swiperThumbs
        swiperThumbs.controller.control = swiperTop
      })
    }

改為

 mounted() {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.swiper
        const swiperThumbs = this.$refs.swiperThumbs.swiper
        swiperTop.controller.control = swiperThumbs
        swiperThumbs.controller.control = swiperTop
      })
    }

將 swiper 前方的 $ 移除便可正常運行