vue项目中使用swiper插件，特殊样式

最新推荐文章于 2024-05-24 17:24:45 发布

weixin_42255542

最新推荐文章于 2024-05-24 17:24:45 发布

阅读量356

点赞数 1

分类专栏： vue element-ui 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42255542/article/details/121331010

版权

vue 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

element-ui

11 篇文章 1 订阅

订阅专栏

本文介绍了如何使用VueAwesomeSwiper组件来创建一个轮播图，包括设置滑动参数、自定义分页器和箭头按钮，以及通过JavaScript动态调整滑动前后元素的样式，实现轮播图左右两侧元素置灰并保持间距的视觉效果。

摘要由CSDN通过智能技术生成

轮播图左右两边置灰，且与两侧箭头有间距
在这里插入图片描述

1 .安装插件，版本如下

在这里插入图片描述

2. main.js 中引入，安装

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper);

3. 使用

		<div class="swiper-wrap">
            <swiper
                id="mySwiperExpert"
                ref="mySwiperExpert"
                :options="swiperOption"
                @transitionStart="transitionStart"
                @transitionEnd="transitionEnd"
            >
                <swiper-slide v-for="(item, index) in expertsList" :key="index" :class="['swiper-slide', {'right-mask': index === rightIndex}]">
                    <div class="banner-img__wrapper">
                        <img :src="item.imgUrl" alt="">
                        <span class="expert-name">{{ item.expertName }}</span>
                        <span class="job">{{ item.filed }}</span>
                        <span class="job">{{ item.job }}</span>
                    </div>
                </swiper-slide>
                <div slot="pagination" class="swiper-pagination"/>
                <div slot="button-prev" class="swiper-button-prev"/>
                <div slot="button-next" class="swiper-button-next"/>
            </swiper>
        </div>


data中

				swiperOption: {
                    slidesPerView: 5,
                    spaceBetween: 20,
                    slidesPerGroup: 5, // 每组5个
                    loop: false,
                    observer: true,
                    observeParents: true,
                    initialSlide: 1,
                    // autoplay: {
                    //     delay: 8000,
                    //     stopOnLastSlide: false,
                    //     disableOnInteraction: false // 鼠标拖动后继续自动轮播
                    // },
                    autoplayDisableOnInteraction: false,
                    // 显示分页
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true // 允许分页点击跳转
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                        clickable: true // 允许分页点击跳转
                    }
                },
                rightIndex: 6



methods中
			myRightSlide(activeIndex) {
                console.log('activeIndex', activeIndex);
                const left = document.getElementById('mySwiperExpert').getElementsByClassName('swiper-slide-prev')[0];
                const leftPrev = document.getElementById('mySwiperExpert').getElementsByClassName('swiper-slide')[parseInt(activeIndex) - 2];
                const activeSlide = document.getElementById('mySwiperExpert').getElementsByClassName('swiper-slide-active')[0];
                const right = document.getElementById('mySwiperExpert').getElementsByClassName('swiper-slide')[parseInt(activeIndex) + 5];
                const rightPrev = document.getElementById('mySwiperExpert').getElementsByClassName('swiper-slide')[parseInt(activeIndex) + 4];

                if (left) {
                    left.style.setProperty('margin-left', '-50px', 'important');
                    left.style.setProperty('margin-right', '70px', 'important');
                    left.style.setProperty('opacity', '0.5');
                }
                if (leftPrev) {
                    leftPrev.style.opacity = '0';
                }
                if (rightPrev) {
                    rightPrev.style.setProperty('margin-left', '0', 'important');
                    rightPrev.style.setProperty('margin-right', '20px', 'important');
                }
                if (right) {
                    right.style.setProperty('margin-left', '50px', 'important');
                    right.style.setProperty('opacity', '0.5');
                }

                activeSlide.style.setProperty('margin-left', '0', 'important');
                activeSlide.style.setProperty('margin-right', '20px', 'important');
                activeSlide.style.opacity = '1';

                for (let i = 1; i <= 4; i++) {
                    const el = document.getElementById('mySwiperExpert').getElementsByClassName('swiper-slide')[parseInt(activeIndex) + i];
                    if (el) {
                        el.style.opacity = '1';
                        el.style.setProperty('margin-left', '0', 'important');
                        el.style.setProperty('margin-right', '20px', 'important');
                    }
                }
            },
            transitionStart() {
                const activeIndex = this.$refs.mySwiperExpert.swiper.activeIndex;
                this.myRightSlide(activeIndex);
            },
            transitionEnd(val) {
                const activeIndex = this.$refs.mySwiperExpert.swiper.activeIndex;
                this.myRightSlide(activeIndex);
            }



scss中
// 左侧置灰
    /deep/ .swiper-slide-prev{
        margin-right: 70px !important;
        margin-left: -50px !important;
        opacity: 0.5;
    }
    // 右侧置灰
    /deep/ .swiper-slide-active{
            // margin-left: 22px;
            opacity: 1;
            & + .swiper-slide {
                opacity: 1;
                & + .swiper-slide {
                    opacity: 1;
                    & + .swiper-slide {
                        opacity: 1;
                        & + .swiper-slide {
                            opacity: 1;
                        }
                    }
                }
            }
    }