Was ist vue.swiper?

vue.swiper ist ein derzeit weit verbreitetes js-Plugin für gleitende Touch-Inhalte auf mobilen Webseiten. Es handelt sich um ein gleitendes Spezialeffekt-Plugin, das mit reinem JavaScript erstellt wurde. Es ist auf mobile Endgeräte wie Mobiltelefone und Tablets ausgerichtet. Es kann die Fokuskarte des Touchscreens, die Tab-Umschaltung des Touchscreens und allgemeine Effekte wie die Umschaltung mehrerer Bilder auf dem Touchscreen realisieren.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.9.6, Dell G3-Computer.

【Empfohlene verwandte Artikel: vue.js】

Swiper (Swiper Master) ist derzeit ein weit verbreitetes mobiles Webseiten-Touch-Content-Sliding-Plug-In. Es handelt sich um ein Sliding-Spezialeffekt-Plug-In, das mit reinem JavaScript erstellt wurde. Es richtet sich an Mobiltelefone und Tablets und andere mobile Endgeräte. Es kann gängige Effekte wie Touchscreen-Fokusbild, Touchscreen-Tab-Umschaltung, Touchscreen-Multibildumschaltung usw. realisieren.

Swiper ist die erste Bibliothek eines Drittanbieters, die zum Implementieren von Schiebevorgängen auf Mobil- und PC-Terminals verwendet werden kann. Sie ist sehr praktisch (offizielles Dokument https://www.swiper.com.cn/).

Verwendung von Swiper in Vue Methode:

Führen Sie Swiper zuerst über npm ein

npm i swiper

Fügen Sie 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>

zu der Seite hinzu, auf der Sie Swiper verwenden möchten

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

Einführen

rrreeeVerwandte kostenlose Lernempfehlungen:

js-Video-Tutorial

🎜🎜

Das obige ist der detaillierte Inhalt vonWas ist vue.swiper?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!