swiper 插件

最新推荐文章于 2024-08-27 13:51:43 发布

xj1216wt

最新推荐文章于 2024-08-27 13:51:43 发布

阅读量52

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/xj1216wt/article/details/135184384

版权

swiper

css

引入swiper 插件css文件
<link rel="stylesheet" href="./swiper-bundle.min.css">
 <style>
        .swiper {
                width: 600px;
                height: 300px;
            }  
          .swiper-slide img{
            width: 100%;
            height: 100%;
          }
    </style>

html
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
              swiper-slide<img src="./image/1.png" alt="">
            </div>
            <div class="swiper-slide">
              swiper-slide2<img src="./image/2.png" alt="">
            </div>
            <div class="swiper-slide">
              swiper-slide3<img src="./image/3.png" alt="">
            </div>
            <div class="swiper-slide">
              swiper-slide4<img src="./image/1.png" alt="">
            </div>
            <div class="swiper-slide">
              swiper-slide5<img src="./image/2.png" alt="">
            </div>
            <div class="swiper-slide">
              swiper-slide6<img src="./image/3.png" 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 class="swiper-slide" onclick="alert('你点了Swiper')"></div>
    </div>
</body>

js
引入swiper 插件js文件
<script src="./swiper-bundle.min.js"></script>
<script>
    var mySwiper = new Swiper ('.swiper', {
    //speed:1000, //slider自动滑动开始到结束的时间（单位ms）
    //initialSlide:2, //显示第一个slide,索引值（从0开始）
    //grabCursor : true, //设置为true 时，鼠标覆盖Swiper 时指针会变成手掌形状
    direction: 'horizontal', // 垂直切换选项 // 水平方向切换 horizontal 或垂直方向切换 vertical 
    
    //Carousel(旋转木马)
    //slidesPerView : 3, //设置slider容器能够同时显示的slides数量（可以是小数，整数或者auto（auto则自动根据slides的宽度来设定数量））
    //centeredSlides: true, //居中幻灯片，默认为false/设置为true时，当前的active slide 会居中，而不是默认状态下的居左。
    //centeredSlidesBounds: true, // 默认为false，使得第一个和最后一个slide 始终贴合边缘而不会出现缺口。
    //slidesPerGroup:3, //定义slides的数量多少为一组
    //slidesPerGroupSkip: 2, //设置跳过分组。设置的前几个slide将不计入分组之内。
    //slidesPerGroupAuto: true, //自动分组。只有同时满足slidesPerView: 'auto'和slidesPerGroup: 1才有效。
    //spaceBetween : 20, //在slide之间设置距离（单位px）。
    //slidesOffsetBefore : 100, //设定slide与左边框的预设偏移量（单位px）。
    //slidesOffsetAfter : 100, //设定slide与右边框的预设偏移量（单位px）。
    //normalizeSlideIndex: false, //默认：true 可以使你的活动块（active slide）指示为最左边的那个slide
    //centerInsufficientSlides: true, //如果开启这个参数，当slides 的总数小于 slidesPerView 时，slides居中。
    // Loop(无限循环)
    //loop: true, // 循环模式选项，设置为 true 则开启循环(loop)模式。loop模式：会在原本slide 前后复制若干个slide (默认一个)并在合适的时候切换，让Swiper看起来像是循环的。
    //loopAdditionalSlides: 2, //loop 模式下会在slides 前后复制若干个slide ，前后复制的个数不会大于原来的总个数。默认为0，前后各复制1个。
    //loopedSlides: 3, //默认1 在loop 模式下使用 slidesPerview:'auto' ，还需使用该参数设置所要用到的loop 个数(一般设置大于可视slide个数2个即可)
    // loopFillGroupWithBlank: true,  //在loop 模式下，将用空白slide 填充slide 数量不足的组。需要与  slidesPerGroup 一起使用
    //loopPreventsSlide: true,  //默认true，阻止false
    // Clicks(点击)
    //preventClicks : false,//默认true，当swiper在触摸时阻止默认事件（preventDefault），用于防止触摸时触发链接跳转。
    //preventClicksPropagation : false, //阻止click冒泡。拖动Swiper时阻止click事件。
    //slideToClickedSlide: true, //设置为true则点击slide会过渡到这个slide。
    // Touches(触发条件)
    //touchRatio : -1, //触摸变慢，触摸比例。触摸距离与slide滑动距离的比率。默认为1，按照1:1的触摸比例滑动。设置为0时，完全无法滑动
    //simulateTouch : false,//禁止鼠标模拟，鼠标模拟手机触摸。默认为true，Swiper接受鼠标点击、拖动。
    //allowTouchMove: false, //设置是否允许触摸滑动。如果设为 false 时，那么切换幻灯片的唯一方法是使用外部 API 函数，例如slideNext() 或slidePrev()或slideTo() 等。等同于Swiper3.x 的 onlyExternal。
    //followFinger: false, //跟  随手指。如果禁用，当你按住手指时slide不会移动，只有当你释放时slide才会切换。
    //如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  }) 
</script>