Un control deslizante es una serie de imágenes que aparecen en secuencia. Ahora, veremos un control deslizante de imagen que funciona con botones de radio usando HTML y CSS en el que la imagen se desliza hacia arriba al hacer clic en el botón de radio.
Acercarse:
- La propiedad de los botones de radio es solo un botón de radio en un grupo que se puede seleccionar al mismo tiempo.
- Usaremos botones de radio para seleccionar la imagen que queremos ver desde el control deslizante de imágenes al otorgar una identificación única a cada botón de radio.
- A continuación, incrustaremos todas las imágenes una por una y crearemos etiquetas para las identificaciones de los botones de opción y aplicaremos las propiedades CSS necesarias para lograr el resultado deseado.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Image Slider</title>
<style>
/* CSS code */
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.slider {
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
}
.imgs_slides {
width: 500%;
height: 500px;
display: flex;
}
/* We have to set display: none;
If not, all of our images would
be visible at the same time */
.imgs_slides input {
display: none;
}
.slide {
width: 20%;
transition: 2s;
}
.slide img {
width: 800px;
height: 500px;
}
/* css for slide navigation */
.navigation {
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.navigation-btn {
border: 2px solid #de6a23;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.navigation-btn:not(:last-child) {
margin-right: 40px;
}
.navigation-btn:hover {
background: #de6a23;
}
/* The checked attribute is used with
reference to <input type="radio">,
when radio button is clicked the
class will shift w.r.t left margin
as mentioned which results in image
slider */
#radio1:checked~.first {
margin-left: 0;
}
#radio2:checked~.first {
margin-left: -20%;
}
#radio3:checked~.first {
margin-left: -40%;
}
#radio4:checked~.first {
margin-left: -60%;
}
#radio5:checked~.first {
margin-left: -80%;
}
</style>
<link rel="stylesheet" type="text/css"
href="styles.css" />
</head>
<body>
<center>
<!-- Image slider start -->
<div class="slider">
<div class="imgs_slides">
<!-- Radio buttons start -->
<input type="radio" name="radio-btn" id="radio1" />
<input type="radio" name="radio-btn" id="radio2" />
<input type="radio" name="radio-btn" id="radio3" />
<input type="radio" name="radio-btn" id="radio4" />
<input type="radio" name="radio-btn" id="radio5" />
<!-- Radio buttons end -->
<!-- Embedding images start -->
<div class="first slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210105130612/img1.PNG" />
</div>
<div class="slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210105130614/img2.PNG" />
</div>
<div class="slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210105130615/img3.PNG" />
</div>
<div class="slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210105130616/img4.PNG" />
</div>
<div class="slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210105130617/img5.PNG" />
</div>
<!-- Embedding images end -->
</div>
<!-- Navigation start -->
<div class="navigation">
<label for="radio1" class="navigation-btn">
</label>
<label for="radio2" class="navigation-btn">
</label>
<label for="radio3" class="navigation-btn">
</label>
<label for="radio4" class="navigation-btn">
</label>
<label for="radio5" class="navigation-btn">
</label>
</div>
<!-- Navigation end -->
</div>
<!-- Image slider end -->
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por poojavichare1810 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA