Swiper, the application of swiper in Vue, and various versions of swiper are applied in Vue projects

background

direct npm install swiper I found it swiper8 edition According to the official website tutorial in vue2 Play without turning , So I chose to downgrade , By the way swiper Have a look , I haven't used it for a long time .

About swiper

At present swiper It's already here 8 edition .
6 Version and above , It has supported the use directly in the front-end framework .
6 The following versions , It is not supported to use directly in the front-end framework .
in other words , 6 The following versions , No, swiper-vue.js

swiper7、8 Can't be in vue2 Use in ：
as a result of , stay swiper Source code , Introduced 8 individual vue Methods are vue3 The method in , stay vue2 Does not exist in the .
If in vue2 Use in swiper7、8 Will report a mistake .

stay vue3 Introduction in swiper7、8 There will be errors in the path
The official website code is as follows ：（ To introduce , Relevant modules will not be found ）

  // Import Swiper Vue.js components
  import {
     Swiper, SwiperSlide } from 'swiper/vue';
  // Import Swiper styles
  import 'swiper/css';

The right way to introduce

  // Import Swiper Vue.js components
  import {
     Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';
  // Import Swiper styles
  import 'swiper/swiper.min.css';

The project time is urgent , And it's vue2 Project , So I chose 6 Before the release , The most stable 5.4.5

Load after the page is loaded swiper

<script>
import Swiper from 'swiper'; //  Notice the introduction of Swiper
import 'swiper/css/swiper.min.css' //  Note the introduction here 
export default {
    
    name: 'CarouselShow',
    mounted() {
    
        new Swiper('.swiper-container', {
    
            autoplay: true,
            loop: true,
        })
    }
}
</script>

Use steps

1、npm install [email protected]
2、 introduce
3、swiper Of api Configuration item

<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide1">Slide 1</div>
            <div class="swiper-slide swiper-slide2">Slide 2</div>
            <div class="swiper-slide swiper-slide3">Slide 3</div>
        </div>
        <!--  If you need a pager  -->
        <div class="swiper-pagination"></div>  
        <!--  If you need a navigation button  -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from 'swiper'; //  Notice the introduction of Swiper
import 'swiper/css/swiper.min.css' //  Note the introduction here 

export default {
    
    name: 'HelloWorld',
    data() {
    
    return {
    
         // swiper example   There are various methods on examples 
         swiperInstance: null
      }
    }
    mounted() {
    
		var swiperInstance = new Swiper('.swiper-container', {
    
			// config...
		})
	}
}
</script>
<style scoped>
</style>