轮播图优化

Hui Yu

2021-03-20 1c8e5a314f96d2b164f67fedb00e23da2ab27e1e

轮播图优化

 src/assets/home/art_mien/certify01.png

Binary files differ

 src/assets/home/art_mien/wm_button_icon.png

 src/views/home/components/ArtMien.vue

@@ -3,30 +3,30 @@
        <div class="bg">

            <span class="title font-bold">文艺·风采</span>

        </div>

        <div class="content">

            <el-carousel type="card" indicator-position="none" loop="true" interval="2000" height="360px" :autoplay="true">

        <div id="certify">

            <!-- <el-carousel type="card" indicator-position="none" loop="true" interval="2000" height="360px" :autoplay="true">

                <el-carousel-item v-for="(item, index) in list" :key="index">

                    

                        <img :src="item.imgSrc" />

                </el-carousel-item>

            </el-carousel>
            <!-- <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in list" :key="index">
                        <img :src="item.imgSrc" />
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div> -->

            </el-carousel> -->

            <div class="swiper-container">

                <div class="swiper-wrapper">

                    <div class="swiper-slide" v-for="(item,index) in list" :key="index">

                        <img :src="item.imgSrc" />

                    </div>

                </div>

                <div class="swiper-pagination"></div>

                <!-- <div class="swiper-button-prev"></div>

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

            </div>

        </div>

    </div>

</template>



<script>
    // import '../../../utils/swiper.min.js';
	
<script>

    import '../../../utils/swiper.min.js';



    export default {

        name: "ArtMien",

        data() {

@@ -39,8 +39,8 @@
                    },

                    {

                        imgSrc: require("@/assets/home/art_mien/3.png")

                    },
					
                    },



                    {

                        imgSrc: require("@/assets/home/art_mien/4.png")

                    },

@@ -56,69 +56,71 @@
                    {

                        imgSrc: require("@/assets/home/art_mien/8.png")

                    }

                ],
                certifySwiper:null

                ],

                certifySwiper: null

            }

        },
        // beforeMount() {
        //     var certifySwiper = new Swiper('.content .swiper-container', {
        //         watchSlidesProgress: true,
        //         slidesPerView: 'auto',
        //         centeredSlides: true,
        //         loop: true,
        //         loopedSlides: 5,
        //         autoplay: 3000,
        //         prevButton: '.swiper-button-prev',
        //         nextButton: '.swiper-button-next',
        //         pagination: '.swiper-pagination',
        //         //paginationClickable :true,
        //         onProgress: function(swiper, progress) {
        //             for (i = 0; i < swiper.slides.length; i++) {
        //                 var slide = swiper.slides.eq(i);
        //                 var slideProgress = swiper.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);
        //                 }
        //             }
        //         },
        //         onSetTransition: function(swiper, transition) {
        //             for (var i = 0; i < swiper.slides.length; i++) {
        //                 var slide = swiper.slides.eq(i)
        //                 slide.transition(transition);
        //             }
			
        //         },
        //         //处理分页器bug
        //         onSlideChangeStart: function(swiper) {
        //             if (swiper.activeIndex == 4) {
        //                 swiper.bullets.eq(9).addClass('swiper-pagination-bullet-active');
        //                 console.log(swiper.bullets.length);
        //             }
        //         }
        //     });
        // }
		
        },

        mounted() {



            var certifySwiper = new Swiper('#certify .swiper-container', {

                watchSlidesProgress: true,

                slidesPerView: 'auto',

                centeredSlides: true,

                loop: true,

                loopedSlides:8,

                autoplay: 3000,

                prevButton: '.swiper-button-prev',

                nextButton: '.swiper-button-next',

                pagination: '.swiper-pagination',

                //paginationClickable :true,

                onProgress: function(swiper, progress) {

                    for (var i = 0; i < swiper.slides.length; i++) {

                        var slide = swiper.slides.eq(i);

                        var slideProgress = swiper.slides[i].progress;

                        var modify = 1;

                        if (Math.abs(slideProgress) > 1) {

                            modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;

                        }

                        var translate = slideProgress * modify * 110 + 'px';

                        var scale = 1 - Math.abs(slideProgress) / 8;

                        var 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) > 2) {

                            slide.css('opacity', 0);

                        }

                    }

                },

                onSetTransition: function(swiper, transition) {

                    for (var i = 0; i < swiper.slides.length; i++) {

                        var slide = swiper.slides.eq(i)

                        slide.transition(transition);

                    }



                },

                //处理分页器bug

                onSlideChangeStart: function(swiper) {

                    if (swiper.activeIndex == 4) {

                        swiper.bullets.eq(9).addClass('swiper-pagination-bullet-active');

                        console.log(swiper.bullets.length);

                    }

                }

            });

        }



    }

</script>





