swiper实现轮播图效果

最新推荐文章于 2022-09-03 11:47:23 发布

易大力的面

最新推荐文章于 2022-09-03 11:47:23 发布

阅读量355

点赞数 1

文章标签： swiper的使用

本文链接：https://blog.csdn.net/qq_44691725/article/details/102953033

版权

swiper实现轮播图效果

使用步骤

加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或者使用CDN。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../swiper-5.2.0/package/css/swiper.min.css" rel="stylesheet">
</head>

2.body中的内容

 <div class="swiper-container" style="width: 800px; height: 300px;">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../swiper-5.2.0/demos/images/nature-1.jpg"></div>
                    <div class="swiper-slide" data-swiper-autoplay="3000"><img src="../swiper-5.2.0/demos/images/nature-2.jpg"></div>
                    <div class="swiper-slide"><img src="../swiper-5.2.0/demos/images/nature-3.jpg"></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                
                <!-- 如果需要滚动条 -->
                <!-- <div class="swiper-scrollbar"></div> -->
            </div>

3.初始化过程

<script>        
            var mySwiper = new Swiper ('.swiper-container', {
              autoHeight: true, //高度随内容变化
              speed:300, //设置滑动切换的时间（毫秒）
              roundLengths:true, //设置为true，则将slide的宽和高取整(四舍五入)，以防止某些分辨率的屏幕上文字或边界(border)模糊。
              grabCursor : true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
              direction: 'horizontal', //Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。可使用swiper.changeDirection()方法动态切换方向。
              loop: true, // 循环模式选项
              autoplay:{    //设置自动播放
                delay:2000,  //时间间隔（毫秒)
                disableOnInteraction:false //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
              },
              // 如果需要分页器
              pagination: {
                el: '.swiper-pagination',
              },
              
              // 如果需要前进后退按钮
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
              
              // 如果需要滚动条
            //   scrollbar: {
            //     el: '.swiper-scrollbar',
            //   },
            })        
            </script>

可以自己设置swiper-container的宽和高。需要添加功能直接在初始化中添加

易大力的面

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
swiper实现轮播图效果

swiper实现轮播图效果使用步骤加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或者使用CDN。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
复制链接

扫一扫