Resumen

Mi objetivo principal era encontrar una forma sencilla de crear un control deslizante de imágenes, solo con flechas hacia la izquierda y hacia la derecha. Básicamente esto: https://elena.mikimalio.com/

Sliders en general

Los sliders son complicados, pueden quedar increíblemente bien, con textos e imágenes que se mueven en cada diapositiva, animaciones por todas partes, pero cuanto más complejos son, más difícil es hacer que encajen. Bueno, en realidad es casi imposible, por no hablar de la accesibilidad, que debería ser un requisito.

Creo que son principalmente los teléfonos los que han acabado con los sliders sofisticados, porque se ven muy mal y no funcionan bien en las pantallas táctiles. No digo que sea imposible, solo que es mejor crear sitios web sin ellos.

No obstante, se puede crear un slider sencillo y bonito, solo con imágenes que se desplazan de izquierda a derecha, una forma eficaz de mostrar tu trabajo. Y con ese fin, probé cuatro plugins de sliders para ver cómo funcionaban.

Lo que estaba buscando

1. Fácil de usar: añade unas cuantas imágenes y ya está.
2. Gratis y sin necesidad de pagar nada más, si lo único que quieres son flechas izquierda y derecha a los lados.
3. Lo ideal sería poder tener un control deslizante que se ajustara a toda la pantalla, pero solo a la pantalla, para que no se saliera. Como aquí.- https://elena.mikimalio.com/

Cobertura a pantalla completa

Por lo general, los sitios web se crean en algún tipo de contenedor, por lo que, por ejemplo, tendrían 1240 píxeles de ancho y estarían centrados, para evitar que todo se vea gigantesco en pantallas más grandes. Pero a veces es bueno romper esta norma, especialmente con los controles deslizantes, y hacer que se extiendan de izquierda a derecha. A veces, especialmente en las páginas de inicio, también se pueden hacer de arriba abajo.

Ahora bien, algunos sliders te permiten romper el contenedor de tu sitio web. Por desgracia, solo unos pocos permiten ajustar el slider a la altura de la pantalla.

Minimalio te permite romper el ancho del contenedor, estableciendo el ancho del bloque en «ancho completo». Es bueno saberlo…

1. B Slider – mi favorito

Si quieres enlaces o botones, el control deslizante B no es adecuado. Si solo quieres imágenes en toda la página, B Slider Es mi favorito.

Ventajas:

• La función de edición directa en Gutenberg
• permite establecer la altura del control deslizante en 100VH, lo que significa que cubrirá toda la altura de la pantalla.

Desventajas:

• Prácticamente todo lo que se añade después de las imágenes y las flechas solo está disponible en la versión Pro.
• Hay que desactivar bastantes ajustes para que quede bien.
• No hay configuración de ancho completo, pero aún así se puede hacer con Minimalio ajustando a “full width”

https://wordpress.org/plugins/b-slider

2. Meta slider

Fácil de usar, permite enlazar las diapositivas, pero no permite la altura completa. Meta Slider sin embargo, es una opción sólida, me gusta mucho y ha funcionado muy bien en muchos sitios web.

Ventajas:

• Es fácil crear el control deslizante y luego se añade un bloque Gutenberg donde solo tienes que elegir el control deslizante que has creado.
• Puedes hacer que tus diapositivas enlacen a algún sitio, en la versión gratuita.
• Tiene muchos ajustes útiles para colores, animación, sincronización, etc.
• Incluso tiene ajustes de accesibilidad.

Desventajas:

• No tiene un ajuste para la altura completa, probablemente tendrías que hacerlo con algún CSS personalizado
• Tampoco ocupa todo el ancho, pero aún así se podría hacer conMinimalio ajustando a “full width”

https://wordpress.org/plugins/ml-slider

3. Smart Slider 3

Si realmente necesitas algunos textos en tu slider, olvídate de los dos primeros. Smart Slider 3 Es sin duda más difícil de usar que Meta, pero también ofrece más opciones. Especialmente a la hora de añadir superposiciones de texto con enlaces y cosas por el estilo.

Ventajas:

• Posibilidad de añadir textos, imágenes y botones al control deslizante
• Opción de forzar el ancho completo
• Fácil de manejar

Desventajas:

• No pude configurarlo a la altura máxima, es una tontería que no tenga esta opción.
• Si solo quieres un control deslizante de imágenes, esto es excesivo.

https://wordpress.org/plugins/smart-slider-3

4. Depicter

Bueno, este es el tipo de slider que, en mi opinión, está un poco pasado de moda. He oído hablar de gente que crea sitios web solo con esto, lo cual me parece una opción terrible, pero sí, es posible. Solo ten en cuenta que es posible que necesites un título universitario para este slider. Puedes hacer casi cualquier cosa con él, lo que también significa que es muy complicado. Sin embargo, Depicter está muy bien hecho.

Ventajas:

• opciones infinitas

Desventajas:

• Me llevó como 10 minutos averiguar cómo añadir flechas.
• Ni siquiera tuve la paciencia de ver si podía hacer un control deslizante a pantalla completa, pero estoy seguro de que tú puedes.

https://wordpress.org/plugins/depicter

Cómo crear un control deslizante a pantalla completa con Minimalio

Entonces, si desea una página de inicio como esta: https://elena.mikimalio.com/ Podrías hacerlo con Minimalio, así:

1. Instale el plugin B slider
2. Establece la cabecera en Opciones de tema en Transparente.
3. Ir a CSS personalizado y ocultar el pie de página en la página de inicio añadiendo este código:
   .home footer {display:none;}
4. Añade el control deslizante a tu página de inicio y establece el ancho del control deslizante en ancho completo, como se muestra aquí
5. Elimine todos los textos, el color de superposición del estilo y quizás más.
6. Establece la altura del control deslizante en 100vh.

¡Buena suerte!