swiper 异型层叠轮播 ？

Question

想实现这样的效果，应该怎么写呢？

现在是这样写的，但是两边的图片并没有被缩小且压在下面？有什么好的方法呢？

<template>
    <div class="swiper-main">
        <swiper
            class="swiper"
            :modules="modules"
            :loop="true"
            :centeredSlides="true"
            :slides-per-view="5"
            :space-between="0"
            :autoplay="false"
            :navigation="navigation"
            :pagination="{ clickable: true }"
            :scrollbar="{ draggable: true }"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
        >
            <!-- :autoplay="{ delay: 3000, disableOnInteraction: false }" -->
            <swiper-slide
                v-for="(item, index) in bannerList"
                :key="index"
                class="swiper-slide"
            >
                <div><img :src="item.pic" alt="" class="swiper-img" /></div>
            </swiper-slide>
            <div class="swiper-button-prev" @click.stop="prevEl(item, index)"></div>
            <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
            <div class="swiper-button-next" @click.stop="nextEl"></div>
            <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </swiper>
    </div>
</template>
<script>
import { defineComponent, ref } from "vue";
// Import Swiper Vue.js components
import banner from "@/assets/image/banner.png";
import banner1 from "@/assets/image/banner1.png";
import banner10 from "@/assets/image/banner10.png";
import banner2 from "@/assets/image/banner2.png";
import banner3 from "@/assets/image/banner3.png";
import banner4 from "@/assets/image/banner4.png";
import banner5 from "@/assets/image/banner5.png";
import banner6 from "@/assets/image/banner6.png";
import banner7 from "@/assets/image/banner7.png";
import banner8 from "@/assets/image/banner8.png";
import banner9 from "@/assets/image/banner9.png";
import { A11y, Autoplay, Navigation, Pagination, Scrollbar } from "swiper";
import "swiper/less";
import "swiper/less/navigation";
import "swiper/less/pagination";
import { Swiper, SwiperSlide } from "swiper/vue";
// import 'swiper/css/scrollbar'
export default defineComponent({
    name: "swiperCom",
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        const bannerList = [
            { pic: banner },
            { pic: banner1 },
            { pic: banner2 },
            { pic: banner3 },
            { pic: banner4 },
            { pic: banner5 },
            { pic: banner6 },
            { pic: banner7 },
            { pic: banner8 },
            { pic: banner9 },
            { pic: banner10 },
        ];
        const onSwiper = (swiper) => {
            console.log(swiper);
        };
        const navigation = ref({
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        });
        const prevEl = (item, index) => {
            // console.log('上一张' + index + item)
        };
        const nextEl = () => {
            // console.log('下一张')
        };
        // 更改当前活动swiper
        const onSlideChange = (swiper) => {
            // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
            console.log(swiper.activeIndex);
        };
        return {
            onSwiper,
            onSlideChange,
            prevEl,
            nextEl,
            navigation,
            modules: [Autoplay, Navigation, Pagination, Scrollbar, A11y],
            bannerList,
        };
    },
});
</script>
<style lang="less" scoped>
.swiper-main {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.swiper {
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 300ms;
        transform: scale(0.8);

        .swiper-img {
            width: 200px;
            height: 322px;
            border-radius: 10px;
        }
    }
    .swiper-slide-active,
    .swiper-slide-duplicate-active {
        transform: scale(1);
    }
    .swiper-button-next,
    .swiper-button-prev {
        --swiper-theme-color: red;
        --swiper-navigation-size: 20px;
    }
    //   改变小圆点的样式
    .swiper-pagination-bullet-active {
        background: white;
    }
}
</style>

Answer 1

这是Swiper中文站的一个Demo，直接抄呗，修改一下宽高应该就行了。 👉 横向循环焦点图片展示

certifySwiper = new Swiper('#certify .swiper-container', {
    watchSlidesProgress: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    loop: true,
    loopedSlides: 5,
    autoplay: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
        //clickable :true,
    },
    on: {
        progress: function(progress) {
            for (i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i);
                var slideProgress = this.slides[i].progress;
                modify = 1;
                if (Math.abs(slideProgress) > 1) {
                    modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                }
                translate = slideProgress * modify * 260 + 'px';
                scale = 1 - Math.abs(slideProgress) / 5;
                zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                slide.css('zIndex', zIndex);
                slide.css('opacity', 1);
                if (Math.abs(slideProgress) > 3) {
                    slide.css('opacity', 0);
                }
            }
        },
        setTransition: function(transition) {
            for (var i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i)
                slide.transition(transition);
            }
        }
    }
})