Un control deslizante es un conjunto de fotogramas en una secuencia que se puede recorrer respectivamente. Este artículo muestra el enfoque para crear una presentación de diapositivas con el uso de solo HTML y CSS.
Al principio, ingrese el código HTML básico y luego agregue los botones de radio para los marcos usando el tipo como radio. Después de eso, implemente los diseños de marcos en una secuencia. Con la ayuda de margin-left, los marcos se pueden ajustar y atravesar usando botones de radio y etiquetas de controles. En los marcos también se puede incluir la imagen en lugar del texto. Por esto, el navegador consume menos memoria y consume menos poder computacional.
Dado un documento HTML y CSS para crear un control deslizante.
Primera sección: esta sección contiene la parte HTML de la página. Las diapositivas a mostrar se definen con su correspondiente texto.
Código HTML:
HTML
<!DOCTYPE html> <html> <body> <div id="frame"> <input type="radio" name="frame" id="frame1" checked /> <input type="radio" name="frame" id="frame2" /> <input type="radio" name="frame" id="frame3" /> <input type="radio" name="frame" id="frame4" /> <div id="slides"> <div id="overflow"> <div class="inner"> <div class="frame frame_1"> <div class="frame-content"> <h2>Slide 1</h2> </div> </div> <div class="frame frame_2"> <div class="frame-content"> <h2>Slide 2</h2> </div> </div> <div class="frame frame_3"> <div class="frame-content"> <h2>Slide 3</h2> </div> </div> <div class="frame frame_4"> <div class="frame-content"> <h2>Slide 4</h2> </div> </div> </div> </div> </div> <div id="controls"> <label for="frame1"></label> <label for="frame2"></label> <label for="frame3"></label> <label for="frame4"></label> </div> <div id="bullets"> <label for="frame1"></label> <label for="frame2"></label> <label for="frame3"></label> <label for="frame4"></label> </div> </div> </body> </html>
Segunda Sección: Esta sección consta de todo el estilo que se usaría para hacer la presentación de diapositivas. La animación que se usará para mover cada una de las diapositivas se define configurando la propiedad margin-left según sea necesario para cada diapositiva. Esto le da una apariencia de transición suave entre cada una de las diapositivas.
Código CSS:
CSS
#frame {
margin: 0 auto;
width: 800px;
max-width: 100%;
text-align: center;
}
#frame input[type=radio] {
display: none;
}
#frame label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
border: 5px solid #0F0;
background: #00F;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#frame1:checked~#slides .inner {
margin-left: 0;
}
#frame2:checked~#slides .inner {
margin-left: -100%;
}
#frame3:checked~#slides .inner {
margin-left: -200%;
}
#frame4:checked~#slides .inner {
margin-left: -300%;
}
#slides .inner {
transition: margin-left 800ms
cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 300px;
}
#slides .frame {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #FFF;
}
#slides .frame_1 {
background: #90C;
}
#slides .frame_2 {
background: #F90;
}
#slides .frame_3 {
background: #606;
}
#slides .frame_4 {
background: #C00;
}
#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(4),
#frame4:checked~#controls label:nth-child(1) {
background:
url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
float: right;
margin: 0 -50px 0 0;
display: block;
}
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(4),
#frame4:checked~#controls label:nth-last-child(1) {
background:
url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#frame1:checked~#bullets label:nth-child(1),
#frame2:checked~#bullets label:nth-child(2),
#frame3:checked~#bullets label:nth-child(3),
#frame4:checked~#bullets label:nth-child(4) {
background: #444;
}
@media screen and (max-width: 900px) {
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(4),
#frame4:checked~#controls label:nth-child(1),
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(4),
#frame4:checked~#controls label:nth-last-child(1) {
margin: 0;
}
#slides {
max-width: calc(100% - 140px);
margin: 0 auto;
}
}
Código completo: aquí combinaremos las dos secciones anteriores en una sola para lograr la tarea mencionada.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#frame {
margin: 0 auto;
width: 800px;
max-width: 100%;
text-align: center;
}
#frame input[type=radio] {
display: none;
}
#frame label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
border: 5px solid #0F0;
background: #00F;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#frame1:checked~#slides .inner {
margin-left: 0;
}
#frame2:checked~#slides .inner {
margin-left: -100%;
}
#frame3:checked~#slides .inner {
margin-left: -200%;
}
#frame4:checked~#slides .inner {
margin-left: -300%;
}
#slides .inner {
transition: margin-left 800ms
cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 300px;
}
#slides .frame {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #FFF;
}
#slides .frame_1 {
background: #90C;
}
#slides .frame_2 {
background: #F90;
}
#slides .frame_3 {
background: #606;
}
#slides .frame_4 {
background: #C00;
}
#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(4),
#frame4:checked~#controls label:nth-child(1) {
background:
url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
float: right;
margin: 0 -50px 0 0;
display: block;
}
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(4),
#frame4:checked~#controls label:nth-last-child(1) {
background:
url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#frame1:checked~#bullets label:nth-child(1),
#frame2:checked~#bullets label:nth-child(2),
#frame3:checked~#bullets label:nth-child(3),
#frame4:checked~#bullets label:nth-child(4) {
background: #444;
}
@media screen and (max-width: 900px) {
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(4),
#frame4:checked~#controls label:nth-child(1),
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(4),
#frame4:checked~#controls label:nth-last-child(1) {
margin: 0;
}
#slides {
max-width: calc(100% - 140px);
margin: 0 auto;
}
}
</style>
</head>
<body>
<div id="frame">
<input type="radio" name="frame" id="frame1" checked />
<input type="radio" name="frame" id="frame2" />
<input type="radio" name="frame" id="frame3" />
<input type="radio" name="frame" id="frame4" />
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="frame frame_1">
<div class="frame-content">
<h2>Slide 1</h2>
</div>
</div>
<div class="frame frame_2">
<div class="frame-content">
<h2>Slide 2</h2>
</div>
</div>
<div class="frame frame_3">
<div class="frame-content">
<h2>Slide 3</h2>
</div>
</div>
<div class="frame frame_4">
<div class="frame-content">
<h2>Slide 4</h2>
</div>
</div>
</div>
</div>
</div>
<div id="controls">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
<label for="frame4"></label>
</div>
<div id="bullets">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
<label for="frame4"></label>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por kunaljain2608 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA