Qu'est-ce que vue.swiper

vue.swiper est un plug-in js pour faire glisser du contenu tactile sur des pages Web mobiles qui est actuellement largement utilisé. Il s'agit d'un plug-in d'effets spéciaux coulissants créé avec du JavaScript pur. tablettes et autres terminaux mobiles; il peut réaliser des images de mise au point sur l'écran tactile, des effets tactiles courants tels que la commutation des onglets de l'écran et la commutation multi-images de l'écran tactile.

L'environnement d'exploitation de ce tutoriel : système Windows 7, Vue version 2.9.6, ordinateur Dell G3.

[Articles connexes recommandés : vue.js]

Swiper(Swiper master) est actuellement le contenu tactile de page Web mobile le plus largement utilisé. Le plug-in est un plug-in d'effets spéciaux coulissants créé en JavaScript pur, orienté vers les terminaux mobiles tels que les téléphones mobiles et les tablettes. Il peut réaliser des effets courants tels que des images de mise au point sur écran tactile, le changement d'onglet sur écran tactile et l'écran tactile. commutation multi-images.

Swiper est la première bibliothèque tierce, qui peut être utilisée pour implémenter des opérations coulissantes sur des terminaux mobiles et PC. C'est très pratique (document officiel https://www.swiper.com.cn/) <.>

Comment utiliser swiper dans vue :

Introduisez d'abord swiper via npm

npm i swiper

Ajoutez 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>

à la page où vous souhaitez utiliser swiper dans le script Introduit dans

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
        })
      },
        
    }

Recommandations d'apprentissage gratuites associées :

Tutoriel vidéo js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!