{"id":10716,"date":"2020-11-03T18:31:30","date_gmt":"2020-11-03T16:31:30","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=10716"},"modified":"2022-09-29T20:16:47","modified_gmt":"2022-09-29T18:16:47","slug":"como-hacer-un-slider-solo-con-html-y-css","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2020\/11\/como-hacer-un-slider-solo-con-html-y-css\/","title":{"rendered":"C\u00f3mo hacer un slider solo con HTML y CSS"},"content":{"rendered":"

En un art\u00edculo anterior ya vimos c\u00f3mo hacer un men\u00fa hamburguesa solo con HTML y CSS<\/a>. En el art\u00edculo de hoy vamos a ver algo un poco m\u00e1s dif\u00edcil, vamos a ver c\u00f3mo hacer un slider solo con HTML y CSS; sin necesidad de usar JavaScript.<\/p>\n

Un slider, o pase de diapositivas, es simplemente un efecto que consiste en mostrar una serie de im\u00e1genes acompa\u00f1adas de una serie de textos que, por lo general, vienen a ser unos productos o servicios que queremos promocionar en nuestro sitio Web.<\/p>\n

Cada imagen tiene que ser muy llamativa y ocupar un tama\u00f1o generoso en pantalla, y los textos han de ser grandes. Al cabo de unos segundos, esta imagen ha de dar paso a la siguiente imagen en una animaci\u00f3n que resulte atractiva. Como se trata de productos o servicios que queremos promocionar, debemos de intentar llamar la atenci\u00f3n del usuario con im\u00e1genes vistosas, textos grandes y efectos de animaci\u00f3n.<\/strong><\/p>\n

Para poder realizar este efecto vamos a partir del siguiente c\u00f3digo HTML:<\/p>\n

<div class=\"wrapper\">\r\n  <div class=\"slider\" id=\"slider\">\r\n    <ul class=\"slides\">\r\n      <li class=\"slide\" id=\"slide1\">\r\n        <a href=\"#\">\r\n          <p class=\"caption\">Texto llamativo<\/p>\r\n          <img src=\"photo1.jpg\" alt=\"photo 1\">\r\n        <\/a>\r\n      <\/li>\r\n      <li class=\"slide\" id=\"slide2\">\r\n        <a href=\"#\">\r\n          <p class=\"caption\">Texto llamativo<\/p>\r\n          <img src=\"photo2.jpg\" alt=\"photo 2\">\r\n        <\/a>\r\n      <\/li>\r\n      <li class=\"slide\" id=\"slide3\">\r\n        <a href=\"#\">\r\n          <p class=\"caption\">Texto llamativo<\/p>\r\n          <img src=\"photo3.jpg\" alt=\"photo 3\">\r\n        <\/a>\r\n      <\/li>\r\n      <li class=\"slide\" id=\"slide4\">\r\n        <a href=\"#\">\r\n          <p class=\"caption\">Texto llamativo<\/p>\r\n          <img src=\"photo4.jpg\" alt=\"photo 4\">\r\n        <\/a>\r\n      <\/li>\r\n      <li class=\"slide\" id=\"slide5\">\r\n        <a href=\"#\">\r\n           <p class=\"caption\">Texto llamativo<\/p>\r\n           <img src=\"photo5.jpg\" alt=\"photo 5\">\r\n        <\/a>\r\n      <\/li>\r\n      <li class=\"slide\">\r\n        <a href=\"#\">\r\n          <p class=\"caption\">Texto llamativo<\/p>\r\n          <img src=\"photo1.jpg\" alt=\"photo 1\">\r\n        <\/a>\r\n      <\/li>\r\n    <\/ul>\r\n    <ul class=\"slider-controler\">\r\n      <li><a href=\"#slide1\">&bullet;<\/a><\/li>\r\n      <li><a href=\"#slide2\">&bullet;<\/a><\/li>\r\n      <li><a href=\"#slide3\">&bullet;<\/a><\/li>\r\n      <li><a href=\"#slide4\">&bullet;<\/a><\/li>\r\n      <li><a href=\"#slide5\">&bullet;<\/a><\/li>\r\n    <\/ul>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\n
 <\/p>\n
Obviamente puedes cambiar el nombre de los archivos de las im\u00e1genes y el texto de ejemplo de cada p\u00e1rrafo.\u00a0Por limitaciones del dise\u00f1o de este slider, la primera diapositiva y la \u00faltima han de ser exactamente iguales.<\/strong> Por lo que aseg\u00farate de colocar el mismo nombre de archivo y el mismo texto en el p\u00e1rrafo. Tambi\u00e9n es importante que no intentes a\u00f1adir o eliminar diapositivas hasta que entiendas perfectamente el c\u00f3digo<\/strong>. As\u00ed que deber\u00e1s de usar 5 im\u00e1genes, ya que este slider ha sido dise\u00f1ado pensando en ese n\u00famero de diapositivas. Es posible cambiarlo, pero requiere algo de trabajo, as\u00ed que inicialmente te aconsejo que pruebes el c\u00f3digo sin modificar el n\u00famero de diapositivas.<\/p>\n
Dentro del div#slider tenemos dos listas. La primera es una lista de diapositivas\/slides cada una de las cuales tiene la imagen y el texto que se mostrar\u00e1 sobre dicha imagen. Ambos se encuentran dentro de un un enlace ya que obviamente cada diapositiva va a llevar al usuario a otra p\u00e1gina cuando haga click en ella. La segunda lista, es una lista de enlaces con los cl\u00e1sicos puntitos para poder ir directamente a la diapositiva deseada. Obviamente, esta segunda lista es totalmente opcional.<\/p>\n
Si quieres incluir m\u00e1s texto en cada diapositiva, puedes cambiar cada p.caption por un div.caption y colocar dentro de esos elementos div los textos que necesites.<\/p>\n
A continuaci\u00f3n tenemos el c\u00f3digo CSS que necesitaremos para que se produzca la \u00abmagia\u00bb:<\/p>\n
@keyframes slide {\r\n\t0% { transform: translateX(0); }\r\n\t10% { transform: translateX(0); }\r\n\r\n\t15% { transform: translateX(-100%); }\r\n\t30% { transform: translateX(-100%); }\r\n\r\n\t35% { transform: translateX(-200%); }\r\n\t50% { transform: translateX(-200%); }\r\n\r\n\t55% { transform: translateX(-300%); }\r\n\t70% { transform: translateX(-300%); }\r\n\r\n\t75% { transform: translateX(-400%); }\r\n\t90% { transform: translateX(-400%); }\r\n\r\n\t95% { transform: translateX(-500%); }\r\n\t100% { transform: translateX(-500%); }\r\n}\r\n\r\n* { box-sizing: border-box; }\r\n\r\nhtml { scroll-behavior: smooth; }\r\n\r\nbody {\r\n\tfont-family: sans-serif;\r\n}\r\n\r\n.wrapper {\r\n\tmax-width: 1200px;\r\n\tmargin: 0 auto;\r\n}\r\n\r\n.slider {\r\n\tposition: relative;\r\n}\r\n\r\n.slides {\r\n\tposition: relative;\r\n\tdisplay: flex;\r\n\toverflow: hidden;\r\n}\r\n\r\n.slide {\r\n\twidth: 100vw;\r\n\tflex-shrink: 0;\r\n\tanimation-name: slide;\r\n\tanimation-duration: 20s;\r\n\tanimation-iteration-count: infinite;\r\n\tanimation-timing-function: linear;\r\n}\r\n\r\n.slides:hover .slide {\r\n\tanimation-play-state: paused;\r\n}\r\n\r\n.slide img {\r\n\twidth: 100%;\r\n\tvertical-align: top;\r\n}\r\n\r\n.slide a {\r\n\twidth: 100%;\r\n\tdisplay: inline-block;\r\n\tposition: relative;\r\n}\r\n\r\n.caption {\r\n\tcolor: white;\r\n\ttext-shadow: 1px 1px black;\r\n\tfont-size: 8vw;\r\n\tposition: absolute;\r\n\tbottom: 8vw;\r\n\tright: 4vw;\r\n}\r\n\r\n.slide:target {\r\n\tanimation-name: none;\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tz-index: 50;\r\n}\r\n\r\n.slider-controler {\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\ttext-align: center;\r\n\tpadding: 5px;\r\n\tbackground-color: rgba(0,0,0,0.5);\r\n\tz-index: 100;\r\n}\r\n\r\n.slider-controler li {\r\n\tmargin: 0 0.5rem;\r\n\tdisplay: inline-block;\r\n\tvertical-align: top;\r\n}\r\n\r\n.slider-controler a {\r\n\tdisplay: inline-block;\r\n\tvertical-align: top;\r\n\ttext-decoration: none;\r\n\tcolor: white;\r\n\tfont-size: 1.5rem;\r\n}\r\n\r\n@media only screen and (min-width: 1200px) {\r\n\t.slide {\r\n\t\twidth: 1200px;\r\n\t}\r\n\r\n\t.caption {\r\n\t\tfont-size: 96px;\r\n\t\tbottom: 96px;\r\n\t\tright: 50px;\r\n\t}\r\n}\r\n<\/pre>\n
 <\/p>\n
Tal y como se puede ver, la animaci\u00f3n \u00abslide\u00bb hace que las diapositivas se mueven hacia la izquierda de 100% de ancho en 100%. Como estamos usando 5 diapositivas, tenemos que mover las diapositivas 5 puestos hacia la izquierda. Si queremos a\u00f1adir o eliminar diapositivas, obviamente tendremos que cambiar esta animaci\u00f3n. Si nos fijamos bien en dicha animaci\u00f3n, veremos que cada diapositiva permanece en pantalla un 15% del tiempo total de la animaci\u00f3n, lo que hace un 75% del tiempo total de la animaci\u00f3n. Cada cambio de diapositiva, supone un 5% del tiempo de la animaci\u00f3n, lo que hace un 25% del tiempo total de la animaci\u00f3n. A\u00f1adir o eliminar una diapositiva, implica por lo tanto recalcular estos porcentajes de tiempo asignado para que las transiciones entre diapositivas sean uniformes.<\/strong><\/p>\n
Cada diapositiva ocupa el 100% del ancho del dispositivo (width: 100vw). Esto funcionar\u00e1 perfectamente en dispositivos con pantallas peque\u00f1as o medianas donde querremos que nuestro slider ocupe todo el ancho posible. Sin embargo en dispositivos con pantallas grandes, tendremos que usar una media query para indicar un tama\u00f1o m\u00e1ximo (en este caso estamos usando un m\u00e1ximo de 1200px). Para que todo funcione bien, deberemos de asegurarnos de haber eliminado margins y paddings por defecto con un reset.css<\/a> o similar, o bien quitarlos a mano.<\/p>\n
El texto de cada diapositiva est\u00e1 encima de la imagen usando position: absolute. De forma similar, cuando el usuario hace click en un circulito para ver alguna de las diapositivas (:target), dicha diapositiva pasa a colocarse por encima del slider, tapando al resto de diapositivas que en realidad se siguen animando.<\/strong> Esta es otra de las limitaciones de esta forma de hacerlo.<\/p>\n
Cuando lo pruebes, ten en cuenta que la animaci\u00f3n se detendr\u00e1 si colocamos el rat\u00f3n encima (:hover)<\/strong>, pero no podemos hacer que se detenga donde queramos y puede suceder que se detenga a mitad cambio de diapositiva. As\u00ed que si no te gusta este funcionamiento, puedes eliminar el c\u00f3digo CSS del :hover.<\/p>\n
Limitaciones de este slider en HTML sin JavaScript<\/h2>\n
Obviamente, si por lo general se usa JavaScript para hacer los slider es por algo. Y es que con HTML5\/CSS3 el resultado probablemente no sea exactamente el que nos gustar\u00eda. A modo de resumen, algunas limitaciones del ejemplo que os traigo en este art\u00edculo son:<\/p>\n