专栏首页前端开发随笔swiper.animate实现轮播展示动画效果

swiper.animate实现轮播展示动画效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.4.1/css/swiper.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            position: relative;
            width: 100%;
            height: 100%;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%);
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img class="ani" swiper-animate-effect="fadeInUp"
                    src="https://sucai.suoluomei.cn/sucai_zs/images/20191110135715-b7.jpg" alt="">
                <div class="ani text" swiper-animate-effect="fadeInUp">第一第一文字占位</div>
            </div>
            <div class="swiper-slide">
                <img class="ani" swiper-animate-effect="fadeInUp"
                    src="https://sucai.suoluomei.cn/sucai_zs/images/20191231093620-1.jpg" alt="">
                <div class="ani text" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s"
                    swiper-animate-delay="1s">第二第二文字占位</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/4.4.1/js/swiper.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/swiper.animate/1.0.3/1.0.3.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            preventInteractionOnTransition: true,
            on: {
                init: function () {
                    swiperAnimateCache(this);
                    swiperAnimate(this);
                },
                slideChangeTransitionEnd: function () {
                    swiperAnimate(this);
                }
            }
        })
    </script>
</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue里v-for循环双层数组

    任我行RQ
  • Css实现内容溢出添加横向滚动条

    任我行RQ
  • animate.css+wow.js实现网页动画

    任我行RQ
  • 使用 swiper 轮播插件遇到的问题及解决方法

    我只是记录一下我在使用过程中遇到的几个属性,详细API大家可以直接去官网查看:Swiper4.x使用方法

    德顺
  • Swiper如何快速上手?

    Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。

    Javanx
  • vue中使用swiper-slide时,循环轮播失效?

      vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了???

    Dawnzhang
  • vue散碎知识点学习

    为了解决方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

    老梁
  • ACCESS数据库基本使用

    用户1112962
  • 【JavaScript小项目】轮播图

    efonfighting
  • 在项目中使用 vue-awesome-swiper 遇到的问题

    最近做的商城项目需要在首页展示一个轮播图,秉承着“有现成轮子就绝不自己写”(其实是懒和菜)的想法,在网上搜索了一下,最后选择使用 vue-awesome-swi...

    Chor

扫码关注云+社区

领取腾讯云代金券