Vue-Swiper入门使用

效果预览

版本

"swiper": "^3.4.2"

• 更高版本参考官方文档
  https://www.swiper.com.cn/api/start/new.html

核心代码

<template>
  <div class="carousel">
   <div class="swiper-container swiper1">
     <div class="swiper-wrapper">
       <div class="swiper-slide"><h1>1</h1></div>
       <div class="swiper-slide"><h1>2</h1></div>
       <div class="swiper-slide"><h1>3</h1></div>
     </div>
   </div>
   
   <div class="swiper-container-thumbs">
     <div class="swiper-wrapper">
       <div class="swiper-slide"><h1>b1</h1></div>
       <div class="swiper-slide"><h1>b2</h1></div>
       <div class="swiper-slide"><h1>b3</h1></div>
     </div>
   </div>
   
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
	</div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  name: "Carousel",
  data() {
    return {};
  },
  mounted() {
	  // Swiper
	  var thumbSwiper = new Swiper('.swiper-container-thumbs', {
	  		slidesPerView: 3,
	  		watchSlidesProgress: true,
			watchSlidesVisibility: true,/*避免出现bug*/
	  });
	  
	  // Swiper main
	  var bannerSwiper = new Swiper('.swiper1', {
	  	mousewheel: true,
	  	speed: 300,
	  	watchSlidesProgress: true,
		nextButton: ".swiper-button-next",
		prevButton: ".swiper-button-prev",
		thumbs: {
		    swiper: {
				thumbSwiper,
				watchSlidesVisibility: true,/*避免出现bug*/
			},
		  },
	  });
  },
};
</script>


<style lang="less" scoped>
.carousel {
  width: 100%;
}
.swiper-slide {
	width: 100%;
	height: 400px;
	background-color: #00ffff;
}
</style>