¿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 Comentario

  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

Dejar respuesta

Please enter your comment!
Please enter your name here