{"id":240,"date":"2020-03-29T12:17:34","date_gmt":"2020-03-29T12:17:34","guid":{"rendered":"https:\/\/ugalrreko.com\/wordpress\/?p=240"},"modified":"2023-01-19T03:18:26","modified_gmt":"2023-01-19T01:18:26","slug":"carrusel-de-imagenes-slider-a-pantalla-completa","status":"publish","type":"post","link":"https:\/\/ugalrreko.com\/wordpress\/index.php\/2020\/03\/29\/carrusel-de-imagenes-slider-a-pantalla-completa\/","title":{"rendered":"Carrusel de Im\u00e1genes (Slider) a pantalla completa."},"content":{"rendered":"<p>Toda esta informaci\u00f3n la he conseguido gracias a la Web:<\/p>\n<p>https:\/\/vegaweb.es\/homeslider-pantalla-completa-prestashop-1-7\/<\/p>\n<p>Un art\u00edculo realizado por Franky Martin. Mi reconocimiento y agradecimiento desde aqu\u00ed.<\/p>\n<p>Para hacer que nuestro carrusel de im\u00e1genes ocupe todo el ancho de la pantalla tenemos que seguir unos sencillos pasos, sin necesidad de tocar el c\u00f3digo.<br \/>\nLo primero es ir a la secci\u00f3n de Posiciones de los m\u00f3dulos, que se encuentra dentro de Dise\u00f1o &gt; Posiciones.<\/p>\n<p>Ahora clicamos en \u00abSubir un m\u00f3dulo\u00bb en la esquina superior derecha y a\u00f1adimos el m\u00f3dulo carrusel de im\u00e1genes en el hook \u00abdisplayNavFullWidth\u00bb.<\/p>\n<p>Tras realizar este cambio, el slider aparecer\u00e1 en todas las p\u00e1ginas de nuestra tienda online. Si queremos que esto no ocurra debemos volver a la secci\u00f3n de Posici\u00f3n de los m\u00f3dulos, buscar el hook \u00abdisplayNavFullWidth\u00bb y clicar en modificar el m\u00f3dulo Carrusel de im\u00e1genes. El siguiente paso es marcar todas la excepciones menos&nbsp;la \u00abindex\u00bb.<\/p>\n<p>Ya hemos conseguido tener el slider de nuestra home a pantalla completa en prestashop 1.7. Para rematar el asunto debemos eliminar el m\u00f3dulo carrusel de im\u00e1genes del hook \u00abdisplayHome\u00bb para que no aparezca el slider original en la home. De no hacer esto, veremos dos carruseles en nuestra p\u00e1gina.<\/p>\n<p><strong>Cambiar la altura del carrusel para ocupar m\u00e1s pantalla<\/strong>. (esto ajustar\u00e1&nbsp;el alto del carrusel de im\u00e1genes).<\/p>\n<p>Hay varias maneras de realizar este paso. Yo me quedo con esta:<\/p>\n<p>Editar el archivo \u00ab\/latiendaquesea\/themes\/classic\/assets\/css\/theme.css con un editor html (en mi caso) Bluefish. Buscar y modificar directamente la regla: .carousel .carousel-inner{height:340px}<\/p>\n<p>por<\/p>\n<p>.carousel .carousel-inner{height:XXXpx} donde XXX es el tama\u00f1o que queramos darle.<\/p>\n<p>En mi caso lo pongo as\u00ed :<\/p>\n<p>carousel .carousel-inner{height:420px}<\/p>\n<p>Tambi\u00e9n seg\u00fan la web se puede realizar este cambio as\u00ed:<\/p>\n<p>Editar el archivo \u00ab\/latiendaquesea\/themes\/classic\/assets\/css\/theme.css y a\u00f1adir lo siguiente:<\/p>\n<p>.carousel .carousel-inner {<br \/>\nheight: nueva_alturapx;<br \/>\n}<\/p>\n<p>En \u00abnueva_altura\u00bb, definimos el n\u00famero de pixeles que queremos definir para la altura del slider en Prestashop 1.7.<\/p>\n<p>\u2013 O a\u00f1adir una nueva l\u00ednea en el archivo;<\/p>\n<p>\/themes\/classic\/assets\/css\/custom.css<br \/>\n.carousel .carousel-inner{<br \/>\nheight:auto!important;<br \/>\n}<\/p>\n<p><strong>Eliminar linea que aparece debajo del slider de Prestashop 1.7<\/strong> (Con esto yo personalmente, no noto ning\u00fan cambio)<\/p>\n<p>Para esto editaremos el archivo,&nbsp;<strong>homeslider.css<\/strong>, que se encuentra en la ruta:<\/p>\n<p>\/tiendaquesea\/modules\/ps_imageslider\/css\/homeslider.css<\/p>\n<p>Donde pone:<\/p>\n<p>.homeslider-container {<br \/>\nmargin-bottom: 50px;<br \/>\nposition: relative;<br \/>\nfloat: left;<br \/>\nwidth: 100%;<\/p>\n<p>sustituir por:<\/p>\n<p>.homeslider-container {<br \/>\nmargin-bottom: 0px;<br \/>\nposition: relative;<br \/>\nfloat: left;<br \/>\nwidth: 100%;<\/p>\n<p>Si te ha servido este post no me la agradezcas a m\u00ed (para m\u00ed esto es una chuleta para no tener que acordarme del sitio web de donde he sacado esta informaci\u00f3n).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Toda esta informaci\u00f3n la he conseguido gracias a la Web: https:\/\/vegaweb.es\/homeslider-pantalla-completa-prestashop-1-7\/ Un art\u00edculo realizado por Franky Martin. Mi reconocimiento y agradecimiento desde aqu\u00ed. Para hacer que nuestro carrusel de im\u00e1genes ocupe todo el ancho de la pantalla tenemos que seguir unos sencillos pasos, sin necesidad de tocar el c\u00f3digo. Lo primero es ir a la &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/ugalrreko.com\/wordpress\/index.php\/2020\/03\/29\/carrusel-de-imagenes-slider-a-pantalla-completa\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> \u00abCarrusel de Im\u00e1genes (Slider) a pantalla completa.\u00bb<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-240","post","type-post","status-publish","format-standard","hentry","category-prestashop"],"_links":{"self":[{"href":"https:\/\/ugalrreko.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ugalrreko.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ugalrreko.com\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ugalrreko.com\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ugalrreko.com\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=240"}],"version-history":[{"count":9,"href":"https:\/\/ugalrreko.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/240\/revisions"}],"predecessor-version":[{"id":342,"href":"https:\/\/ugalrreko.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/240\/revisions\/342"}],"wp:attachment":[{"href":"https:\/\/ugalrreko.com\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ugalrreko.com\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ugalrreko.com\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}