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

最新推荐文章于 2024-09-11 11:13:45 发布

weixin_34233421

最新推荐文章于 2024-09-11 11:13:45 发布

阅读量2.1k

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/jervy/p/9639014.html

版权

html：

<!--轮播 -->
    <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>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>

css：要结合swiper.css使用

.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('.swiper-container', {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });