swiper轮播图代码实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
     <script src="./js/swiper.min.js"></script>
    <script src='./js/index.js'></script>
    <style media="screen">
  .swiper-container{
    width:100%;
    height:50%;
  }
  .he{
    width:100%;
    height:100%;
  }
</style>
    <link rel="stylesheet" href="./css/swiper.min.css">
</head>
<body>

<!-- 轮播图开始 -->
<div ></div>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img   class='he' src="./images/1.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img class='he'  src="./images/2.jpg" alt=""> </div>
        <div class="swiper-slide">
            <img  class='he' src="./images/3.jpg" alt="">
        </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>
<script>
  var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            //点击圆点切换
            paginationClickable: true,
            // 图片之间的距离
            spaceBetween: 30,
            // 默认状态下活动块居左，设定为true时，活动块会居中。
           centeredSlides: true,
            // 自动轮播时间
            autoplay: 6000,
            // 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
            autoplayDisableOnInteraction: false,
            // 3D切换效果
             effect: 'fade', 
            //左右滑动
            // direction: 'horizontal',
            // 设置为true则windows改变尺寸时swiper会重新初始化。
            resizeReInit: true,

             lazyLoading: true,
             preloadImages: false,
            // 当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。
            updateOnImagesReady: true,
            paginationClickable: true,
            // 图片之间的距离
             spaceBetween: 0,
            //slidesPerColumn参数
             slidesPerColumn: 1,
            //滑动速度，即slider自动滑动开始到结束的时间（单位ms）
            speed: 600,
            loop: true,
            initialSlide: 0,
            // 如果启用，仅有“可视”的slides会最后适应容器的大小
             visibilityFullFit: true ,
        });
</script>
<!-- 轮播图结束 -->
<div id='four'>
    <a href="#">
        <img src="./images/" alt="">
    </a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容