Swiper组件（二）-- 基础配置

最新推荐文章于 2023-12-04 10:58:33 发布

神农尺

最新推荐文章于 2023-12-04 10:58:33 发布

阅读量1.8k

点赞数

分类专栏： Swiper

本文链接：https://blog.csdn.net/qq_42855675/article/details/112785516

版权

Swiper 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.基础配置

配置选项	含义	默认值	注意
initialSlide	设定初始化时slide的索引。Swiper默认初始化时显示第一个slide，有时想初始化时直接显示其他slide，可以做此设置	0
speed	切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间	300
grabCursor	设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。	false
init	当创建一个Swiper实例时是否立即初始化。如果禁止了，可以稍后使用mySwiper.init()来初始化	true
autoHeight	自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。	false
width	强制Swiper的宽度(px)	500	(1) 当Swiper在隐藏状态下初始化时用此属性。(2)设置测属性后自适应宽度失效（3）可设置为undefined使这个参数无效。
height	强制Swiper的高度(px)	300	(1)当你的Swiper在隐藏状态下初始化时且切换方向为垂直才用得上(2)设置测属性后自适应高度失效
direction	Swiper的滑动方向，水平方向切换(horizontal)或垂直方向切换(vertical)	horizontal	(1)可使用swiper.changeDirection()方法动态更改切换方向(2)可使用断点（breakpoints,4.5.0后）设置不同分辨率下的切换方向
setWrapperSize	开启这个设定会在Wrapper上添加等于slides相加的宽或高	false	用于浏览器兼容。，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
uniqueNavElements	独立分页元素。当你的控制组件放在container外面的时候用	true	需要在container之外添加分页元素
runCallbacksOnInit	当初始化slide不是第一个(例initialSlide:2)或者设置了loop: true时，swiper初始化时会触发一次回调函数	true	配和on属性使用
on	注册事件
watchOverflow	当没有足够的slide切换时，例如只有1个slide，swiper会失效且隐藏导航等。默认不开启这个功能	false	loop模式无效，因为会复制slide
preloadImages	Swiper会强制加载所有图片后才初始化	true	可以配合updateOnImagesReady一起使用
updateOnImagesReady	当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化	true	使用此选项需要先开启preloadImages: true
updateOnWindowResize	默认当窗口(window) 尺寸发生变化时，比如屏幕旋转，Swiper会更新和重新计算(update和breakpoints等)	true	设置该属性为false时，breakpoints 失效

2.parallax配置

（1）Swiper的视差效果，内容在切换时更有层次感。
（2）效果可以应用于container或slide的子元素。
（3）注意：设定透明度或缩放必须同时设定位移，否则无效

属性	含义	参数类型/取值范围
data-swiper-parallax-x (x方向)/data-swiper-parallax-y(y方向)	移动开始的位置	number（px）/%
data-swiper-parallax-opacity	视差透明度变化	0-1
data-swiper-parallax-scale	视差缩放变化	0-1
data-swiper-parallax-duration	视差动画持续时间	number(ms)–默认值是Swiper的speed，与切换时间同步

        .swiper-container {
            /* 可见容器大小 */
            width: 250px;
            height: 300px;
            text-align: center;
            position: relative;
        }
        .swiper-bg {
            position: absolute;
            /* 背景图片大小 */
            width: 600px;
            height: 100%;
            background: url(../img/swiper1.png) no-repeat center center;
            background-size: 100% 100%;
        }

