swiper轮播图

最新推荐文章于 2023-01-04 22:08:30 发布

梅川酷子哥21岁

最新推荐文章于 2023-01-04 22:08:30 发布

阅读量247

点赞数

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/xxwd12/article/details/99307426

版权

web前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在项目中引入Swiper组件，包括加载CSS和JS文件，以及Swiper4.x版本的具体使用方法，帮助开发者创建高效、美观的轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入css，js

html内容

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://www.swiper.com.cn/templets/default/images/home/iphoneX.png" class="topbox">
            </div>
            <div class="swiper-slide">
                <img src=" https://www.swiper.com.cn/templets/default/images/home/iphone8.png" class="topbox">
            </div>
            <div class="swiper-slide">
                <img src="https://www.swiper.com.cn/templets/default/images/home/ipad.png" class="topbox">
            </div>
        </div>
    </div>
    <div class="page">
        <div class="pagination"></div>
    </div>

js内容

var mySwiper = new Swiper('.swiper-container', {
    loop: true, //环路
    direction: 'horizontal', // 横向切换
    autoplay: { //自动切换
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
    },
    pagination: {
        el: '.pagination',
        type: 'fraction',
    },
});

Swiper4.x使用方法