🥇 ▷ Crear un control deslizante con CSS puro

Sé lo que estás pensando. “¿Qué quieres decir con crear un control deslizante solo con CSS? ¿Seguramente necesitas JavaScript para controlar el comportamiento del control deslizante?”

En realidad, hay una manera inteligente de hacer esto con CSS puro y ni una sola línea de JS. Y sí, ¡eso incluye botones de navegación y migas de pan!

Echa un vistazo rápido al resultado que obtendremos:

ver la pluma
en CódigoPen.

Sigue leyendo para saber cómo…

Paso 1: crea tu diseño de control deslizante

Primero debe crear un espacio para que entre su control deslizante y, por supuesto, ¡algunas diapositivas!

<div class="slider-container">
<div class="slider">
<div class="slides">
<div id="slides__1" class="slide">
<span class="slide__text">1</span>
</div>
<div id="slides__2" class="slide">
<span class="slide__text">2</span>
</div>
<div id="slides__3" class="slide">
<span class="slide__text">3</span>
</div>
<div id="slides__4" class="slide">
<span class="slide__text">4</span>
</div>
</div>
</div>
</div>

Así que aquí tenemos:

slider-container es solo el elemento en su sitio en el que desea que entre el control deslizante.
El control deslizante es como la ‘pantalla’ o la ventana gráfica que mostrará todas las diapositivas.
slides mantendrá tus diapositivas. Este es el elemento que realmente se desplaza para dar el efecto de control deslizante.
diapositiva es cada diapositiva individual. Tenga en cuenta que necesita la clase de diapositiva y una identificación única para cada una.

Entonces necesitamos el CSS:


.slider-container {
background: linear-gradient(149deg, rgb(247, 0, 255) 0%, rgb(255, 145, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}.slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
position: relative;
}

slider-container puede ser cualquier cosa: acabo de usar un flexbox para que sea más fácil centrar el control deslizante. Pero si lo prefieres, puedes usar CSS Grid (es una cuestión de preferencias, como explicamos en este artículo CSS Grid Vs. Flexbox)

el control deslizante simplemente establece el tamaño de su control deslizante; puede ajustarlo para satisfacer sus necesidades.

A continuación, diseñaremos el elemento de diapositivas:

.slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}

Bien, aquí es donde sucede la magia. Si configuramos overflow-x para desplazarse, solo se podrá acceder a todo lo que no encaje en nuestra ventana de control deslizante mediante el desplazamiento.

Establecer el comportamiento de desplazamiento en suave y el tipo de ajuste de desplazamiento en x obligatorio significa que si hacemos un enlace de salto a cualquier elemento secundario de las diapositivas, el navegador se desplazará hacia él sin problemas, en lugar de simplemente saltar inmediatamente a ese elemento.

Correcto, a continuación, apliquemos estilo a las diapositivas:

.slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}


	
  



	
  



.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
scroll-snap-align: center;
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}

Haga coincidir el tamaño de la diapositiva para que sea el mismo que el control deslizante. Las tres propiedades finales, transform-origin, transform y scroll-snap-align, son clave. Esto asegura que cuando hagamos un enlace de salto a cualquier diapositiva en particular, la diapositiva se ‘encajará’ en el medio de la ventana de visualización del control deslizante.

Bien, hasta ahora tenemos esto:

ver la pluma
en CódigoPen.

Si hace clic dentro del control deslizante y luego presiona las teclas de flecha, verá el comportamiento suave de desplazamiento y ajuste en acción.

¡Pero, por supuesto, no queremos que nuestros usuarios tengan que hacer esto! En su lugar, queremos poner algunos botones de navegación en el control deslizante, ¡y probablemente también deberíamos deshacernos de esa barra de desplazamiento!

En el HTML, agregué dos elementos a cada diapositiva:

<div class="slider-container">
<div class="slider">
<div class="slides">
<div id="slides__1" class="slide">
<span class="slide__text">1</span>
<a class="slide__prev" href="#slides__4" title="Next"></a>
<a class="slide__next" href="#slides__2" title="Next"></a>
</div>
<div id="slides__2" class="slide">
<span class="slide__text">2</span>
<a class="slide__prev" href="#slides__1" title="Prev"></a>
<a class="slide__next" href="#slides__3" title="Next"></a>
</div>
<div id="slides__3" class="slide">
<span class="slide__text">3</span>
<a class="slide__prev" href="#slides__2" title="Prev"></a>
<a class="slide__next" href="#slides__4" title="Next"></a>
</div>
<div id="slides__4" class="slide">
<span class="slide__text">4</span>
<a class="slide__prev" href="#slides__3" title="Prev"></a>
<a class="slide__next" href="#slides__1" title="Prev"></a>
</div>
</div>
</div>
</div>

Tenga en cuenta que:

El que va hacia atrás tiene la clase slide__prev, y el que va hacia adelante tiene la clase slide__next.
el href contiene el enlace de salto a la diapositiva a la que queremos movernos. Tienes que configurarlos manualmente.

