vue2.0 uses swiper to implement carousel ads

This time I will bring you vue2.0 to use swiper to implement carousel ads. What are the precautions for vue2.0 to use swiper to implement carousel ads. The following is a practical case, let’s take a look.

1. Install swiper

npm install swiper@3.4.1 --save-dev

2. ReferenceComponent

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online!

Recommended reading:

Web-side application implements back force refresh

Detailed graphic and text explanation of Vue.directive()

The above is the detailed content of vue2.0 uses swiper to implement carousel ads. For more information, please follow other related articles on the PHP Chinese website!