Vue-awesome-swiper: 在pc端nuxt框架下，在一个页面下同时用多个swiper，初始化的点会出问题，具体表现如下

Created on 24 Nov 2017 · 17Comments · Source: surmon-china/vue-awesome-swiper

轮播图的导航icon数量显示不对，active也没有

具体使用和配置如下
```build :{
vendor: ['vue-awesome-swiper']
},
plugins: [{src: '~plugins/vue-awesome-swiper.js', ssr: false}],
css: ['swiper/dist/css/swiper.css']

Slide {{slide}}

          </div>
          <div class="swiper-pagination swiper-pagination-bullets"></div>
        </div>

export default {
data () {
return {
swiperOption: {
pagination: '.swiper-pagination',
slidesPerView: 5,
centeredSlides: true,
paginationClickable: true,
spaceBetween: 18
},
swiperSlides: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
}
}
```

最后，请原谅我用了中文介绍我所遇到的问题，因为我英文确实比较差，请见谅！对了这个页面我有用三个demo

Source

wLove-c

Most helpful comment

据我所知，coverflow 这个 API 已经更新为 http://idangero.us/swiper/api/#coverflow-effect
，所以？？？...

surmon-china on 1 Dec 2017

👍2

All 17 comments

你虽然循环出了多个实例，但是实际给每个实例绑定的名字却都是一样的，所以你需要指定实例名称，参考此问题

110

surmon-china on 24 Nov 2017

👎1 👍1

这个是3d循环的

平铺的

换上新的写法，还是发现了有个问题就是我3d循环的

swiperOption: {
          pagination: '.swiper-pagination',
          effect: 'coverflow',
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          loop: true,
          coverflow: {
            rotate: 25,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: true
          }
        }

pagination 没有去掉但在html里面注释了，还是会影响到平铺的点点，只有把这个key去掉之后，才相互不影响了，而且这个点点的className好像不可以改哈

请问一下作者，vue-awesome-swiper可以支持到ie哪个版本...

在IE浏览器表现如下

wLove-c on 27 Nov 2017

pagination 作为参数传入时，可以指定不同的名字，本身的 class name 更多作用样式来使用

surmon-china on 29 Nov 2017

另外，可以升级到 v3.0.0 以上了。

surmon-china on 30 Nov 2017

@surmon-china

'vue+ssr报错'

作者您好，是这样的我之前使用nuxt后发现 nuxt不能兼容IE 后面改回使用vue+ssr ,现在在vue的基础上使用了 swiper 出现了这个问题，当我把

<swiper>
    <swiper-slide></swiper-slide>
</swiper>

注释掉后就没问题了，有人提出过这个问题吗有什么好的解决方案吗麻烦了

wLove-c on 1 Dec 2017

SSR 下不可使用组件！

surmon-china on 1 Dec 2017

@surmon-china 但我现在使用组件也没问题喔莫非只能和nuxt那样使用吗，但我引入时应该如何配置或者说引入

wLove-c on 1 Dec 2017

你看过文档吗，SSR 中组件只能支持不依赖 window 对象的，所有依赖 window 的元素只能以 directive 处理，所以 SSR 就是为 SSR 提供的，组件是为 SPA 提供的！

surmon-china on 1 Dec 2017

👍1

如果还有更多问题，看文档，官方文档！

surmon-china on 1 Dec 2017

@surmon-china 有看的只是当我用文档 ssr的方式引入时，在我的组件修改参数swiperOption{}则不会起到作用，其他和nuxt的方式一样的，没有任何报错和警告

wLove-c on 1 Dec 2017

具体如下
in entry-client.js

import 'swiper/dist/css/swiper.css'
if (process.browser) {
    const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
    Vue.use(VueAwesomeSwiper)
}

in component

<div v-swiper="swiperOption" :instanceName="'inforSlide'" id="homeSlide">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="banner in banners">
                <img :src="banner">
            </div>
        </div>
     <div class="swiper-pagination swiper-pagination-bullets"></div>
</div>
export default {
        data () {
            return {
                banners: ['/', '/', '/'],
                swiperOption: {
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    grabCursor: true,
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    // Enable debugger
                    debugger: true,
                    loop: true
                }
            }
        }
     }

in ssr

in nuxt

两个的业务代码是一摸一样的在nuxt里面用的是plugins方式导入在ssr是在entry-client.js引入

当然我想说要的不是指这个问题而是我的配置并不是都没有效果，是部分失效如：

 data () {
      return {
        banners: ['/', '/', '/'],
        swiperOption: {
          effect: 'coverflow',
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          loop: true,
          coverflow: {    //整个对象 失效
            rotate: 25,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: true
          }
        }
      }
    }