<div class="swiper-container" id="mySwiper2">
        <!--背景图片不换，但是有滑动效果-->
        <div class="swiper-bg" data-swiper-parallax="-50%" data-swiper-parallax-duration="3000"></div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div data-swiper-parallax="-100">从右边100px开始进入</div>
                <div data-swiper-parallax="-300" data-swiper-parallax-duration="3000">
                    <p>从右边300px开始进入，时间3000ms</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.1" data-swiper-parallax-duration="5000">透明度变化 0.1</div>
                <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.2" data-swiper-parallax-duration="5000">透明度变化 0.2</div>
                <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.3" data-swiper-parallax-duration="5000">透明度变化 0.3</div>
                <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.4" data-swiper-parallax-duration="5000">透明度变化 0.4</div>
                <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" data-swiper-parallax-duration="5000">透明度变化 0.5</div>
                <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.6" data-swiper-parallax-duration="5000">透明度变化 0.6</div>
                <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.7" data-swiper-parallax-duration="5000">透明度变化 0.7</div>
                <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.8" data-swiper-parallax-duration="5000">透明度变化 0.8</div>
                <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.9" data-swiper-parallax-duration="5000">透明度变化 0.9</div>
                <div data-swiper-parallax="0" data-swiper-parallax-opacity="1.0" data-swiper-parallax-duration="5000">透明度变化 1.0</div>
            </div>
            <div class="swiper-slide">
                <div data-swiper-parallax="0" data-swiper-parallax-scale="0.1" data-swiper-parallax-duration="5000">缩放变化 0.1</div>
                <div data-swiper-parallax="0" data-swiper-parallax-scale="0.2" data-swiper-parallax-duration="5000">缩放变化 0.2</div>
                <div data-swiper-parallax="0" data-swiper-parallax-scale="0.3" data-swiper-parallax-duration="5000">缩放变化 0.3</div>
                <div data-swiper-parallax="0" data-swiper-parallax-scale="0.4" data-swiper-parallax-duration="5000">缩放变化 0.4</div>
                <div data-swiper-parallax="0" data-swiper-parallax-scale="0.5" data-swiper-parallax-duration="5000">缩放变化 0.5</div>
                <div data-swiper-parallax="0" data-swiper-parallax-scale="0.6" data-swiper-parallax-duration="5000">缩放变化 0.6</div>
                <div data-swiper-parallax="0" data-swiper-parallax-scale="0.7" data-swiper-parallax-duration="5000">缩放变化 0.7</div>
                <div data-swiper-parallax="0" data-swiper-parallax-scale="0.8" data-swiper-parallax-duration="5000">缩放变化 0.8</div>
                <div data-swiper-parallax="0" data-swiper-parallax-scale="0.9" data-swiper-parallax-duration="5000">缩放变化 0.9</div>
                <div data-swiper-parallax="0" data-swiper-parallax-scale="1.0" data-swiper-parallax-duration="5000">缩放变化 1.0</div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

 var mySwiper = new Swiper('#mySwiper2', {
            parallax: true,
            speed: 3000, 
            grabCursor: true, 
            pagination: {
                el: '.swiper-pagination',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })

该例子中背景图片的大小必须比可视范围的大小大
在这里插入图片描述

3.breakpoints配置

        断点设定：根据屏幕宽度设置某参数为不同的值，类似于响应式布局的media only screen and (min-width: 480px)
    注：3种配比方式，但是都和屏幕有关，和框架大小无关。
        way-1:根据屏幕宽高比设置
        way-2:根据屏幕大小设置（大于等于）
        way-3:根据屏幕大小设置（小于等于）

        .swiper-container {
            width: 600px;
            height: 300px;
            text-align: center;
        }

<div class="swiper-container" id="mySwiper3">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: #f00">Slide 1</div>
            <div class="swiper-slide" style="background-color: #0f0">Slide 2</div>
            <div class="swiper-slide" style="background-color: #00f">Slide 3</div>
            <div class="swiper-slide" style="background-color: #ff0">Slide 4</div>
            <div class="swiper-slide" style="background-color: #f0f">Slide 5</div>
            <div class="swiper-slide" style="background-color: #0ff">Slide 6</div>
            <div class="swiper-slide" style="background-color: #fff">Slide 7</div>
            <div class="swiper-slide" style="background-color: #aaa">Slide 8</div>
            <div class="swiper-slide" style="background-color: #0aa">Slide 9</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 mySwiper3 = new Swiper('#mySwiper3', {
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
            // breakpoints: {
            //     '@0.75': { //当屏幕宽高比大于等于0.75
            //         slidesPerView: 2,
            //         spaceBetween: 20,
            //     },
            //     '@1.00': { //当屏幕宽高比大于等于1
            //         slidesPerView: 3,
            //         spaceBetween: 40,
            //     },
            //     '@1.50': { //当屏幕宽高比大于等于1.5
            //         slidesPerView: 4,
            //         spaceBetween: 50,
            //     },
            // },
            breakpoints: {
                1280: { //当屏幕宽度小于等于1280
                    slidesPerView: 2,
                    spaceBetween: 50
                },
                768: { //当屏幕宽度小于等于768
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
                320: { //当屏幕宽度小于等于320
                    slidesPerView: 1,
                    spaceBetween: 10,
                }
            },
            // breakpoints: {
            //     320: { //当屏幕宽度大于等于320
            //         slidesPerView: 2,
            //         spaceBetween: 10
            //     },
            //     768: { //当屏幕宽度大于等于768 
            //         slidesPerView: 3,
            //         spaceBetween: 20
            //     },
            //     1280: { //当屏幕宽度大于等于1280
            //         slidesPerView: 4,
            //         spaceBetween: 30
            //     }
            // }
        })
    </script>

神农尺

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Swiper组件（二）-- 基础配置

1.基础配置配置选项含义默认值注意initialSlide设定初始化时slide的索引。Swiper默认初始化时显示第一个slide，有时想初始化时直接显示其他slide，可以做此设置0speed切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间300grabCursor设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。falseinit当创建一个Swiper实例时是
复制链接

扫一扫

专栏目录