What is vue.swiper

vue.swiper is currently a widely used mobile webpage touch content sliding js plug-in. It is a sliding special effects plug-in created purely with JavaScript. It is oriented to mobile terminals such as mobile phones and tablets. It can realize touch screen focus images, touch Common effects such as screen Tab switching and touch screen multi-image switching.

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6, Dell G3 computer.

[Related article recommendations: vue.js]

Swiper (Swiper master) is currently a widely used mobile web page The touch content sliding js plug-in is a sliding special effects plug-in created in pure JavaScript, oriented to mobile terminals such as mobile phones and tablets. It can achieve common effects such as touch screen focus map, touch screen Tab switching, touch screen multi-image switching and other common effects.

swiper is the first third-party library that can be used to implement sliding operations on mobile and PC terminals, which is very convenient (official document https://www.swiper.com.cn/)

How to use swiper in vue:

First introduce swiper through npm

npm i swiper

Add swiper to the page where you want to use swiper

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="http://img5.imgtn.bdimg.com/it/u=3920751897,3443157588&fm=26&gp=0.jpg" alt="">
         <img src="http://img5.imgtn.bdimg.com/it/u=3920751897,3443157588&fm=26&gp=0.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="http://img1.imgtn.bdimg.com/it/u=2320813231,2555689438&fm=26&gp=0.jpg" alt="">
           <img src="http://img1.imgtn.bdimg.com/it/u=2320813231,2555689438&fm=26&gp=0.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="http://img1.imgtn.bdimg.com/it/u=3667678122,3437809409&fm=26&gp=0.jpg" alt="">
            <img src="http://img1.imgtn.bdimg.com/it/u=3667678122,3437809409&fm=26&gp=0.jpg" alt="">
      </div>
    </div>
  </div>

in the script Introduce

import Swiper from 'swiper'
  import '../../../../node_modules/swiper/js/swiper.js'
  import "../../../../node_modules/swiper/css/swiper.css"
    export default {
            mounted(){
          var mySwiper = new Swiper('.swiper-container', { 
         autoplay: {
            delay: 3000,//自动切换时间设置
            stopOnLastSlide: false,//当自动切换到最后一张时是否停止自动切换
            disableOnInteraction: true,//用户触摸时是否停止自动切换
           },
          loop:true
        })
      },
        
    }

Related free learning recommendations: js video tutorial

The above is the detailed content of What is vue.swiper. For more information, please follow other related articles on the PHP Chinese website!