swiper实现图片轮播demo

效果展示
在这里插入图片描述
代码CDN模式可以直接复制就能用，本地用的话还是下swiper.min.js和swiper.min.css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <style>
        .swiper-container {
    
    
            width: 600px;
            height: 300px;
        }
    </style>

</head>
<body>

    <div style="padding: 0 100px; display: flex; justify-content: center; align-items: center; position: relative;">
        <div class="swiper-container">
            <div class="swiper-wrapper" id="imgs" style="width: 100%">
                <div id="div1" class="grid" style="background-color:rebeccapurple">1111111111111111111111111111</div>
                <div id="div2" class="grid" style="background-color:antiquewhite">1111111111111111111111111111</div>
                <div id="div3" class="grid" style="background-color:aqua">1111111111111111111111111111</div>
                <div id="div1" class="grid" style="background-color:rebeccapurple">1111111111111111111111111111</div>
                <div id="div2" class="grid" style="background-color:antiquewhite">1111111111111111111111111111</div>
                <div id="div3" class="grid" style="background-color:aqua">1111111111111111111111111111</div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="swiper-button-prev" style="margin: unset; top: unset;"></div>
        <div class="swiper-button-next" style="margin: unset; top: unset;"></div>
    </div>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper-container', {
    
    
            slidesPerView: "auto",
            slidesPerColumn: 1,
            spaceBetween: 20,
            loop: false,
            navigation: {
    
    
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            slideClass: "grid"//可是设置class类型名等于其他
        });
    </script>
</body>
</html>

SwiperAPI官网地址： https://swiperjs.com/swiper-api

swiper实现图片轮播demo

猜你喜欢