Como crear un Carousel Slider con Boostrap

Como crear un Carousel Slider con Boostrap

Existen diversas herramientas que permiten hacer un Slider como los plugins de JQquery. Pero hay formas más sencillas de realizar esto. Usando la herramienta Boostrap, se puede manipular o adaptar un Carousel Slider a nuestro antojo.

Antes de empezar con Bootstrap carrusel, incluya el inicio y su primera librería jQuery.

<!-- Compilado y minified Bootstrap CSS --> 
< enlace  rel = "stylesheet"  href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
 <!-- minified JS biblioteca --> 
< script de  src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" > </ script de >
 <!-- Compilado y minified bootstrap JavaScript --> 
< script de  src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > </ script de >

En nuestro código de ejemplo, trataremos de mostrar como puede ampliar la funcionalidad Carousel Bootstrap y crear los diferentes tipos de la barra deslizante.

En este ejemplo se crea un deslizador básica carrusel.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/image-1.jpg" alt="">
        </div>
        <div class="item">
            <img src="images/image-2.jpeg" alt="">
        </div>
        <div class="item">
            <img src="images/image-3.jpeg" alt="">
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Bootstrap Slider con subtítulos.

En el siguiente ejemplo se crea un Slider y añade subtítulos a las diapositivas.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/image-1.jpg" alt="">
        </div>
        <div class="item">
            <img src="images/image-2.jpeg" alt="">
        </div>
        <div class="item">
            <img src="images/image-3.jpeg" alt="">
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

En el siguiente código de ejemplo se hace un slider con controles personalizados.

<div id="myCarouselCustom" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarouselCustom" data-slide-to="0" class="active"></li>
        <li data-target="#myCarouselCustom" data-slide-to="1"></li>
        <li data-target="#myCarouselCustom" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/image-1.jpg" alt="">
            <div class="carousel-caption">
                <h3>First Slide</h3>
                <p>This is the first image slide</p>
            </div>
        </div>
  
        <div class="item">
            <img src="images/image-2.jpeg" alt="">
            <div class="carousel-caption">
                <h3>Second Slide</h3>
                <p>This is the second image slide</p>
            </div>
        </div>
        
        <div class="item">
            <img src="images/image-3.jpeg" alt="">
            <div class="carousel-caption">
                <h3>Third Slide</h3>
                <p>This is the third image slide</p>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!-- Custom Controls -->
<a href="javascript:void(0);" id="prevBtn">Prev Slide</a>
<a href="javascript:void(0);" id="nextBtn">Next Slide</a>

**Código JavaScript.**

<script type="text/javascript">
// Call carousel manually
$('#myCarouselCustom').carousel();

// Go to the previous item
$("#prevBtn").click(function(){
    $("#myCarouselCustom").carousel("prev");
});
// Go to the previous item
$("#nextBtn").click(function(){
    $("#myCarouselCustom").carousel("next");
});
</script>

Las siguientes opciones están disponibles para configurar Bootstrap Carrusel según sus necesidades.

  • interval (number) – Especifica la cantidad de tiempo de retraso entre el ciclismo automáticamente. Ajuste falsepara detener automáticamente el ciclismo. Tiempo de retardo predeterminado es de 5000milisegundos.
  • pause (string | null) – Hace una pausa en el ciclo de MouseEnter y reanuda el ciclo de mouseleave. Ajuste falsepara detener una pausa en bicicleta en vuelo estacionario. El valor por defecto es hover.
  • wrap (boolean) – Especifica si el carrusel debe ciclo continuo o parar en la última diapositiva. El valor por defecto es true.
  • keyboard (boolean) – Especifica si el carrusel debe reaccionar a eventos de teclado. El valor por defecto es true.

El siguiente ejemplo muestra cómo se puede especificar las opciones del Carousel.

<script type="text/javascript">
$('.carousel').carousel({
     interval: 8000,
     pause:true,
     wrap:false
});
</script>

Ver demo

Abimael Gutierrez P.

Abimael Gutierrez P.
Fundador de apdesc

Estilo Home de facebook usando HTML y CSS

Como crear un diseño web similar al home o incio de facebook usando HTML y CSS. En mi caso, hice lo siguiente. Crear un archivo HTML con el … Continuar leyendo

Estilo Home de facebook usando HTML y CSS

Publicado el 6 de Abril del 2017