请问，swiper5里用什么实现覆盖效果啊。。。

首页课程实战体系课手记专栏慕课教程

来源：2-4 编程练习

慕盖茨6136029

2019-09-27 20:06:07

翻看了好久官方文档，animate里的只有sliderInRight这样的有一丢丢接近，但是也完全不是一回事的。。。难道说最新版里面没有这个效果

写回答

2回答

好帮手慕言

2019-09-28

已采纳

同学你好，swiper2覆盖效果请看链接：https://2.swiper.com.cn/demo/smooth/demo-inverse-cover.html

可以打开看源码：

本编程题是根据swiper2出的。swiper5里面没有这个效果。

祝学习愉快~

慕盖茨6136029

提问者

2019-09-27

噢。。。是不是effect里的slide。。。下面这样的效果可以吗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper.min.css">
    <link rel="stylesheet" href="./animate.min.css">
    <style>
    *{
        padding: 0;
        margin: 0;
     }
     html,body{
         width: 100%;
         height: 100%;

     }
     .swiper-container{
        width: 100%;
        height: 100%;
     }
     .swiper-wrapper{
        width: 100%;
        height: 100%;
     }
     .swiper-slide{
        width: 100%;
        height: 100%;
     }
     img{
         display: block;
         width: 100%;
         height: 100%;
     }
    </style>
</head>
<body>
     <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="http://climg.mukewang.com/59f2f3c60001e51206000600.jpg" class="ani" swiper-animate-effect="slideInRight" swiper-animate-duration="0s">
            </div>
            <div class="swiper-slide">
                <img src="http://climg.mukewang.com/59f2f3dc0001512e06000533.jpg" class="ani" swiper-animate-effect="slideInRight" swiper-animate-duration="0s">
            </div>
            <div class="swiper-slide">
                <img src="http://climg.mukewang.com/59f2f3fb0001725305000707.jpg" class="ani" swiper-animate-effect="slideInRight" swiper-animate-duration="0s">
            </div>

        </div>
    </div>

    <script src="./swiper.min.js"></script>
    <script src="./swiper.animate1.0.3.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container',{
            effect:'slide'
            // on:{
            // init: function(){
            //     swiperAnimateCache(this); //隐藏动画元素 
            //     swiperAnimate(this); //初始化完成开始动画
            // }, 
            // slideChangeTransitionEnd: function(){ 
            //     swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            //     //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
            // } 
            // }
        })


    </script>
</body>
</html>

0 学习 · 6815 问题

查看课程

相似问题

用的官网的源码，但是没有实现覆盖效果，不知道为什么？

回答 1

看了一下官网swiper5的api文档，好像progress变成了每个slider的进度

回答 1

老师，好难啊，只有覆盖效果实现了

回答 1

老师您好帮我看看效果吧

回答 1

覆盖效果js部分

回答 1

打开慕课网App查看更多内容