zoukankan      html  css  js  c++  java
  • 实现Bootstrap Carousel Fade Transition 淡入淡出效果

    html代码:

    <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
        <a class="carousel-control right" href="#carousel" data-slide="next">›</a>
    </div>
    

    Less代码:

    .carousel-fade {
        .carousel-inner {
            .item {
                transition-property: opacity;
            }
            
            .item,
            .active.left,
            .active.right {
                opacity: 0;
            }
    
            .active,
            .next.left,
            .prev.right {
                opacity: 1;
            }
            .next,
            .prev,
            .active.left,
            .active.right {
                left: 0;
                transform: translate3d(0, 0, 0);
            }
        }
        .carousel-control {
            z-index: 2;
        }
    }
    html, 
    body, 
    .carousel, 
    .carousel-inner, 
    .carousel-inner .item {
        height: 100%;
    }
    .item:nth-child(1) {
        background: #74C390;
    }
    .item:nth-child(2) {
        background: #51BCE8;
    }
    .item:nth-child(3) {
        background: #E46653;
    }
    

    js调用代码

    $('.carousel').carousel();
    

      

    实际是重写了carousel的样式,实现淡入淡出效果

    演示地址:http://codepen.io/Rowno/pen/Afykb

  • 相关阅读:
    【转】java内存溢出的场景及解决办法
    系统架构
    【转】Linux tar命令详解
    【转】Java 开发必会的 Linux 命令
    【转】ps命令详解与使用
    【转】Linux命令:ps -ef |grep java
    linux grep命令详解
    【springcloud】Zuul 超时、重试、并发参数设置
    【springcloud】常见面试题总结
    php的函数应用
  • 原文地址:https://www.cnblogs.com/lfm601508022/p/5489218.html
Copyright © 2011-2022 走看看