Vue introduces the use of the Swiper plugin

This article introduces Vue to introduce the Swiper plugin, share it to everyone, I hope to help

Step 1: Install Vue,

   
Step 2:
Create a Vue item


# Global Installation Vue-CLI $ NPM Install -g Vue-CLI $ CD MY-Project $ NPM Install $ NPM Run Dev
   These is installation Good Vue project, the most important thing is the following steps 
Step 3:

Download the Swiper-related JS and CSS, JS is placed in the Static directory, and the CSS is placed in the assets directory.

Installing Runtime:

Terminal Command: NPM Install Babel-Runtime


Modify .slintrc.js files are as follows:


// http: // Eslint.org/docs/user-guide/configuring module.exports = {root: true, parser: ‘Babel-eslint’, ParserOptions: {sourceType: ‘module’}, env: {Browser: true,}, // https://github.com/feross/standard/blob/master/rules.md#javascript-standard-style extends: ‘Standard’, // Required to Lint * .Vue Files Plugins: [‘html’], // add Your Custom Rules Here ‘Rules’: {// Allow Paren-Less Arrow Functions ‘Arrow-Parens’: 0, // Allow Async-Await ‘Generator-Star-spacing’: 0, // Allow Debugger During development ‘no-debugger’: process.env.node_env === ‘product’? 2: 0}, ‘globals’: {“swipeer”: true} // This place is newly joined global injection }

Step 6:
Add a round broadcast code in its own Vue file

   

  
Import Swiper FROm '../../static/swiper-3.4.2.min.js' let gallerytop let gallethumbs export default {name:' main ', data () {return {lbt: [{' Imgs': '.. /STATIATIC/Product/lbt1.jpg '}, {' Imgs': '../static/product/lbt2.jpg'}, {'Imgs':' ../static/product/lbt3.jpg '}]} }, mounted () {this.lunbo ()}, methods: {lunbo () {gallerytop = new swiper ('. gallery-top ", {nextbutton:' .swiper-button-next ', prevbutton:' .swiper- button-prev ', spaceBetween: 10, grabCursor: true, initialSlide: 1, autoplayDisableOnInteraction: false}) galleryThumbs = new Swiper (' gallery-thumbs', {spaceBetween:. 10, autoplay: 4000, initialSlide: 1, centeredSlides: true Slidesperview: 'auto',touchRatio: 0.2, slideToClickedSlide: true, autoplayDisableOnInteraction: false, grabCursor: true}) galleryTop.params.control = galleryThumbs galleryThumbs.params.control = galleryTop}, stopPlay () {galleryTop.stopAutoplay () galleryThumbs.stopAutoplay ()}, play () {gallerytop.StartAutOPlay () gallethumbs.StartAutOPlay ()}}}
@IMPORT URL ("../ assets / Swiper-3.4.2.min.css "); .gallery-top {height: 32Rem; Width: 100%;} .gallery-thumbs {height: 20%; box-sizing: border-box; padding: 10px 0; Background: RGBA (0, 0, 0, 0.4); Cursor: Pointer;} .gallery-thumbs .swiper-slide {width: 30%; Height: 6Rem; Opacity: 0.3;} .gallery-thumbs .swiper-slIDE-ACTIVE {Opacity: 1;} .swiper-slide {background-size: 100% 160%; -Webkit-Background-Size: 100% 160%;}
There is also a very important issue in the template, the writing should be
V-bind:
   
The above is all the content of this article, I hope to help everyone’s learning, I hope everyone supports Tumi Cloud.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment