Un contenedor de presentación de diapositivas que recorre una lista de imágenes en una página web. El siguiente artículo lo guiará para implementar un control deslizante de imágenes usando HTML, CSS y jQuery. El control deslizante de imágenes de jQuery contiene imágenes que las ejecutan usando los iconos anterior y siguiente. Las flechas anterior y siguiente se utilizan para desplazarse hacia adelante y hacia atrás en el evento de desplazamiento del mouse sobre las imágenes. El siguiente código de ejemplo se implementa de una manera simple y flexible para mostrar las imágenes una por una en el carrusel usando HTML, CSS y jQuery. Realizaremos la tarea en dos secciones, primero crearemos la estructura por HTML, diseñaremos la estructura por CSS y la haremos interactiva por jQuery.
Creación de la estructura: en esta sección, crearemos la estructura del control deslizante de la imagen.
- Código HTML: HTML se utiliza para crear la estructura de un control deslizante de imagen.
html
<!DOCTYPE html> <html> <head> <title> How to Design Image Slider using jQuery ? </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <b> How to code Image Slider using jQuery </b> <br><br> </center> <!-- Image container of the image slider --> <div class="image-container"> <div class="slide"> <div class="slideNumber">1</div> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png"> </div> <div class="slide"> <div class="slideNumber">2</div> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png"> </div> <div class="slide"> <div class="slideNumber">3</div> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png"> </div> <!-- Next and Previous icon to change images --> <a class="previous" onclick="moveSlides(-1)"> <i class="fa fa-chevron-circle-left"></i> </a> <a class="next" onclick="moveSlides(1)"> <i class="fa fa-chevron-circle-right"></i> </a> </div> <br> <div style="text-align:center"> <span class="footerdot" onclick="activeSlide(1)"> </span> <span class="footerdot" onclick="activeSlide(2)"> </span> <span class="footerdot" onclick="activeSlide(3)"> </span> </div> </body> </html>
Estructura de diseño: aquí haremos la parte de diseño del control deslizante de la imagen usando CSS y haremos que el control deslizante sea interactivo usando jQuery.
- Código CSS: Diseño de la estructura en base a etiquetas y clases de todos los elementos.
CSS
<style>
img {
width: 100%;
}
.height {
height: 10px;
}
/* Image-container design */
.image-container {
max-width: 800px;
position: relative;
margin: auto;
}
.next {
right: 0;
}
/* Next and previous icon design */
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
padding: 10px;
margin-top: -25px;
}
/* caption decorate */
.captionText {
color: #000000;
font-size: 14px;
position: absolute;
padding: 12px 12px;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Slider image number */
.slideNumber {
background-color: #5574C5;
color: white;
border-radius: 25px;
right: 0;
opacity: .5;
margin: 5px;
width: 30px;
height: 30px;
text-align: center;
font-weight: bold;
font-size: 24px;
position: absolute;
}
.fa {
font-size: 32px;
}
.fa:hover {
transform: rotate(360deg);
transition: 1s;
color: white;
}
.footerdot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.5s ease;
}
.active,
.footerdot:hover {
background-color: black;
}
</style>
- Código jQuery: jQuery se utiliza para diseñar el control deslizante interactivo.
javascript
<script>
var slideIndex = 1;
displaySlide(slideIndex);
function moveSlides(n) {
displaySlide(slideIndex += n);
}
function activeSlide(n) {
displaySlide(slideIndex = n);
}
/* Main function */
function displaySlide(n) {
var i;
var totalslides =
document.getElementsByClassName("slide");
var totaldots =
document.getElementsByClassName("footerdot");
if (n > totalslides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = totalslides.length;
}
for (i = 0; i < totalslides.length; i++) {
totalslides[i].style.display = "none";
}
for (i = 0; i < totaldots.length; i++) {
totaldots[i].className =
totaldots[i].className.replace(" active", "");
}
totalslides[slideIndex - 1].style.display = "block";
totaldots[slideIndex - 1].className += " active";
}
</script>
Solución completa: en esta sección, combinaremos las secciones anteriores para formar un control deslizante de imagen.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to Design Image
Slider using jQuery ?
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
img {
width: 100%;
}
.height {
height: 10px;
}
/* Image-container design */
.image-container {
max-width: 800px;
position: relative;
margin: auto;
}
.next {
right: 0;
}
/* Next and previous icon design */
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
padding: 10px;
margin-top: -25px;
}
/* caption decorate */
.captionText {
color: #000000;
font-size: 14px;
position: absolute;
padding: 12px 12px;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Slider image number */
.slideNumber {
background-color: #5574C5;
color: white;
border-radius: 25px;
right: 0;
opacity: .5;
margin: 5px;
width: 30px;
height: 30px;
text-align: center;
font-weight: bold;
font-size: 24px;
position: absolute;
}
.fa {
font-size: 32px;
}
.fa:hover {
transform: rotate(360deg);
transition: 1s;
color: white;
}
.footerdot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.5s ease;
}
.active,
.footerdot:hover {
background-color: black;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<b>
How to code Image
Slider using jQuery
</b>
<br><br>
</center>
<!-- Image container of the image slider -->
<div class="image-container">
<div class="slide">
<div class="slideNumber">1</div>
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png">
</div>
<div class="slide">
<div class="slideNumber">2</div>
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png">
</div>
<div class="slide">
<div class="slideNumber">3</div>
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png">
</div>
<!-- Next and Previous icon to change images -->
<a class="previous" onclick="moveSlides(-1)">
<i class="fa fa-chevron-circle-left"></i>
</a>
<a class="next" onclick="moveSlides(1)">
<i class="fa fa-chevron-circle-right"></i>
</a>
</div>
<br>
<div style="text-align:center">
<span class="footerdot"
onclick="activeSlide(1)">
</span>
<span class="footerdot"
onclick="activeSlide(2)">
</span>
<span class="footerdot"
onclick="activeSlide(3)">
</span>
</div>
<script>
var slideIndex = 1;
displaySlide(slideIndex);
function moveSlides(n) {
displaySlide(slideIndex += n);
}
function activeSlide(n) {
displaySlide(slideIndex = n);
}
/* Main function */
function displaySlide(n) {
var i;
var totalslides =
document.getElementsByClassName("slide");
var totaldots =
document.getElementsByClassName("footerdot");
if (n > totalslides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = totalslides.length;
}
for (i = 0; i < totalslides.length; i++) {
totalslides[i].style.display = "none";
}
for (i = 0; i < totaldots.length; i++) {
totaldots[i].className =
totaldots[i].className.replace(" active", "");
}
totalslides[slideIndex - 1].style.display = "block";
totaldots[slideIndex - 1].className += " active";
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA