{"id":7692,"date":"2022-04-05T10:13:00","date_gmt":"2022-04-05T10:13:00","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7692"},"modified":"2022-04-05T10:15:50","modified_gmt":"2022-04-05T10:15:50","slug":"slick-slider","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/","title":{"rendered":"Slick slider"},"content":{"rendered":"<p><strong>Slick<\/strong> es un complemento <strong>jQuery<\/strong> de carrusel receptivo que admite m\u00faltiples puntos de interrupci\u00f3n, transiciones <strong>CSS3<\/strong>, eventos t\u00e1ctiles y deslizantes y mucho m\u00e1s.<\/p>\n<p>En la web oficial se define como el \u00faltimo carrusel que necesitar\u00e1s.<\/p>\n<p>La verdad es que lo he estado usando \u00faltimamente en varios proyectos y me sorprendido bastante.<\/p>\n<h2>Descarga y uso de Slick<\/h2>\n<p>En la p\u00e1gina oficial de <a href=\"https:\/\/kenwheeler.github.io\/slick\/\" target=\"_blank\" rel=\"noopener\">Slick<\/a> te muestran como incorporarlo a trav\u00e9s de CDN o incorporando los ficheros a tu proyecto.<\/p>\n<p>A mi siempre me gusta optar por la segunda opci\u00f3n pero eso va a gusto del programador.<\/p>\n<p>Una vez te has descargado el proyecto desde la p\u00e1gina oficial, tan solo tienes que incorporar en tu proyecto la carpeta slick que es donde est\u00e1n los recursos <strong>CSS<\/strong> y <strong>JavaScript<\/strong> que necesitas para hacerlo funcionar.<\/p>\n<p>Luego, en la cabecera de tu documento <strong>HTML<\/strong>, puedes agregar las hojas de estilos que necesitar\u00e1s:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/link.html\"><span class=\"kw2\">link<\/span><\/a> <span class=\"kw3\">rel<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;stylesheet&quot;<\/span> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text\/css&quot;<\/span> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;.\/slick\/slick.css&quot;<\/span>&gt;<\/span>\n<span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/link.html\"><span class=\"kw2\">link<\/span><\/a> <span class=\"kw3\">rel<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;stylesheet&quot;<\/span> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text\/css&quot;<\/span> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;.\/slick\/slick-theme.css&quot;<\/span>&gt;<\/span><\/pre><\/div><\/div>\n<p>El c\u00f3digo <strong>JavaScript<\/strong> requerido tambi\u00e9n se puede poner en la cabecera pero por temas de carga de la p\u00e1gina y rendimiento es mejor ponerlo al final del documento <strong>HTML<\/strong> justo antes del cierre de la etiqueta &lt;\/body&gt;:<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;https:\/\/code.jquery.com\/jquery-2.2.0.min.js&quot;<\/span> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text\/javascript&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;.\/slick\/slick.js&quot;<\/span> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text\/javascript&quot;<\/span> <span class=\"kw3\">charset<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;utf-8&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>Estoy incluyendo 2 ficheros:<\/p>\n<ul>\n<li>La librer\u00eda <strong>jQuery<\/strong>.<\/li>\n<li>El plugin<strong>\u00a0Slick<\/strong>.<\/li>\n<\/ul>\n<h2>Slider Vertical con Slick<\/h2>\n<p>Uno de los ejemplos que quiero ilustrar es el control de diapositivas con iteraci\u00f3n vertical.<\/p>\n<p>En el cuerpo de tu p\u00e1gina o dentro del &lt;body&gt; en el lugar deseado puedes a\u00f1adir una secci\u00f3n con las diapositivas de la siguiente forma:<\/p>\n<div id=\"wpshdo_3\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_3\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_3\"><\/a><a id=\"wpshat_3\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_3\"  onClick=\"javascript:wpsh_toggleBlock(3)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_code(3)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_print(3)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_3\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;section <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;vertical-slider slider&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/img.html\"><span class=\"kw2\">img<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;images\/1.jpg&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/img.html\"><span class=\"kw2\">img<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;images\/2.jpg&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/img.html\"><span class=\"kw2\">img<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;images\/3.jpg&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/img.html\"><span class=\"kw2\">img<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;images\/4.jpg&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/img.html\"><span class=\"kw2\">img<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;images\/5.jpg&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/img.html\"><span class=\"kw2\">img<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;images\/6.jpg&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span>section&gt;<\/span><\/pre><\/div><\/div>\n<p>En este caso, vamos a ilustrar un ejemplo con 6 diapositivas para que se pueda ver bien la funcionalidad.<\/p>\n<p>Justo antes de la etiqueta de cierre del &lt;\/body&gt; puedes hacer una llamada al plugin como la que sigue:<\/p>\n<div id=\"wpshdo_4\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_4\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_4\"><\/a><a id=\"wpshat_4\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_4\"  onClick=\"javascript:wpsh_toggleBlock(4)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_4\" onClick=\"javascript:wpsh_code(4)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_4\" onClick=\"javascript:wpsh_print(4)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_4\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">$<span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;.vertical-slider&quot;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">slick<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span>\n    dots<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span>\n    vertical<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span>\n    centerMode<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span>\n    slidesToShow<span class=\"sy0\">:<\/span> 1<span class=\"sy0\">,<\/span>\n    slidesToScroll<span class=\"sy0\">:<\/span> 1\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>Es una llamada al plugin con establecimiento de varios par\u00e1metros. En este caso, estoy indicando que:<\/p>\n<ul>\n<li>quiero que se muestren los puntitos de navegaci\u00f3n debajo de las diapositivas.<\/li>\n<li>la iteraci\u00f3n o movimiento de diapositivas ser\u00e1 vertical.<\/li>\n<li>modo centrado.<\/li>\n<li>de entrada solo quiero mostrar una diapositiva.<\/li>\n<li>al pasar a la siguiente que solo se mueva una diapositiva.<\/li>\n<\/ul>\n<p>Con esta llamada conseguimos algo como lo que se muestra en la siguiente imagen:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7693\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slider-vertical.png\" alt=\"Slider vertical con Slick\" width=\"955\" height=\"347\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slider-vertical.png 955w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slider-vertical-300x109.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slider-vertical-768x279.png 768w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/p>\n<h2>Slider Horizontal con Slick<\/h2>\n<p>El slider horizontal es el t\u00edpico que aparece en casi todas las p\u00e1ginas de los dise\u00f1os de plantillas de tiendas online y p\u00e1ginas web.<\/p>\n<p>Es muy usado para destacar contenido importante u ofertas.<\/p>\n<p>En el cuerpo de la p\u00e1gina puedes a\u00f1adir una secci\u00f3n muy parecida a la anterior:<\/p>\n<div id=\"wpshdo_5\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_5\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_5\"><\/a><a id=\"wpshat_5\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_5\"  onClick=\"javascript:wpsh_toggleBlock(5)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_5\" onClick=\"javascript:wpsh_code(5)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_5\" onClick=\"javascript:wpsh_print(5)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_5\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;section <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;horizontal-slider slider&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/img.html\"><span class=\"kw2\">img<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;images\/1.jpg&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/img.html\"><span class=\"kw2\">img<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;images\/2.jpg&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/img.html\"><span class=\"kw2\">img<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;images\/3.jpg&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/img.html\"><span class=\"kw2\">img<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;images\/4.jpg&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/img.html\"><span class=\"kw2\">img<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;images\/5.jpg&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/img.html\"><span class=\"kw2\">img<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;images\/6.jpg&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span>section&gt;<\/span><\/pre><\/div><\/div>\n<p>Lo \u00fanico que cambia es la clase de la secci\u00f3n.<\/p>\n<p>El efecto de control deslizante lo podemos conseguir con una llamada al plugin sin par\u00e1metros:<\/p>\n<div id=\"wpshdo_6\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_6\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_6\"><\/a><a id=\"wpshat_6\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_6\"  onClick=\"javascript:wpsh_toggleBlock(6)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_6\" onClick=\"javascript:wpsh_code(6)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_6\" onClick=\"javascript:wpsh_print(6)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_6\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">$<span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;.horizontal-slider&quot;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">slick<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>Para conseguir como resultado:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7694\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slider-horizontal.png\" alt=\"Slider horizontal con Slick\" width=\"940\" height=\"242\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slider-horizontal.png 940w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slider-horizontal-300x77.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slider-horizontal-768x198.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/p>\n<h2>Slider textual con Slick<\/h2>\n<p>De la misma forma que puedes controlar diapositivas con im\u00e1genes, tambi\u00e9n los puedes hacer con texto.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7695\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slider-text.png\" alt=\"slider textual con slick\" width=\"939\" height=\"337\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slider-text.png 939w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slider-text-300x108.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slider-text-768x276.png 768w\" sizes=\"auto, (max-width: 939px) 100vw, 939px\" \/><\/p>\n<h2>Carrusel de im\u00e1genes con Slick<\/h2>\n<p>Puedes mostrar carruseles de im\u00e1genes como los siguientes:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7696\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/carousel-images.png\" alt=\"Carousel de im\u00e1genes con Slick\" width=\"937\" height=\"141\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/carousel-images.png 937w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/carousel-images-300x45.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/carousel-images-768x116.png 768w\" sizes=\"auto, (max-width: 937px) 100vw, 937px\" \/><\/p>\n<p>Usando la siguiente llamada:<\/p>\n<div id=\"wpshdo_7\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_7\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_7\"><\/a><a id=\"wpshat_7\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_7\"  onClick=\"javascript:wpsh_toggleBlock(7)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_7\" onClick=\"javascript:wpsh_code(7)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_7\" onClick=\"javascript:wpsh_print(7)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_7\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">$<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.carousel'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">slick<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span>\n    infinite<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span>\n    slidesToShow<span class=\"sy0\">:<\/span> 2<span class=\"sy0\">,<\/span>\n    slidesToScroll<span class=\"sy0\">:<\/span> 1\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<h2>Carrusel de contenido HTML con Slick<\/h2>\n<p>Un de los puntos que m\u00e1s me ha gustado es que puedo montar un control de diapositivas de cualquier cosa.<\/p>\n<p>En el ejemplo en funcionamiento podr\u00e1s iterar o mover elementos de tipo card de <strong>Bootstrap<\/strong>.<\/p>\n<p>En el lugar que quieras de tu documento <strong>HTML<\/strong> puedes agregar tu secci\u00f3n con carrusel de contenido <strong>HTML<\/strong>.<\/p>\n<p>Por ejemplo:<\/p>\n<div id=\"wpshdo_8\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_8\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_8\"><\/a><a id=\"wpshat_8\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_8\"  onClick=\"javascript:wpsh_toggleBlock(8)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_8\" onClick=\"javascript:wpsh_code(8)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_8\" onClick=\"javascript:wpsh_print(8)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_8\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;section <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-carousel&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h5.html\"><span class=\"kw2\">h5<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-header&quot;<\/span>&gt;<\/span>\u00bfQu\u00e9 es Lorem Ipsum?<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/h5.html\"><span class=\"kw2\">h5<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-body&quot;<\/span>&gt;<\/span>\n            Texto de relleno de las imprentas y archivos de texto.\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-footer d-flex justify-content-center&quot;<\/span>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;btn btn-primary&quot;<\/span>&gt;<\/span>Ver mas<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h5.html\"><span class=\"kw2\">h5<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-header&quot;<\/span>&gt;<\/span>\u00bfPor qu\u00e9 lo usamos?<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/h5.html\"><span class=\"kw2\">h5<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-body&quot;<\/span>&gt;<\/span>\n            El contenido del texto de un sitio mientras que...\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-footer d-flex justify-content-center&quot;<\/span>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;btn btn-primary&quot;<\/span>&gt;<\/span>Ver mas<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h5.html\"><span class=\"kw2\">h5<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-header&quot;<\/span>&gt;<\/span>\u00bfDe d\u00f3nde viene?<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/h5.html\"><span class=\"kw2\">h5<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-body&quot;<\/span>&gt;<\/span>\n            El texto de Lorem Ipsum no es simplemente texto aleatorio.\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-footer d-flex justify-content-center&quot;<\/span>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;btn btn-primary&quot;<\/span>&gt;<\/span>Ver mas<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h5.html\"><span class=\"kw2\">h5<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-header&quot;<\/span>&gt;<\/span>\u00bfD\u00f3nde conseguirlo?<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/h5.html\"><span class=\"kw2\">h5<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-body&quot;<\/span>&gt;<\/span>\n            En su p\u00e1gina oficial est\u00e1 disponible.\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-footer d-flex justify-content-center&quot;<\/span>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;btn btn-primary&quot;<\/span>&gt;<\/span>Ver mas<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h5.html\"><span class=\"kw2\">h5<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-header&quot;<\/span>&gt;<\/span>Ejemplo lorem ipsum<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/h5.html\"><span class=\"kw2\">h5<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-body&quot;<\/span>&gt;<\/span>\n            Lorem ipsum... Texto aleatorio para tus dise\u00f1os\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-footer d-flex justify-content-center&quot;<\/span>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;btn btn-primary&quot;<\/span>&gt;<\/span>Ver mas<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h5.html\"><span class=\"kw2\">h5<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-header&quot;<\/span>&gt;<\/span>Texto aleatorio<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/h5.html\"><span class=\"kw2\">h5<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-body&quot;<\/span>&gt;<\/span>\n            Texto aleatorio para mis demos\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-footer d-flex justify-content-center&quot;<\/span>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;btn btn-primary&quot;<\/span>&gt;<\/span>Ver mas<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span>section&gt;<\/span><\/pre><\/div><\/div>\n<p>Con llamada al plugin:<\/p>\n<div id=\"wpshdo_9\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_9\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_9\"><\/a><a id=\"wpshat_9\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_9\"  onClick=\"javascript:wpsh_toggleBlock(9)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_9\" onClick=\"javascript:wpsh_code(9)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_9\" onClick=\"javascript:wpsh_print(9)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_9\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">$<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.card-carousel'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">slick<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span>\n    infinite<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span>\n    slidesToShow<span class=\"sy0\">:<\/span> 3<span class=\"sy0\">,<\/span>\n    slidesToScroll<span class=\"sy0\">:<\/span> 1\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>Para conseguir como resultado:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7697\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/carousel-html.png\" alt=\"Carrusel con contenido HTML con Slick\" width=\"937\" height=\"213\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/carousel-html.png 937w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/carousel-html-300x68.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/carousel-html-768x175.png 768w\" sizes=\"auto, (max-width: 937px) 100vw, 937px\" \/><\/p>\n<h2>Caracter\u00edsticas principales<\/h2>\n<ul>\n<li>Totalmente adaptable a todos los dispositivos. Muy importante hoy en d\u00eda.<\/li>\n<li>Configuraciones separadas por punto de interrupci\u00f3n. Se puede definir el n\u00famero de diapositivas a mostrar en cada dispositivo.<\/li>\n<li>Utiliza CSS3 cuando est\u00e1 disponible. Completamente funcional cuando no.<\/li>\n<li>Deslizamiento con el dedo habilitado aunque tambi\u00e9n se puede deshabilitar.<\/li>\n<li>Arrastramiento de diapositivas con el rat\u00f3n.<\/li>\n<li>Bucle infinito.<\/li>\n<li>Accesible con las flechas del teclado.<\/li>\n<li>Se pueden a\u00f1adir, eliminar y filtrar diapositivas.<\/li>\n<li>Reproducci\u00f3n autom\u00e1tica.<\/li>\n<li>Puntos de navegaci\u00f3n.<\/li>\n<li>Flechas de navegaci\u00f3n.<\/li>\n<li>Funciones de llamada.<\/li>\n<li>M\u00faltiples controles deslizantes en la misma p\u00e1gina.<\/li>\n<\/ul>\n<p>Y mucho m\u00e1s que puedes ver en su p\u00e1gina oficial.<\/p>\n<p>Para m\u00e1s informaci\u00f3n, la fuente de origen tambi\u00e9n est\u00e1 disponible en Github.<\/p>\n<p><a href=\"https:\/\/github.com\/kenwheeler\/slick\/\" target=\"_blank\" rel=\"noopener\">Slick en Github<\/a><\/p>\n<h2>Conclusiones<\/h2>\n<p>Mi \u00faltima experiencia ha sido probar varios plugins que permiten incorporar un carrusel de im\u00e1genes en un desarrollo Ecommerce con <strong>PrestaShop<\/strong>.<\/p>\n<p>Necesitaba mostrar en formato carrusel todas las listas de productos que aparecen en la p\u00e1gina de inicio.<\/p>\n<p>Prob\u00e9 varios plugins de <strong>carousel<\/strong> sin \u00e9xito hasta encontrar <strong>Slick<\/strong> que se adapt\u00f3 casi a la perfecci\u00f3n. Tan solo tuve que hacer alg\u00fan peque\u00f1o ajuste con <strong>CSS<\/strong> para adaptarlo al dise\u00f1o.<\/p>\n<p>Por ese motivo, creo que no es un desperdicio compartirlo con vosotros ya que se que os va a ayudar f\u00e1cilmente.<\/p>\n<p style=\"text-align: center;\"><a class=\"btn btn-secondary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/slick\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i class=\"fa fa-eye\"><\/i> Ver demo<\/a> <a class=\"btn btn-primary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/slick\/slick.zip\"><i class=\"fa fa-download\"><\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Slick es un complemento jQuery de carrusel receptivo que admite m\u00faltiples puntos de interrupci\u00f3n, transiciones CSS3, eventos t\u00e1ctiles y deslizantes y mucho m\u00e1s.<\/p>\n","protected":false},"author":1,"featured_media":7701,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[51,52],"class_list":["post-7692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-carousel","tag-sliders"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Slick slider - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Slick es un complemento jQuery de carrusel receptivo que admite m\u00faltiples puntos de interrupci\u00f3n, transiciones CSS3, eventos t\u00e1ctiles y deslizantes y mucho m\u00e1s.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Slick slider - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Slick es un complemento jQuery de carrusel receptivo que admite m\u00faltiples puntos de interrupci\u00f3n, transiciones CSS3, eventos t\u00e1ctiles y deslizantes y mucho m\u00e1s.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-05T10:13:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-05T10:15:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slick.png\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/\",\"name\":\"Slick slider - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slick.png\",\"datePublished\":\"2022-04-05T10:13:00+00:00\",\"dateModified\":\"2022-04-05T10:15:50+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Slick es un complemento jQuery de carrusel receptivo que admite m\u00faltiples puntos de interrupci\u00f3n, transiciones CSS3, eventos t\u00e1ctiles y deslizantes y mucho m\u00e1s.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slick.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slick.png\",\"width\":500,\"height\":500,\"caption\":\"slick slider\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Slick slider\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Slick slider - Jose Aguilar Blog","description":"Slick es un complemento jQuery de carrusel receptivo que admite m\u00faltiples puntos de interrupci\u00f3n, transiciones CSS3, eventos t\u00e1ctiles y deslizantes y mucho m\u00e1s.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Slick slider - Jose Aguilar Blog","og_description":"Slick es un complemento jQuery de carrusel receptivo que admite m\u00faltiples puntos de interrupci\u00f3n, transiciones CSS3, eventos t\u00e1ctiles y deslizantes y mucho m\u00e1s.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2022-04-05T10:13:00+00:00","article_modified_time":"2022-04-05T10:15:50+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slick.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/","url":"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/","name":"Slick slider - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slick.png","datePublished":"2022-04-05T10:13:00+00:00","dateModified":"2022-04-05T10:15:50+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Slick es un complemento jQuery de carrusel receptivo que admite m\u00faltiples puntos de interrupci\u00f3n, transiciones CSS3, eventos t\u00e1ctiles y deslizantes y mucho m\u00e1s.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slick.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/slick.png","width":500,"height":500,"caption":"slick slider"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/slick-slider\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Slick slider"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7692"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7692\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7701"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}