<style lang="scss" scoped>

    @import "~@/styles/variables.scss";
    // @import  "../../../styles/swiper.min.css";

    @import "~@/styles/variables.scss";

    @import "../../../styles/swiper.min.css";



    .art-mien {

        width: $appWidth;

        height: 36rem;

        width: $appWidth;
        padding: 20px;

        // height: 36rem;



        .bg {

            height: 8rem;

@@ -143,131 +145,79 @@
            }

        }



        .content {

        #certify {

            margin-top: 1rem;

            height: 27rem;

            position: relative;

            background-image: url("../../../assets/home/art_subject/bg.png");

            background-size: 100% 100%;
			
            // position: relative;
            // width: 1200px;
            // margin: 0 auto;
				
            // .swiper-container {
            //     padding-bottom: 60px;
            // }
			
            // .swiper-slide {
            //     width: 520px;
            //     height: 408px;
            //     background: #fff;
            //     box-shadow: 0 8px 30px #ddd;
            // }
            // .swiper-slide img{
            //     display:block;
            // }
            // .swiper-slide p {
            //     line-height: 98px;
            //     padding-top: 0;
            //     text-align: center;
            //     color: #636363;
            //     font-size: 1.1em;
            //     margin: 0;
            // }
			
            // .swiper-pagination {
            //     width: 100%;
            //     bottom: 20px;
            // }
			
            // .swiper-pagination-bullets .swiper-pagination-bullet {
            //     margin: 0 5px;
            //     border: 3px solid #fff;
            //     background-color: #d5d5d5;
            //     width: 10px;
            //     height: 10px;
            //     opacity: 1;
            // }
			
            // .swiper-pagination-bullets .swiper-pagination-bullet-active {
            //     border: 3px solid #00aadc;
            //     background-color: #fff;
            // }
			
            // .swiper-button-prev {
            //     left: -30px;
            //     width: 45px;
            //     height: 45px;
            //     background: url(../../../assets/wm_button_icon.png) no-repeat;
            //     background-position: 0 0;
            //     background-size: 100%;
            // }
			
            // .swiper-button-prev:hover {
            //     background-position: 0 -46px;
            //     background-size: 100%
            // }
			
            // .swiper-button-next {
            //     right: -30px;
            //     width: 45px;
            //     height: 45px;
            //     background: url(../../../assets/wm_button_icon.png) no-repeat;
            //     background-position: 0 -93px;
            //     background-size: 100%;
            // }
			
            // .swiper-button-next:hover {
            //     background-position: 0 -139px;
            //     background-size: 100%
            // }



            /deep/ .el-carousel__indicators--outside {

                margin-top: 23px;

            margin: 0 auto;

            .swiper-container {

                padding: 30px;

            }



            img {

                position: absolute;

                width: 18.5rem;

                height: 30rem;

            .swiper-slide {

                width: 350px;

                height: 430px;

            }



            img:nth-child(1) {

                left: 0;

            .swiper-slide img {

                display: block;

                width: 100%;

                height: 100%;

            }



            img:nth-child(2) {

                left: 11.2rem;

            .swiper-slide p {

                line-height: 98px;

                padding-top: 0;

                text-align: center;

                color: #636363;

                font-size: 1.1em;

                margin: 0;

            }



            img:nth-child(3) {

                left: 18.7rem;

            .swiper-pagination {

                width: 100%;

                bottom: 0px;

            }



            img:nth-child(4) {

                left: 26.1rem;

            .swiper-pagination-bullets .swiper-pagination-bullet {

                margin: 0 5px;

                border: 3px solid #fff;

                background-color: #d5d5d5;

                width: 10px;

                height: 10px;

                opacity: 1;

            }



            img:nth-child(5) {

                left: 37rem;

                z-index: 5;

            .swiper-pagination-bullets .swiper-pagination-bullet-active {

                border: 3px solid #00aadc;

                background-color: #fff;

            }



            img:nth-child(6) {

                left: 47.6rem;

                z-index: 4;

            .swiper-button-prev {

                left: -30px;

                width: 45px;

                height: 45px;

                background: url(../../../assets/home/art_mien/wm_button_icon.png) no-repeat;

                background-position: 0 0;

                background-size: 100%;

            }



            img:nth-child(7) {

                left: 55.5rem;

                width: 17.5rem;

                z-index: 3;

            .swiper-button-prev:hover {

                background-position: 0 -46px;

                background-size: 100%

            }



            img:nth-child(8) {

                right: 0;

                z-index: 2;

            .swiper-button-next {

                right: -30px;

                width: 45px;

                height: 45px;

                background: url(../../../assets/home/art_mien/wm_button_icon.png) no-repeat;

                background-position: 0 -93px;

                background-size: 100%;

            }



            .swiper-button-next:hover {

                background-position: 0 -139px;

                background-size: 100%

            }

        }

    }