JavaScript实现轮播图

最新推荐文章于 2024-09-09 23:43:17 发布

曲邹萌

最新推荐文章于 2024-09-09 23:43:17 发布

阅读量87

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_74276153/article/details/141471399

版权

HTML

 <div class="banner">
                    <div class = "swiper-container">
                        <div class="swiper-wrapper">
//插入图片
                            <div class="swiper-slide"><img src="./image/XaioMi10background.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./image/小米Reami.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./image/小米red.webp" alt=""></div>
                        </div>
                        
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>

JavaScript

    var mySwiper = new Swiper ('.swiper-container', {

        navigation:{
            nextEl:'.swiper-button-next',
            prevEl:'.swiper-button-prev',
        },
        pagination:{
            el:'.swiper-pagination',
          
        },       
        autoplay:{
            delay:1000,
        },
    })