Vue uses Swiper to implement the middle large two small booting effect

Vue used in the project, just need to implement a rotation map, highlight the current picture, display other pictures on both sides; through finding various information, realize, so this record

below To see the implementation step:

  • First step: first introduced Swiper’s CSS file in the project index.html – Swiper.min.css
  • Second: Write DOM
  
商品图片
Step 3: Install the Swiper module in the project

NPM INSTALL SWIPER –SAVE-DEV


JS 中文 网 – Front-end Advance Resources Tutorial Www.javascriptc.com A platform dedicated to helping developers use code to change the world-oriented platform, you can find the headlines of the technology world every day

In the fourth step: introduced in the Vue file, and initialize Swiper; introduce Swiper

Import swiper from “swipeer”;


Initialization needs to be placed in a mounted hook

Import swiper from "swiper"; export default {data () {return {}}, mounted () {var MySwiper = new swiper (". swiper-container", {DIRECTION: "Horizontal", LOOP: FALSE, SLIDESPERVIEW: "AUTO", CENTEREDSLIDES: TRUE, SPACEBEEN: 20, OBSERVER: TRUE, OBSERVEPARENTS: TRUE});}}


If you are in your project, the picture is obtained from the background interface, then the above initialization may come out, this time we take additional way to initialize Swiper
   
Import Swiper from “Swiper”; Export Default {data () {return {myswiper: null}}, methods: {getData () {promise.Then (res => {this.pictures = res.images || [ ]; this. $ nexttick (() => {this.initswiper ();});};}, INITWIPER () {this.myswiper = new swipeer (“. swiper-container”, {Direction: “Horizontal” , LOOP: FALSE, SLIDESPERVIEW: “Auto”, Centeredslides: true, spacebetween: 20, OBServer: true, observenents: true});}}}

Put the initialization of Swiper in the NEXTTICK of Vue, then solve the problem
Step 5: What should I do if I want to get the current scrolling?
   
This.MysWiper.ActiveIndex;

Using the ActiveIndex property can get the index of the current picture. Then our function is completed


Summary

The above is the Vue introduced by Xiaobian to use the Swiper to implement the middle two-sided small boot map effect. I hope to help everyone. If you have any questions, please leave a message, the small package will reply to everyone!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment