Use of vue2 project

Use

Official website API (deployed in swiper instance): /api/

Official website carousel picture (see source code): /demo/

Next, how to use it in vue2 (vue2 uses swiper5 version)

1. Install and introduce css

npm i swiper@5

// 

// Introduceimport "swiper/css/";

2. Use in components: Introduce js and introduce html structure

import Swiper from 'swiper'

html structure:

1. First place a picture to occupy a position to determine the layout, and then replace the picture with the following structure

2. Pay attention to the outermost layerclass="swiper-container"must! And the subsequent swiper instance needs to be changed!

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(img,index) in bannerList" :key="index">
            <img :src="" />
        </div>
    </div>

    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>

3. The final key is to create a swiper instance! There are two ways

Method 1:

If the image is already fixed (or the image url array has been determined)Create directly in mounted function

mounted() {
    // Below is the normal swiper template    new Swiper(".swiper-container", {
        loop: true,
        mousewheel: true,
        keyboard: true,

        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },

        pagination: {
            el: ".swiper-pagination",
        },                    
    });
}

Method 2:

Use v-for to traverse the image url array (And the array is obtained by sending a request in this component), then you need to use watch + $nextTick

5.11.1 watch+$nextTick

When a data changes, the DOM has not been updated yet, so writing a $nextTick in the handle function in the monitoring attribute can be implemented.Execute code after the data changes and the DOM is updated

Back to swiper, we create a swiper instance at this time

bannerList: Image url array

watch: {
    bannerList: {
        handler() {
            this.$nextTick(function() {
                new Swiper(".swiper-container", {
                    loop: true,
                    mousewheel: true,
                    keyboard: true,

                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },

                    pagination: {
                        el: ".swiper-pagination",
                    },                    
                });
            })
        }
    }
},

5.11.2 Modify the pager style

1. Add properties

pagination: {
    el: ".swiper-pagination",
    clickable: true,
    bulletClass : 'my-bullet', // this    bulletActiveClass: 'my-bullet-active',
},

2. Write css in the component (do not add scope)

// Paging style.my-bullet{
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: black;
    opacity: 0.5;
    margin: 0 4px;
}

// The selected pager style (will inherit the above style).my-bullet-active {
    background: #ff6600;
    opacity: 1;
}

5.11.3 Package Carousel Diagram Component

When an image needs to be changed to a carousel image, we can just replace the img tag with the Carousel component!

1. The Carousel component requires a parameter: picture url array

imgList = [
    {imgUrl: '...'}
    {imgUrl: '...'}
]

2. Register the Carousel component as a global component

// Create a new Carousel folder in components
// 
import Carousel from '@/components/Carousel'
(,Carousel)

3. Carousel/ (just copy directly, the style can be modified by yourself)

&lt;template&gt;
    &lt;div class="swiper-container"&gt;
        &lt;div class="swiper-wrapper"&gt;
            &lt;div class="swiper-slide" v-for="(img,index) in imgList" :key="index"&gt;
                &lt;img :src="" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
        &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
        &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
    import Swiper from 'swiper'

    export default {
        name: 'Carousel',

        props: ['imgList'],

        watch: {
            imgList: {
                immediate: true,
                handler() {
                    this.$nextTick(function() {
                        new Swiper(".swiper-container", {
                            loop: true,

                            pagination: {
                                el: ".swiper-pagination",
                                clickable: true,
                                bulletClass : 'my-bullet',
                                bulletActiveClass: 'my-bullet-active',

                            },
                            
                            navigation: {
                                nextEl: ".swiper-button-next",
                                prevEl: ".swiper-button-prev",
                            },
                        });
                    })
                }
            }
        }
    }
&lt;/script&gt;

&lt;style lang="less"&gt;
    // Paging style    .my-bullet{
        position: relative;
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background: black;
        opacity: 0.5;
        margin: 0 4px;
    }

    // The selected pager style (will inherit the above style)    .my-bullet-active {
        background: #ff6600;
        opacity: 1;
    }
&lt;/style&gt;

4. Use it in the component (just pass in the image url array)

<Carousel :imgList="bannerList" />

5.11.4 swiper attributes

1、 <div class="swiper-container">: Big box for carousel pictures

2、<div class="swiper-slide">: For the box that contains pictures, you can specify the size, so the picture can be adapted directly. Or if you do not specify the size, you need to specify the image size.

3、slidesPerView: Set the carousel picture big box to display the carousel picture number, the carousel picture will be modified to adapt the width of the carousel picture big box

4、slidesPerGroup: Each time the carousel picture number

5. Give<div class="swiper-slide">Add class nameswiper-no-swiping: Sliding is not allowed

The above is the detailed content of the use of vue2 project. For more information about the use of vue2 project, please follow my other related articles!