current position:Home>Swiper, the application of swiper in Vue, and various versions of swiper are applied in Vue projects

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

2022-04-29 07:37:08imkaifan

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>

 Insert picture description here

copyright notice
author[imkaifan],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290528481053.html

Random recommended