Implement carousel using swiper component in vue2.0 (detailed tutorial)

Below I will share with you an example code of vue2.0 using the swiper component to implement carousel. It has a good reference value and I hope it will be helpful to everyone.

1. Install swiper

npm install swiper@3.4.1 --save-dev

2. Reference components

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

3. HTML page code

 <p class="swiper-container" id="swiper">
  <p class="swiper-wrapper">
   <p class="swiper-slide" v-for="(item,$index) in detail.imgs">
   <a v-on:click="showPreview($index,detail.imgs,swiperObj)">
    <figure class="wp-avatar banner">
    <img v-cloak :src="item | toQiNiuImg"/>
    </figure>
   </a>
   </p>
  </p>
  <!-- Add Pagination -->
  <p class="swiper-pagination"></p>
  </p>

4. Initialize the component and set the parameters

 setTimeout(function () {
  state.swiperObj = new Swiper('#swiper', {
  loop: true,
  pagination: '.swiper-pagination',
  autoplay: 2000,
  paginationClickable: true
  });
 }, 100)

5. Done, ok

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Introduction to the vuex project structure directory and some simple configurations

JS method to find the largest element in a Number type array

vue2.0 Detailed explanation of the difference between assets and static resource files

The above is the detailed content of Implement carousel using swiper component in vue2.0 (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!