Un “control deslizante”, como en un grupo de cuadros en una fila entre los que puede navegar. Sabes lo que es un control deslizante. Hay muchas funciones que quizás desee en un control deslizante. Solo como un ejemplo, es posible que desee que el control deslizante se deslice o se desplace. O es posible que no desee eso y que el control deslizante solo responda al hacer clic o los botones que se pueden tocar que navegan a las diapositivas. O puede que desee ambos. O quizás quieras combinar todo eso con la reproducción automática.
Voy a seguir adelante y decir que los controles deslizantes son un componente de la interfaz de usuario lo suficientemente complicados como para usar JavaScript territorio. Flickity es un buen ejemplo. También diría que puede llegar bastante lejos con un control deslizante funcional de aspecto agradable con HTML y CSS solo. Comenzar de esa manera hace que JavaScript sea más fácil y, me atrevo a decir, un ejemplo decente de mejora progresiva.
Consideremos primero el marcado semántico.
Un montón de cajas probablemente sea tan simple como:
<div class="slider">
<div class="slide" id="slide-1"></div>
<div class="slide" id="slide-2"></div>
<div class="slide" id="slide-3"></div>
<div class="slide" id="slide-4"></div>
<div class="slide" id="slide-5"></div>
</div>Con un puñado de líneas de CSS, podemos colocarlas una al lado de la otra y dejar que se desplacen.
.slider {
width: 300px;
height: 300px;
display: flex;
overflow-x: auto;
}
.slide {
width: 300px;
flex-shrink: 0;
height: 100%;
}
También podría hacer que se deslice suavemente en los navegadores móviles basados en WebKit.
.slider {
...
-webkit-overflow-scrolling: touch;
}
¡Podemos hacerlo aún mejor!
Hagamos que cada diapositiva encaje en su lugar con puntos de ajuste.
¡Esto ha cambiado un poco desde la publicación original! Estoy actualizando los bloques de código a continuación.
.slider {
...
/* CURRENT way. */
scroll-snap-type: x mandatory;
/* OLD WAY. Probably not worth including at all.
-webkit-scroll-snap-points-x: repeat(300px);
-ms-scroll-snap-points-x: repeat(300px);
scroll-snap-points-x: repeat(300px);
-webkit-scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
*/
}
.slides > div {
/* CURRENT way. */
scroll-snap-align: start;
}Mira cuánto mejor está ahora:
Enlaces de salto
Un control deslizante probablemente tiene una pequeña interfaz de usuario para saltar a una diapositiva específica, así que hagámoslo también semánticamente, con enlaces de anclaje que salten a la diapositiva correcta:
<div class="slide-wrap">
<a href="https://css-tricks.com/can-get-pretty-far-making-slider-just-html-css/#slide-1">1</a>
<a href="#slide-2">2</a>
<a href="#slide-3">3</a>
<a href="#slide-4">4</a>
<a href="#slide-5">5</a>
<div class="slider">
<div class="slide" id="slide-1">1</div>
<div class="slide" id="slide-2">2</div>
<div class="slide" id="slide-3">3</div>
<div class="slide" id="slide-4">4</div>
<div class="slide" id="slide-5">5</div>
</div>
</div>Anclar enlaces que en realidad se comportan como un enlace a contenido relacionado y semántico y accesible para que no haya problemas (no dude en corregirme si me equivoco).
Modifiquemos un poco las cosas … y tenemos algunos botones que hacen su trabajo:
Tanto en computadoras de escritorio como en dispositivos móviles, también podemos asegurarnos de que obtengamos una acción de deslizamiento suave.
.slides {
...
scroll-behavior: smooth;
}¿Quizás solo mostraríamos los botones en situaciones sin un buen deslizamiento rápido?
Si el navegador admite scroll-snap-type, tiene un buen deslizamiento rápido. Podríamos ocultar los botones si quisiéramos:
@supports (scroll-snap-type) {
.slider > a {
display: none;
}
}¿Necesitas hacer algo especial con la diapositiva “activa”?
Podríamos usar :target para eso. Cuando se hace clic en uno de los botones para navegar por las diapositivas, la URL cambia a ese #hash, y es entonces cuando :target Toma efecto. Entonces:
.slides > div:target {
transform: scale(0.8);
}
Hay una manera de construir esta diapositiva con el truco de la casilla de verificación también, y aún así hacer cosas de “diapositiva activa” con :checked, pero podría argumentar que eso es un poco menos semántico y accesible.
Aquí es donde estamos hasta ahora.
Ver la pluma
Control deslizante Real Simple de Chris Coyier (@chriscoyier)
en CodePen.
Aquí es donde las cosas se rompen un poco.
Utilizando :target es un buen truco, pero no funciona, por ejemplo, cuando la página se carga sin un hash. O si el usuario se desplaza o se desplaza por su cuenta sin usar los botones. Ambos no creo que haya ninguna forma de evitar esto solo con HTML y CSS, ni creo que eso sea completamente una falla de HTML y CSS. Es el tipo de función para la que sirve JavaScript.
JavaScript puede averiguar qué es la diapositiva activa. JavaScript puede configurar la diapositiva activa. Probablemente valga la pena echarle un vistazo a la API de Intersection Observer.
¿Cuáles son más limitaciones?
Aproximadamente hemos aprovechado lo que HTML y CSS por sí solos pueden hacer aquí.
- ¿Quieres poder mover con un mouse? Ese no es un comportamiento del mouse, por lo que deberá hacer todo eso con eventos DOM. Cualquier tipo de comportamiento interactivo exótico (por ejemplo, física) requerirá JavaScript. Aunque hay un truco extraño para cambiar el desplazamiento vertical por horizontal.
- ¿Quiere saber cuándo se cambia una diapositiva? ¿Como una devolución de llamada? Ese es el territorio de JavaScript.
- ¿Necesitas reproducción automática? Es posible que pueda hacer algo rudimentario con una casilla de verificación,
:checked, y controlando elanimation-play-statede un@keyframesanimación, pero se sentirá limitado y chiflado. - ¿Quiere que se desplace infinitamente en una dirección, repitiendo según sea necesario? Eso requerirá clonar y mover cosas en el DOM. O tal vez un mal uso de
<marquee>.
Te dejo con esos. Mi punto es solo que hay muchas cosas que puede hacer antes de necesitar JavaScript. Comenzar con una base tan fuerte podría ser un camino a seguir que proporciona una alternativa feliz, independientemente de lo que hagas sobre ella.