Use the swiper component to achieve carousel advertising effects

This time I will bring you how to use the swiper component to achieve the carousel advertising effect, and what are the precautions for using the swiper component to achieve the carousel advertising effect. The following is the actual combat Let’s take a look at the case.

1, Installationswiper

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, please come for more exciting information Pay attention to other related articles on php Chinese website!

Recommended reading:

The difference between @HostBinding() and @HostListener() in AngularJS
axios sends post request springMVC cannot accept parameters how to handle

The above is the detailed content of Use the swiper component to achieve carousel advertising effects. For more information, please follow other related articles on the PHP Chinese website!