swiper——Basic(parallax,pagination)_swiper-parallax-CSDN博客

一、个人案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="swiper-4.5.0/swiper4-animate-demo/css/swiper.min.css">
    <link rel="stylesheet" href="swiper-4.5.0/swiper4-animate-demo/css/animate.min.css">
</head>
<style>
    .body{
        position: relative;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    /*定义最外层的样式*/
    .swiper-container{
        height: 500px;
        background: #000;
    }
    /*定义背景照片样式*/
    .parallax-bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 130%;
        height: 100%;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center;

    }
    .swiper-slide{
        color: #FFFFFF;
        font-size: 50px;
    }
    .swiper-slide .title {
        font-size: 41px;
        font-weight: 300;
    }
    .swiper-slide .subtitle {
        font-size: 21px;
    }
    .swiper-slide .text {
        font-size: 14px;
        max-width: 400px;
        line-height: 1.3;
    }
</style>
<body>
<div class="swiper-container">
    <div class="parallax-bg" style="background: url(img/3.jpg) no-repeat center;"  data-swiper-parallax="-13%"> </div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
                <div class="title" data-swiper-parallax="-200">Slide 1</div>
                <div class="subtitle" data-swiper-parallax="-300">Subtitle</div>
                <div class="text" data-swiper-parallax="-400">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
                </div>
        </div>

        <div class="swiper-slide">
            <div class="title" data-swiper-parallax="-200">Slide 2</div>
            <div class="subtitle" data-swiper-parallax="-300">Subtitle</div>
            <div class="text" data-swiper-parallax="-400">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="title" data-swiper-parallax="-200">Slide 3</div>
            <div class="subtitle" data-swiper-parallax="-300">Subtitle</div>
            <div class="text" data-swiper-parallax="-400">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
            </div>
        </div>
    </div>
    <div class="swiper-button-prev swiper-button-white" ></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-button-next swiper-button-white" ></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-pagination"></div>
</div>
<script src="swiper-4.5.0/swiper4-animate-demo/js/swiper.min.js"></script>
<script src="swiper-4.5.0/swiper4-animate-demo/js/swiper.animate.min.js"></script>
<script>

    //用于初始化一个Swiper，返回初始化后的Swiper实例。
    /* swiperContainer  Swiper容器的css选择器，例如".swiper-container"
     *parameters  Swiper的个性化配置
     * */
    var Swiper=new Swiper('.swiper-container',{
        effect:"fade",//淡入淡出效果
        parallax:"true",//产生视觉差
        pagination:{//使用分页器导航。分页器可使用小圆点样式（默认）、分式样式或进度条样式。
            el: '.swiper-pagination',//分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外，不同Swiper的组件应该有所区分，如#pagination1，#pagination2。
            clickable:true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
            type : 'progressbar'
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        }

    })
</script>
</body>
</html>

效果图
在这里插入图片描述
（1）parallax
设置为true开启视差效果。
效果可以应用于container或slide的子元素。当应用于container的子元素（常用于视差背景图），每次切换时视差效果仅有设定值的slide个数-1分之1

1.视差位移变化
在所需要的元素上增加data-swiper-parallax属性（与Swiper切换方向相同）或data-swiper-parallax-x （x方向） data-swiper-parallax-y（y方向）

data-swiper-parallax接受两种类型的参数。
number（单位：px），如-300，从右边300px进入左边出去。
percentage（百分比），移动距离=该元素宽度 * percentage。

2.视差透明度变化
在所需要的元素上增加data-swiper-parallax-opacity属性。可选值0-1，如0.5，从半透明进入半透明出去

3.视差缩放变化
在所需要的元素上增加data-swiper-parallax-scale属性。可选值如0.5，从一半大小进入一半大小出去

还可通过data-swiper-parallax-duration设定视差动画持续时间（ms）。默认值是Swiper的speed，与切换时间同步。

*设定透明度或缩放必须同时设定位移，否则无效(4.0.5)

透明度变化

（2）pagination
部分参数

el:分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外，不同Swiper的组件应该有所区分，如#pagination1，#pagination2。
type:分页器样式类型，可选
		‘bullets’  圆点（默认）
		‘fraction’  分式 
		‘progressbar’  进度条
		‘custom’ 自定义
progressbarOpposite:使进度条分页器与Swiper的direction参数相反，也就是说水平方向切换的swiper显示的是垂直进度条而垂直方向切换的swiper显示水平进度条
bulletElement：设定分页器指示器（小点）的HTML标签。
dynamicBullets：动态分页器，当你的slide很多时，开启后，分页器小点的数量会部分隐藏
dynamicMainBullets：动态分页器的主指示点的数量
hideOnClick：默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。
clickable：此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换

查看全部参数请到官网
progressbarOpposite效果
在这里插入图片描述
dynamicBullets效果