swiper.js中文文档

swiper.js已经更新到8.x了

html

<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.4/swiper-bundle.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.1.4/swiper-bundle.css" />
<style>
.swiper{height: 300px}
</style>
<div class="swiper mySwiper">
    <!-- Additional required wrapper -->

    <div class="swiper-wrapper">
        <div style="background: red;height: 50px" class="swiper-slide">Slide 1</div>
        <div style="background: green;height: 150px" class="swiper-slide">Slide 2</div>
        <div style="background: pink" class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div style="background: #000" class="swiper-slide">Slide 9</div>
    </div>

    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

const swiper = new Swiper('.swiper', {
        // Optional parameters
        autoplay: {
          disableOnInteraction: false, //用户手动轮播后，继续自动轮播
          delay:2000,
        },
        slidesPerView: 2, //1屏显示几个slide，默认显示1个,全展示
        centeredSlides : false,//配合slidesPerView才能看出效果，true时，active slide会居中，其他会被遮挡
        centerInsufficientSlides:false, //默认false，如果设置true，实际slide数量小于slidesPerView数量，slide会居中
        centeredSlidesBounds: false, //true时让第一个slide和最后一个slide贴边
     
        direction: 'horizontal', //水平  'vertical' 垂直滚动
        loop: false, //无缝接无循环
        speed: 400,  //滚动速度
        spaceBetween: 100, //间距
        allowSlideNext:true, // false表示禁止切换下一页
        allowSlidePrev:true, // false表示禁止切换上一页
        allowTouchMove:true, //false禁止用手势滑动
        autoHeight:false, //true自适应高度
 
        // breakpointsBase:'window', //默认根据窗口变化
        // breakpoints: {  //根据窗口大小来改变属性
        //     '@1.50': {   //大于该比例时触发
        //         direction:'vertical'
        //     },
        //     320: {  //当屏幕宽度大于等于320px触发
        //
        //     },
        // },
        createElements: false,//自动生成元素,不实用
        containerModifierClass: 'swiper-', //修改容器前缀
        cssMode: false, //靠css驱动swpier滑动效果，性能提供，但很多功能就丢失了，不实用
        edgeSwipeDetection:false, //true时手指放在swpier最边缘的时候时无法滑动的，考虑一些手机手势在最边缘的动作是切换上一个app和下一个app
        edgeSwipeThreshold : 20, //屏幕边缘探测距离，配合edgeSwipeDetection:true时使用
        effect:'silde', //切换效果，还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）
        enabled: true,//false，禁用swiper
        focusableElements:'input,select, option, textarea, button, video, label',//这些元素放到slide里面会被touchStartPreventDefault阻止，触摸无效
        followFinger: true,//false时，滑动页面时，只有手指离开了才会触发
        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    });

中文：https://sdeno.com/wp-content/uploads/2022/05/swiper/www.swiper.com.cn/api/index.html

原文档：https://swiperjs.com/swiper-api#swiper-full-html-layout