随身笔记
随身笔记

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
        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://jskoa.com/wp-content/uploads/2022/05/swiper/www.swiper.com.cn/api/index.html

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

 

随身笔记

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:/…
扫描二维码继续阅读
2022-05-05