carrusel de animaciones efectos en bootstrap

¿Hay algún otro defecto de animación se puede añadir en Bootstrap carrusel de otros que se deslice. En <div id="myCarousel" class="carousel slide" data-ride="carousel">
No quiero que el efecto de deslizamiento, ¿hay algún otro efecto que podemos añadir, sin necesidad de escribir ningún código adicional o efecto de animación.

InformationsquelleAutor prasad | 2017-02-18

1 Kommentar

  1. 5

    Podemos utilizar el efecto de atenuación de la otra que el efecto de slide, intente esto :

    CSS:

    .carousel-fade .carousel-inner .item {
      opacity: 0;
      -webkit-transition-property: opacity;
      -moz-transition-property: opacity;
      -o-transition-property: opacity;
      transition-property: opacity;
    }
    .carousel-fade .carousel-inner .active {
      opacity: 1;
    }
    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }
    .carousel-fade .carousel-inner .next.left,
    .carousel-fade .carousel-inner .prev.right {
      opacity: 1;
    }
    .carousel-fade .carousel-control {
      z-index: 2;
    }

    HTML:

    <div id="Carousel" class="carousel slide carousel-fade col-lg-8 col-offset-2">
            <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>
    
            <div class="carousel-inner">
                <div class="item active">
                    <img src="//placehold.it/1300x500" class="img-responsive">
                </div>
               <div class="item">
                 <img src="//placehold.it/1300x500/55EE55" class="img-responsive">
                </div>
               <div class="item">
                 <img src="//placehold.it/1300x500/CCFEFE" class="img-responsive">
                </div>
            </div>
    
            <a class="left carousel-control" href="#Carousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#Carousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
    </div>

    Echa un vistazo a estos : Ejemplo1 y Ejemplo2

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...