Lorem ipsum 1
Paisaje 1
Lorem ipsum 2
Paisaje 2
Lorem ipsum 3
Paisaje 3
Lorem ipsum 4
Paisaje 4
Lorem ipsum 5
Paisaje 5
Lorem ipsum 6
Paisaje 6
«Modelo 1: Carrousel con 6 Imágenes»
Un "carrousel" es una componente que muestra un conjunto de diapositivas (imágenes generalmente), avanza en forma automática cada diapositiva y luego de la última pasa a mostrar la primera.
Requiere tanto de CSS como Javascript. El Ejemplo para este Model 1 proviene de la página identificada en el enlace Nro. 1 (ver fuentes consultadas).
Un carrusel constituye un medio de diversión consistente en una plataforma rotatoria con asientos para los pasajeros. Tradicionalmente los asientos poseen formas de caballos de madera u otros animales, los cuales en muchos casos son desplazados mecánicamente hacia arriba para simular el galope de un caballo. Normalmente, la música se repite mientras el carrusel da vueltas.
Cualquier plataforma rotatoria también se puede llamar carrusel. En términos informáticos o, más concretamente, en el desarrollo Web, el concepto carrusel también está muy presente. Muchas páginas Webs tienen uno y se utilizan principalmente para mostrar publicidad en formato imagen o texto con el principal objetivo de destacar contenido y/o llamar la atención del usuario con su movimiento.
Debido a que este tipo de elementos es muy utilizando hoy en día, en este artículo vamos a ver como crear un carrousel con contenido HTML que está a la espera de que el usuario haga clic en las flechas que aparecen en los laterales del carrousel para pasar al resto de contenido no visible.
Tal como se aprecia en el Modelo 1 está compuesto por elementos que tienen una foto, título y precio. Esto es un ejemplo. Teniendo la posibilidad de agregar contenido HTML, se puede incrustar cualquier tipo de código en cada elemento.
Podemos opcionalmente activar dos botones a izquierda y derecha para que el usuario pueda retroceder o avanzar diapositivas
Para obtener este carrousel en el cuerpo de la página o dentro de la etiqueta <body> puedes agregar un código similar al siguiente:
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="container">
<ol>
<li> <a href="https://anatomiadelasciberpaginas.blogspot.com"> Blog </a> </li>
<li> <a href="https://anatomiadelasciberpaginas.blogspot.com/2022/02/mis-notas-sobre-el-carrousel-de.html#codesyntax_1">Tutorial </a> </li>
</ol>
<div class="row">
<div id="content" class="col-lg-12">
<div id="carrusel">
<a href="#" class="left-arrow"><img src="https://www.jose-aguilar.com/scripts/jquery/carrousel-html/images/left-arrow.png" /></a>
<a href="#" class="right-arrow"><img src="https://www.jose-aguilar.com/scripts/jquery/carrousel-html/images/right-arrow.png" />></a>
<div class="carrusel">
<div class="product" id="product_0">
<img src="https://www.xtrafondos.com/thumbs/1_476.jpg" width="195" height="100" />
<h5> Lorem ipsum 1 </h5>
<p>Paisaje 1 </p>
</div>
<div class="product" id="product_1">
<img src="https://www.xtrafondos.com/thumbs/1_4795.jpg" width="195" height="100" />
<h5>Lorem ipsum 2</h5>
<p>Paisaje 2 </p>
</div>
<div class="product" id="product_2">
<img src="https://www.xtrafondos.com/thumbs/1_1761.jpg" width="195" height="100" />
<h5> Lorem ipsum 3 </h5>
<p>Paisaje 3 </p>
</div>
<div class="product" id="product_3">
<imgsrc="https://www.xtrafondos.com/thumbs/1_8290.jpg" width="195" height="100" />
<h5> Lorem ipsum 4 </h5>
<p>Paisaje 4 </p>
</div>
<div class="product" id="product_4">
<img src="https://www.xtrafondos.com/thumbs/1_6908.jpg" width="195" height="100" />
<h5> Lorem ipsum 5 </h5>
<p>Paisaje 5 </p>
</div>
<div class="product" id="product_5">
<img src="https://www.xtrafondos.com/wallpapers/resized/paisaje-digital-en-atardecer-5846.jpg?s=large" width="195" height="100" />
<h5> Lorem ipsum 6 </h5>
<p>Paisaje 4 </p>
</div>
</div>
</div>
</div>
</div>
En cabecera de la página o dentro de la etiqueta <head> agrega el código jQuery que permite el dinamismo:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
var current = 0;
var imagenes = new Array();
$(document).ready(function() {
var numImages = 6;
if (numImages <= 3) {
$('.right-arrow').css('display', 'none');
$('.left-arrow').css('display', 'none');
}
$('.left-arrow').on('click',function() {
if (current > 0) {
current = current - 1;
} else {
current = numImages - 3;
}
$(".carrusel").animate({"left": -($('#product_'+current).position().left)}, 600);
return false;
});
$('.left-arrow').on('hover', function() {
$(this).css('opacity','0.5');
}, function() {
$(this).css('opacity','1');
});
$('.right-arrow').on('hover', function() {
$(this).css('opacity','0.5');
}, function() {
$(this).css('opacity','1');
});
$('.right-arrow').on('click', function() {
if (numImages > current + 3) {
current = current+1;
} else {
current = 0;
}
$(".carrusel").animate({"left": -($('#product_'+current).position().left)}, 600);
return false;
});
});
</script>
El código anterior también puede ser agregado dentro del cuerpo de la página, justo antes de la etiqueta de cierre.
En él estamos controlando el evento clic de las flechas derecha e izquierda para mover con animación los elementos del carrusel.
Finalmente, faltan agregar algunas reglas de estilo para definir el diseño del carrusel que puedes agregar en tu hoja de estilos CSS:
#carrusel {
float:left;
width:600px;
overflow:hidden;
height:203px;
position:relative;
margin-top:20px;
margin-bottom:20px;
}
#carrusel .left-arrow {
position:absolute;
left:10px;
z-index:1;
top:50%;
margin-top:-9px;
}
#carrusel .right-arrow {
position:absolute;
right:10px;
z-index:1;
top:50%;
margin-top:-9px;
}
.carrusel {
width:4000px;
left:0px;
position:absolute;
z-index:0;
}
.carrusel>div {
float: left;
height: 203px;
margin-right: 5px;
width: 195px;
text-align:center;
}
.carrusel img {
cursor:pointer;
}
.product {
border:#CCCCCC 1px solid;
}Bien es cierto que existen una infinidad de plugins para agregar un carrusel en tu sitio Web pero, en la mayoría de los casos, quizá tienen demasiadas opciones que con frecuencia no sabes manejar o se requieren de mucho espacio en el servidor para depositar sus archivos. Este código es muy simple y liviano. Se puede personalizar fácilmente si tienes conocimientos avanzados sobre jQuery.
Para adaptar este código a los dispositivos pequeños es posible utilizar media queries.
«Modelo 2: Carrousel con 3 Imágenes e indicador»
Podemos además insertar en nuestro carrousel, unos pequeños indicadores para elegir cualquiera de las imágenes. Es lo que se ejemplifica de seguido.
El Ejemplo para este Model 1 proviene de la página identificada en el enlace Nro. 2 (ver fuentes consultadas).
<div class="container">
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<lidata-target="#carousel1" data-slide-to="2"></li>
</ol>
<!-- diapositivas -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.xtrafondos.com/thumbs/1_476.jpg" width="795" height="400" />
<div class="carousel-caption">
<h3>título 1</h3>
<p>Descripción de la imagen. </p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.xtrafondos.com/thumbs/1_4795.jpg" width="795" height="400" />
<div class="carousel-caption">
<h3>título 2</h3>
<p>Descripción de la imagen.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.xtrafondos.com/thumbs/1_6908.jpg" width="795" height="400" />
<div class="carousel-caption">
<h3>título 3</h3>
<p>Descripción de la imagen.</p>
</div>
</div>
</div>
<!-- botones de desplazamiento a izquierda y derecha -->
<a class="carousel-control-prev" href="#carousel1" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous </span>
<a>
<a class="carousel-control-next" href="#carousel1" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">>/span>
<span class="sr-only"> Next </span>
</a>
</div>
</div>
Antes de </head> debes insertar lo siguiente:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Antes de </body> debes insertar lo siguiente:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> </script>
«Modelo 3: Carrousel con efecto Zoom»
El modelo 3, ademas de la flecha y botones indicadores, suma un nuevo efecto. el zoom. El Ejemplo proviene de la página identificada en el enlace Nro. 3 (ver fuentes consultadas). Fue elaborado con HTML y CSS (sin Javascript) de una forma muy sencilla y rápida y se aprecia a continuación:
<div class="slide">
<div class="slide-inner">
<input class="slide-open" type="radio" id="slide-1"
name="slide" aria-hidden="true" hidden="" checked="checked">
<div class="slide-item">
<img src="https://www.xtrafondos.com/thumbs/1_1761.jpg" width="695" height="500" />
</div>
<img src="https://www.xtrafondos.com/thumbs/1_6908.jpg" width="695" height="500" />
</div>
<input class="slide-open" type="radio" id="slide-3"
name="slide" aria-hidden="true" hidden="">
<div class="slide-item">
<img src="https://www.xtrafondos.com/wallpapers/resized/paisaje-digital-en-atardecer-5846.jpg?s=large" width="695" height="500" />
</div>
<label for="slide-3" class="slide-control prev control-1"> ‹ </label>
<label for="slide-2" class="slide-control next control-1"> ‹ </label>
<label for="slide-1" class="slide-control prev control-2"> ‹ </label>
<label for="slide-3" class="slide-control next control-2"> ‹ </label>
<label for="slide-2" class="slide-control prev control-3"> ‹ </label>
<label for="slide-1" class="slide-control next control-3"> ‹ </label>
<ol class="slide-indicador">
<li>
<label for="slide-1" class="slide-circulo">•</label>
</li>
<li>
<label for="slide-2" class="slide-circulo">•</label>
</li>
<li>
<label for="slide-3" class="slide-circulo">•</label>
</li>
</ol>
</div>
</div>
.slide {
position: relative;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
margin-top: 26px;
}
.slide-inner {
position: relative;
overflow: hidden;
width: 100%;
height: calc( 300px + 3em);
}
.slide-open:checked + .slide-item {
position: static;
opacity: 100;
}
.slide-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
.slide-item img {
display: block;
height: auto;
max-width: 100%;
}
.slide-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.slide-control.prev {
left: 2%;
}
.slide-control.next {
right: 2%;
}
.slide-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}
#slide-1:checked ~ .control-1,
#slide-2:checked ~ .control-2,
#slide-3:checked ~ .control-3 {
display: block;
}
.slide-indicador {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.slide-indicador li {
display: inline-block;
margin: 0 5px;
}
.slide-circulo {
color: #828282;
cursor: pointer;
display: block;
font-size: 35px;
}
.slide-circulo:hover {
color: #aaaaaa;
}
#slide-1:checked ~ .control-1 ~ .slide-indicador
li:nth-child(1) .slide-circulo,
#slide-2:checked ~ .control-2 ~ .slide-indicador
li:nth-child(2) .slide-circulo,
#slide-3:checked ~ .control-3 ~ .slide-indicador
li:nth-child(3) .slide-circulo {
color: #428bca;
}
#titulo {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33),
-1px 0px 2px rgba(255, 255, 255, 0);
}
