2020-04-25

                slidesPerView: 5, //设置slider容器能够同时显示的slides数量(carousel模式)
                spaceBetween: 0, //margin-right
                centeredSlides : true,  //活动块会居中,而不是默认状态下的居左。
                loop:true,  //自动循环
                loopedSlides: 5,
                initialSlide :2,  //设定初始化时slide的索引
                slideToClickedSlide:true , 
                speed:500,
                autoplayDisableOnInteraction : false,











.swiper-container {
        border:1px solid green;
        width: 50%;
        margin: 0 auto;
        height: 400px;
        padding-top: 40px;
    }
    .swiper-slide {
        height: 100px!important;
        width: 20%!important;
        text-align: center;
        font-size: 18px;
        background: #fff;
        background-color: pink;
        transform: scale(1);
        transition: 1s;
        
    }
    .swiper-slide-active{
        transform: scale(1.4);
        transition: 1.5s;
        z-index: 10;
    }
    .swiper-slide-prev,.swiper-slide-next{
        transform: scale(1.2);
         transition: 1s;
        z-index: 9;
    }
        

你可能感兴趣的:(2020-04-25)