6.swiper

最新推荐文章于 2024-05-14 07:29:07 发布

念白啊

最新推荐文章于 2024-05-14 07:29:07 发布

阅读量186

点赞数

分类专栏： js新特性

本文链接：https://blog.csdn.net/qq_44815463/article/details/104383804

版权

js新特性专栏收录该内容

15 篇文章 0 订阅

订阅专栏

swiper

1.swiper概念

Swiper是纯javascript打造的滑动特效插件，面向PC、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择。

注意： Swiper是滑动特效插件，用鼠标滚轮无效果，需要用鼠标拖动或者触屏滑动。

2.swiper的使用

引入swiper对应的css和js文件

 <link rel="stylesheet" href="css/swiper.css">
 <script src="js/swiper.js"></script>

按照框架的需求搭建三层结构

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
    </ul>
</div>

创建一个Swiper对象, 将容器元素传递给它

    let mySwiper = new Swiper ('.swiper-container', {
        // 如果需要分页器，一般轮播会用到，就是图片轮播时下面的圆点
        pagination: {
            el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true, // 循环模式选项
        // autoplay:true, // 自动轮播
        // autoplay: {
        //     delay: 1000,//1秒切换一次
        // },
        speed:5000, //设置切换速度
    });

3.swiper-animation的使用

引入对应的css和js文件

    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/swiper.animate.min.css">
    <script src="js/swiper.js"></script>
    <script src="js/swiper.animate1.0.3.min.js"></script>

给需要动画的元素添加类名ani,如下，p需要动画，添加了叫ani的类名，然后设置其动画，动画可以参考api文档里给出的动画，也可自定义动画。
swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

 <div class="swiper-slide"> 
 <p class="ani" swiper-animate-effect="fadeIn">内容</p>
 </div>

自定义动画（写在自己的css里）

 @keyframes myFadeIn {
            0% {
                opacity: 0;
                transform: scale(2);
            }

            100% {
                opacity: 1;
                transform: scale(0.5);
            }
        }

        .myFadeIn {
            -webkit-animation-name: myFadeIn;
            animation-name: myFadeIn
        }
  //myFadeIn就是动画名称，需要使用的话就将这个赋给切换效果

监听动画

  var mySwiper = new Swiper ('.swiper-container', {
        direction: 'vertical',
        on:{
            init: function(){
                swiperAnimateCache(this); //隐藏动画元素 
                swiperAnimate(this); //初始化完成开始动画
            },
            slideChangeTransitionEnd: function(){
                //每个slide切换结束时也运行当前slide动画
                swiperAnimate(this); 
            }
        }
    });

今日份学习总结~ 继续加油向前冲 ~