轮播图案例

最新推荐文章于 2025-06-02 15:44:20 发布

余生94ww

最新推荐文章于 2025-06-02 15:44:20 发布

阅读量120

点赞数 1

文章标签： css html sass javascript

本文链接：https://blog.youkuaiyun.com/ww_Filling_it/article/details/124908146

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
    <link rel="stylesheet" href="../day_4/css/swiper-bundle.min.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 800px;
            height: 400px;
            margin: 0 auto;
            margin-top: 200px;
        }

        .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-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../img/li2.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../img/li3.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../img/li4.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../img/li5.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../img/li.png" alt="">
            </div>
        </div>
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>
    <script src="js/swiper-bundle.min.js"></script>
</body>
<script>
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });


    var mySwiper = new Swiper('.swiper', {
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar',
            //type: 'fraction',
            //type : 'progressbar',
            //type : 'custom',
        },

    })
//调试
// var mySwiper = new Swiper('.swiper',{
//   navigation: {
//     nextEl: '.swiper-button-next',
//     prevEl: '.swiper-button-prev',
//   },
// })
</script>

</html>

轮播图案例

案例结果：