This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

1. Run the NPM command to install swiper

npm install swiper --save-dev
Copy the code

2. Introduce Swiper to the components that require swiper

import Swiper from "swiper"
Copy the code

3. Add swiper CSS to component style (find swiper CSS file in node_modules)

@import ".. /.. /.. /node_modules/swiper/swiper-bundle.css";Copy the code

4. Initialize swiper in the methods.

Multiple Swipers can be referenced on a page, and each container can be differentiated by ID or Class. Keep the default Class name swiper-Container.

Simplest configuration

<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div Class ="swiper-slide">slider2</div> class="swiper-slide">slider3</div> </div> Methods: {var mySwiper = new Swiper('.swiper-container', {autoplay: true,// optional, automatic Swiper})}}Copy the code

You can go to the Swiper website and look up the Api to find the properties that you control and how to use them. Just practice a lot.

Below is the configuration and HTML I need to write out the sliding item on the PC side

<div class="swiper-container sales" data-swiper-container="2">
    <div class="swiper-wrapper sales">
        <div v-for="(item,index) in HomeInfo.goods[2]" :key="index" class="swiper-slide">
            <div class="plr-15">
                <img :src="SiteInfo.cdnBase + item.mainImage" alt="">
                <div class="pt-14 pb-10 sales">
                    <div class="font-size-15 plr-10 word-ellipsis text-center">{{ item.siteName }}</div>
                    <div class="plr-10 mt-5 text-center">
                        <span class="font-size-15 ">{{ item.money }}</span>
                        <span class="font-size-15">{{ item.price }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-button-prev">
        <Icon name="arrow-left" class="font-size-18" color="#a4a4a4" />
    </div>
    <div class="swiper-button-next">
        <Icon name="arrow" class="font-size-18" color="#a4a4a4" />
    </div>
</div>
Copy the code
/ / swiper configuration initSwiper () {const that = this const width = document. The body. The clientWidth const list = document.querySelectorAll('.swiper-slide') const numberA = list[0].clientWidth / 4 const numberB = list[0].clientWidth /  8 // eslint-disable-next-line no-unused-vars const mySwiper = new Swiper('.swiper-container', { loop: SlidesOffsetBefore: width <= 720? -numberA : (width > 720 && width <= 968) ? 0 : -numberB * 3, slidesPerView: width <= 720 ? 2 : (width > 720 && width <= 968) ? 3 : 4, centeredSlides: true, centeredSlidesBounds: true, navigation: { nextEl: '.swiper-button-next', prevEl: '. Swiper-button-prev '}, on: {click: function (swiper, event) {// If (swiper, event) swiper.clickedSlide) { if (event.srcElement.classList[2] === 'van-icon-arrow') { this.slideNext() return false } else { This.slideprev () return false}} if (swiper.el.attributes[1].nodevalue - 0 === 0) { that.detail(0, swiper.clickedSlide.attributes[2].nodeValue - 0) } else if (swiper.el.attributes[1].nodeValue - 0 === 1) { that.detail(1, swiper.clickedSlide.attributes[2].nodeValue - 0) } else { that.detail(2, swiper.clickedSlide.attributes[2].nodeValue - 0) } } } }) },Copy the code