Ahora para el css:

.slide a {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}a.slide__prev {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 5%;
}



	
  



	
  



a.slide__next{
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 5%;
}

Puede diseñar y colocar estos botones como desee: he elegido que las flechas apunten en cada dirección. A veces, la opción simple es la mejor, ¡pero puedes hacer tu propia elección!

.slider {
width: 600px;
height: 400px;
text-align: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}

… simplemente agregue desbordamiento: oculto; a .slider. Esto también pone en juego el radio del borde.

Eso nos da esto:

ver la pluma
en CódigoPen.

Está bien, bastante bien, pero idealmente no queremos que los botones estén bloqueados en cada diapositiva. Los controles deslizantes suelen tener botones fijos en su lugar.

Pero, ¿es eso posible con CSS?

¡Porque?, si!

No necesitamos cambiar el HTML para esto, pero sí necesitamos actualizar nuestro CSS un poco:

.slide a {
background: none;
border: none;
}a.slide__prev,
.slider::before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 5%;
}
a.slide__next,
.slider::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 5%;
}



	
  



	
  



.slider::before,
.slider::after,
.slide__prev,
.slide__next {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
.slider::before,
.slider::after {
content: '';
z-index: 1;
background: none;
pointer-events: none;
}

Bien, entonces, ¿qué está pasando aquí? Bueno, primero, hemos quitado el fondo y el borde del elemento a. Esto hace que nuestros botones sean efectivamente invisibles.

Luego, hemos agregado pseudoelementos antes y después del control deslizante. Estos tienen el mismo estilo que teníamos anteriormente en los elementos a: la bonita flecha simple. Y los hemos colocado exactamente encima de nuestros botones ahora invisibles, y hemos configurado los eventos de puntero en ninguno.

Debido a que están unidos al elemento deslizante y no se deslizan, permanecerán fijos en su lugar mientras el usuario se desplaza por las diapositivas. Pero… cuando el usuario hace clic en uno, en realidad está haciendo clic en el botón invisible adjunto a la diapositiva real.

¡Esto da la ilusión de botones de navegación fijos! lindo eh?

Se parece a esto:

ver la pluma
en CódigoPen.

Bien, ¡ahora tenemos un control deslizante de CSS puro bastante bueno!

Ajá, te escucho decir, pero ¿qué pasa con las migas de pan? ¿Podemos agregarlas también?

Me alegro de que hayas preguntado, ¡sí podemos!

Paso 5: agregue pan rallado al control deslizante

Para agregar las migas de pan al control deslizante, realmente estamos usando las mismas técnicas que acabamos de ver, solo que de una manera ligeramente diferente.

Cada ruta de navegación será simplemente otro enlace de salto que apunta a la diapositiva relevante, y lo posicionaremos absolutamente en el elemento deslizante.

Así que aquí está el HTML (ponga esto en el control deslizante, debajo del elemento de diapositivas):

<div class="slider__nav">
<a class="slider__navlink" href="#slides__1"></a>
<a class="slider__navlink" href="#slides__2"></a>
<a class="slider__navlink" href="#slides__3"></a>
<a class="slider__navlink" href="#slides__4"></a>
</div>

¿Ver? Los mismos enlaces que usamos antes. Ahora para darle estilo:

.slider__nav {
box-sizing: border-box;
position: absolute;
bottom: 5%;
left: 50%;
width: 200px;
margin-left: -100px;
text-align: center;
}.slider__navlink {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: black;
margin: 0 10px 0 10px;
}

Nuevamente, ¡eres libre de diseñarlos como tu corazón lo desee!

Y aquí está el resultado final:

ver la pluma
en CódigoPen.

Un control deslizante bastante bueno, y sin JavaScript a la vista. ¡Espero que te sea útil!

Conclusión

Este es un truco útil que le permite crear una funcionalidad de control deslizante, incluso para personas con JS desactivado. Pero, por supuesto, sin JS, está realmente limitado en lo que puede hacer y cómo puede integrarlo con su sitio existente.

Su navegador no soporta la etiqueta de vídeo.

Si desea aprovechar el poder de JS para crear hermosos controles deslizantes de página completa con capacidad de respuesta, consulte fullPage.js. Tiene funcionalidad de control deslizante desde el primer momento e incluye soporte para:

Navegación de migas de pan: que puede moverse y diseñar fácilmente
Reproducción automática: ¡para que sus visitantes puedan ver más de su increíble contenido, incluso si no hacen clic en los botones de navegación!
Lazy loading: acelere su sitio cargando activos solo cuando sea necesario
mucho, mucho más

También es súper fácil de configurar, ¡así que pruébalo!

Y si todavía tiene hambre de controles deslizantes, inspírese con esta lista de increíbles controles deslizantes animados o este otro con controles deslizantes geniales de Webflow.

Crear un control deslizante con CSS puro

Paso 1: crea tu diseño de control deslizante

Paso 2: agregar los botones de navegación deslizante

Paso 4 – Fijación de los botones de navegación en su lugar

Conclusión