swiper 轮播图在vue中使用

  <template> 
   <div class="banner">
        <swiper ref="mySwiper" :options="swiperBanner" style="height:440px;">
          <swiper-slide
            :key="index"
            v-for="(item, index) in bannerList"
            style="height:440px;"
          >
          <!-- <router-link to="/"> -->
            <img
              :src="item.src"
              alt=""
              width="100%"
              height="100%"
              style="object-fit: cover;"
            />
            <!-- </router-link> -->
          </swiper-slide>
        </swiper>
        <div class="swiper-button-prev-filter" @click="next()">
          <i class="el-icon-d-arrow-left" />
        </div>
</template>


 data() {
    return {

      swiperBanner: {
        loop: true,  
        slidesPerView: 4, //显示个数
        observer: true,
        observeParents: true,
      },

}


样式:
.swiper-button-next {
  width: 24px;
  height: 100%;
  top: 0;
  right: 0;
}
.swiper-button-prev-filter {
  position: absolute;
  width: 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  top: 0px;
  right: 0;
  z-index: 2;
  cursor: pointer;
}

 mounted() {
      new Swiper ('.swiper-container', {
        loop: true,
        // 如果需要分页器
        pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // 如果需要滚动条
        // scrollbar: '.swiper-scrollbar',
        //如果需要自动切换海报
        // autoplay: {
        //   delay: 1000,//时间 毫秒
        //   disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
        // },
      })
    }
  }

首先要安装:

npm install swiper vue-awesome-swiper --save

swiper

非常有名的一款 实现滚动切换效果的第三方:

• 小程序: swiper 就是参考的 swiper 制作
• ionic: ion-slides 也是基于 swiper 制作

官网: https://www.swiper.com.cn/

vue2版本 swiper用法: https://github.com/surmon-china/vue-awesome-swiper

安装命令

npm install [email protected] vue-awesome-swiper --save

官方提供的 demo: https://github.surmon.me/vue-awesome-swiper/

main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)