1. Install Swiper6

npm i swiper6 -D
Copy the code

Most of these are introduction issues, and the swiper6 version is a bit different from its predecessor.

2, the introduction of

Import 'swiper/swiper-bundle. CSS '; Swiper import js from "Swiper /swiper-bundle.min.js"Copy the code

3, use (remember to give swiper-container a width and height)

Vue component <div> <div class="swiper-container" > <div class="swiper-wrapper" style="display: flex;" > <div class="swiper-slide" v-for="(item3, index3) in sceneList" :key="index3"> <img :src="item3._thumburl" alt="" /> <p style="">{{ item3._name }}</p> </div> </div> </div> <! <div class="swiper-button-prev"></div> <div class="swiper-button-next"> _name: 'thumburl 1', _thumburl: 'swiper6'}] // Swiper6 Mounted () {let _self = this new Swiper ('. Swiper-container ', {spaceBetween: 20, slidesPerView: 6, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, on: { click: Log (swiper['clickedIndex']) var index= swiper['clickedIndex']; function(swiper){console.log(swiper['clickedIndex']) var index= swiper['clickedIndex']; _self.activeclass = index _self.imgCheck(", index)}}})} // css. swiper-container {width: 1400px; height: 200px; }Copy the code