Swiper中文论坛

标题: vue使用swiper谜一样的bug（很简单） [打印本页]

作者: 1018715564 时间: 2018-10-5 22:48
标题: vue使用swiper谜一样的bug（很简单）
简单描述一下问题，就是在做一个很普通的一个画廊效果，图片左右滑动这样子，不知道哪里写错了，请求各位大神指点一二，但是真实效果却是一个div里有多个图片
js没有报错，贴一下效果图

我的vue组件效果是这样子：

我希望的效果应该是这样的：

我的代码
<template>
<div class="box">
   <div class="warpper">
         <swiper>
            <swiper-slide>
                  <img src="http://img1.qunarzz.com/sight/p0/1602/4d/4d8529eb55360f5090.img.jpg_r_800x800_5180d7ba.jpg" class="swiperImg">
            </swiper-slide>
            <swiper-slide>
                  <img src="http://img1.qunarzz.com/sight/p0/1602/4d/4d8529eb55360f5090.img.jpg_r_800x800_5180d7ba.jpg" class="swiperImg">
            </swiper-slide>
         </swiper>
      </div>
</div>
</template>
<script>
export default {
name:'Gllary',
}
</script>

<style lang="stylus" scoped>
      .box
      display flex
      flex-direction column
      justify-content center
      //层级最高
      z-index:99
      background #000
      //定位
      position fixed
      top 0
      left 0
      right 0
      bottom 0
      .warpper
      width 100%
      height 0
      padding-bottom 100%
      .swiperImg
         width 100%
         height 100%

</style>

作者: jade830 时间: 2018-10-9 09:01
我不会用这个组件，但是我会用swiper做你要的效果

作者: x15850735927 时间: 2018-10-10 08:29
你JS都没写，怎么会有动画效果，在mounted(){...........实例化一个Swiper}

作者: qiaoxia 时间: 2018-10-24 15:28
想要想要想要

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)