swiper实现响应式全屏自动轮播

July 18, 2020

1555 views

1728 words

```
<div class="Excellent_swi">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img class="banner" src="https://dummyimage.com/1920x800/000/fff" />
            </div>
            <div class="swiper-slide">
                <img class="banner" src="https://dummyimage.com/1920x400/00f/fff" />
            </div>
            <div class="swiper-slide">
                <img class="banner" src="https://dummyimage.com/1920x400/0f0/fff" />
            </div>
        </div>
        
        <div class="swiper-pagination"></div>
        
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</div>
```

.Excellent_swi {
width: 100%;
height: 100%;
}

.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
//图片水平垂直居中
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

.swiper-pagination-bullet {
width: 25px;
height: 5px;
display: inline-block;
border-radius: 0;
opacity: 0.5;
background: #FFFFFF;
}

.swiper-pagination-bullet-active {
background: #C6A771;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url();
}
//让图片响应屏幕
.banner {
width: 100%;
}

js部分:

```
var swiper = new Swiper('#home-lunbo  .swiper-container', {
        loop: true, // 循环模式选项
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        effect: 'fade',
        pagination: {
            el: '#home-lunbo  .swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '#home-lunbo  .swiper-button-next',
            prevEl: '#home-lunbo  .swiper-button-prev',
        },
    });
```

Last modification：September 2, 2023