{"id":3188,"date":"2012-07-07T13:40:49","date_gmt":"2012-07-07T13:40:49","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3188"},"modified":"2019-06-14T10:41:14","modified_gmt":"2019-06-14T10:41:14","slug":"carrousel-de-contenido-html","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/","title":{"rendered":"Carrousel de contenido HTML"},"content":{"rendered":"

Un carrusel<\/strong> es un medio de diversi\u00f3n consistente en una plataforma rotatoria con asientos para los pasajeros. Tradicionalmente los asientos poseen formas de caballos de madera u otros animales, los cuales en muchos casos son desplazados mec\u00e1nicamente hacia arriba para simular el galope de un caballo. Normalmente, la m\u00fasica se repite mientras el carrusel<\/strong> da vueltas.<\/p>\n

Cualquier plataforma rotatoria tambi\u00e9n se puede llamar carrusel. En t\u00e9rminos inform\u00e1ticos o, m\u00e1s concretamente, en el desarrollo Web, el concepto carrusel<\/strong> tambi\u00e9n est\u00e1 muy presente. Muchas p\u00e1ginas Webs tienen uno y se utilizan principalmente para mostrar publicidad en formato imagen o texto con el principal objetivo de destacar contenido y\/o llamar la atenci\u00f3n del usuario con su movimiento.<\/p>\n

Debido a que este tipo de elementos es muy utilizando hoy en d\u00eda, en este art\u00edculo vamos a ver como crear un carrousel<\/strong> con contenido HTML<\/strong> que est\u00e1 a la espera de que el usuario haga clic en las flechas que aparecen en los laterales del carrousel<\/strong> para pasar al resto de contenido no visible.<\/p>\n

\"\"<\/a>Tal como vemos en la imagen el carrousel<\/strong> est\u00e1 compuesto por elementos que tienen una foto, t\u00edtulo y precio. Esto es un ejemplo. Teniendo la posibilidad de agregar contenido HTML<\/strong>, se puede incrustar cualquier tipo de c\u00f3digo en cada elemento.<\/p>\n

Para obtener este carrousel<\/strong>\u00a0en el cuerpo de la p\u00e1gian o dentro de la etiqueta <body> puedes agregar un c\u00f3digo similar al siguiente:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> id<\/span>=<\/span>"carrusel"<\/span>><\/span>\n    <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"left-arrow"<\/span>><img<\/span><\/a> src<\/span>=<\/span>"images\/left-arrow.png"<\/span> \/<\/span>><\/<\/span>a<\/span><\/a>><\/span>\n    <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"right-arrow"<\/span>><img<\/span><\/a> src<\/span>=<\/span>"images\/right-arrow.png"<\/span> \/<\/span>><\/<\/span>a<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"carrusel"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"product"<\/span> id<\/span>=<\/span>"product_0"<\/span>><\/span>\n            <img<\/span><\/a> src<\/span>=<\/span>"gallery\/01.jpg"<\/span> width<\/span>=<\/span>"195"<\/span> height<\/span>=<\/span>"100"<\/span> \/<\/span>><\/span>\n            <h5<\/span><\/a>><\/span>Lorem ipsum 1<\/<\/span>h5<\/span><\/a>><\/span>\n            <p<\/span><\/a>><\/span>165.00 \u20ac<\/<\/span>p<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"product"<\/span> id<\/span>=<\/span>"product_1"<\/span>><\/span>\n            <img<\/span><\/a> src<\/span>=<\/span>"gallery\/02.jpg"<\/span> width<\/span>=<\/span>"195"<\/span> height<\/span>=<\/span>"100"<\/span> \/<\/span>><\/span>\n            <h5<\/span><\/a>><\/span>Lorem ipsum 2<\/<\/span>h5<\/span><\/a>><\/span>\n            <p<\/span><\/a>><\/span>100.00 \u20ac<\/<\/span>p<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"product"<\/span> id<\/span>=<\/span>"product_2"<\/span>><\/span>\n            <img<\/span><\/a> src<\/span>=<\/span>"gallery\/03.jpg"<\/span> width<\/span>=<\/span>"195"<\/span> height<\/span>=<\/span>"100"<\/span> \/<\/span>><\/span>\n            <h5<\/span><\/a>><\/span>Lorem ipsum 3<\/<\/span>h5<\/span><\/a>><\/span>\n            <p<\/span><\/a>><\/span>250.00 \u20ac<\/<\/span>p<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"product"<\/span> id<\/span>=<\/span>"product_3"<\/span>><\/span>\n            <img<\/span><\/a> src<\/span>=<\/span>"gallery\/01.jpg"<\/span> width<\/span>=<\/span>"195"<\/span> height<\/span>=<\/span>"100"<\/span> \/<\/span>><\/span>\n            <h5<\/span><\/a>><\/span>Lorem ipsum 4<\/<\/span>h5<\/span><\/a>><\/span>\n            <p<\/span><\/a>><\/span>75.00 \u20ac<\/<\/span>p<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"product"<\/span> id<\/span>=<\/span>"product_4"<\/span>><\/span>\n            <img<\/span><\/a> src<\/span>=<\/span>"gallery\/02.jpg"<\/span> width<\/span>=<\/span>"195"<\/span> height<\/span>=<\/span>"100"<\/span> \/<\/span>><\/span>\n            <h5<\/span><\/a>><\/span>Lorem ipsum 5<\/<\/span>h5<\/span><\/a>><\/span>\n            <p<\/span><\/a>><\/span>65.00 \u20ac<\/<\/span>p<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"product"<\/span> id<\/span>=<\/span>"product_5"<\/span>><\/span>\n            <img<\/span><\/a> src<\/span>=<\/span>"gallery\/03.jpg"<\/span> width<\/span>=<\/span>"195"<\/span> height<\/span>=<\/span>"100"<\/span> \/<\/span>><\/span>\n            <h5<\/span><\/a>><\/span>Lorem ipsum 6<\/<\/span>h5<\/span><\/a>><\/span>\n            <p<\/span><\/a>><\/span>40.00 \u20ac<\/<\/span>p<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
En cabecera de la p\u00e1gina o dentro de la etiqueta <head> agrega el c\u00f3digo jQuery<\/strong> que permite el dinamismo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>script src=<\/span>"https:\/\/code.jquery.com\/jquery-3.2.1.js"<\/span>><\/<\/span>script><\/span>\n<<\/span>script><\/span>\nvar<\/span> current =<\/span> 0<\/span>;<\/span>\nvar<\/span> imagenes =<\/span> new<\/span> Array(<\/span>)<\/span>;<\/span>\n \n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n    var<\/span> numImages =<\/span> 6<\/span>;<\/span>\n    if<\/span> (<\/span>numImages <=<\/span> 3<\/span>)<\/span> {<\/span>\n        $(<\/span>'.right-arrow'<\/span>)<\/span>.css<\/span>(<\/span>'display'<\/span>,<\/span> 'none'<\/span>)<\/span>;<\/span>\n        $(<\/span>'.left-arrow'<\/span>)<\/span>.css<\/span>(<\/span>'display'<\/span>,<\/span> 'none'<\/span>)<\/span>;<\/span>\n    }<\/span>\n \n    $(<\/span>'.left-arrow'<\/span>)<\/span>.on<\/span>(<\/span>'click'<\/span>,<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n        if<\/span> (<\/span>current ><\/span> 0)<\/span> {<\/span>\n            current =<\/span> current -<\/span> 1<\/span>;<\/span>\n        }<\/span> else<\/span> {<\/span>\n            current =<\/span> numImages -<\/span> 3<\/span>;<\/span>\n        }<\/span>\n \n        $(<\/span>".carrusel"<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>"left"<\/span>:<\/span> -<\/span>(<\/span>$(<\/span>'#product_'<\/span>+<\/span>current)<\/span>.position<\/span>(<\/span>)<\/span>.left<\/span>)<\/span>}<\/span>,<\/span> 600)<\/span>;<\/span>\n \n        return<\/span> false<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>\n \n    $(<\/span>'.left-arrow'<\/span>)<\/span>.on<\/span>(<\/span>'hover'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n        $(<\/span>this<\/span>)<\/span>.css<\/span>(<\/span>'opacity'<\/span>,<\/span>'0.5'<\/span>)<\/span>;<\/span>\n    }<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n        $(<\/span>this<\/span>)<\/span>.css<\/span>(<\/span>'opacity'<\/span>,<\/span>'1'<\/span>)<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>\n \n    $(<\/span>'.right-arrow'<\/span>)<\/span>.on<\/span>(<\/span>'hover'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n        $(<\/span>this<\/span>)<\/span>.css<\/span>(<\/span>'opacity'<\/span>,<\/span>'0.5'<\/span>)<\/span>;<\/span>\n    }<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n        $(<\/span>this<\/span>)<\/span>.css<\/span>(<\/span>'opacity'<\/span>,<\/span>'1'<\/span>)<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>\n \n    $(<\/span>'.right-arrow'<\/span>)<\/span>.on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n        if<\/span> (<\/span>numImages ><\/span> current +<\/span> 3)<\/span> {<\/span>\n            current =<\/span> current+<\/span>1<\/span>;<\/span>\n        }<\/span> else<\/span> {<\/span>\n            current =<\/span> 0<\/span>;<\/span>\n        }<\/span>\n \n        $(<\/span>".carrusel"<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>"left"<\/span>:<\/span> -<\/span>(<\/span>$(<\/span>'#product_'<\/span>+<\/span>current)<\/span>.position<\/span>(<\/span>)<\/span>.left<\/span>)<\/span>}<\/span>,<\/span> 600)<\/span>;<\/span>\n \n        return<\/span> false<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span> \n }<\/span>)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
El c\u00f3digo anterior tambi\u00e9n puede ser agregado dentro del cuerpo de la p\u00e1gina, justo antes de la etiqueta de cierre.<\/p>\n
En \u00e9l estamos controlando el evento clic de las flechas derecha e izquierda para mover con animaci\u00f3n los elementos del carrusel<\/strong>.<\/p>\n
Finalmente, faltan agregar algunas reglas de estilo para definir el dise\u00f1o del carrusel<\/strong> que puedes agregar en tu hoja de estilos CSS<\/strong>:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
#carrusel<\/span> {<\/span>\n    float<\/span>:<\/span>left<\/span>;<\/span>\n    width<\/span>:<\/span>600px<\/span>;<\/span>\n    overflow<\/span>:<\/span>hidden<\/span>;<\/span>\n    height<\/span>:<\/span>203px<\/span>;<\/span>\n    position<\/span>:<\/span>relative<\/span>;<\/span>\n    margin-top<\/span>:<\/span>20px<\/span>;<\/span>\n    margin-bottom<\/span>:<\/span>20px<\/span>;<\/span>\n}<\/span>\n \n#carrusel<\/span> .left-arrow<\/span> {<\/span>\n    position<\/span>:<\/span>absolute<\/span>;<\/span>\n    left<\/span>:<\/span>10px<\/span>;<\/span>\n    z-index<\/span>:<\/span>1<\/span>;<\/span>\n    top<\/span>:<\/span>50<\/span>%<\/span>;<\/span>\n    margin-top<\/span>:<\/span>-9px<\/span>;<\/span>\n}<\/span>\n \n#carrusel<\/span> .right-arrow<\/span> {<\/span>\n    position<\/span>:<\/span>absolute<\/span>;<\/span>\n    right<\/span>:<\/span>10px<\/span>;<\/span>\n    z-index<\/span>:<\/span>1<\/span>;<\/span>\n    top<\/span>:<\/span>50<\/span>%<\/span>;<\/span>\n    margin-top<\/span>:<\/span>-9px<\/span>;<\/span>\n}<\/span>\n \n.carrusel<\/span> {<\/span>\n    width<\/span>:<\/span>4000px<\/span>;<\/span>\n    left<\/span>:<\/span>0px<\/span>;<\/span>\n    position<\/span>:<\/span>absolute<\/span>;<\/span>\n    z-index<\/span>:<\/span>0<\/span>;<\/span>\n}<\/span>\n \n.carrusel><\/span>div {<\/span>\n    float<\/span>:<\/span> left<\/span>;<\/span>\n    height<\/span>:<\/span> 203px<\/span>;<\/span>\n    margin-right<\/span>:<\/span> 5px<\/span>;<\/span>\n    width<\/span>:<\/span> 195px<\/span>;<\/span>\n    text-align<\/span>:<\/span>center<\/span>;<\/span>\n}<\/span>\n \n.carrusel<\/span> img {<\/span>\n    cursor<\/span>:<\/span>pointer<\/span>;<\/span>\n}<\/span>\n \n.product<\/span> {<\/span>\n    border<\/span>:<\/span>#CCCCCC<\/span> 1px<\/span> solid<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Bien es cierto que existen una infinidad de plugins para agregar un carrusel en tu sitio Web pero, en la mayor\u00eda de los casos, quiz\u00e1 tienen demasiadas opciones que con frecuencia no sabes manejar o se requieren de mucho espacio en el servidor para depositar sus archivos. Este c\u00f3digo es muy simple y liviano. Se puede personalizar f\u00e1cilmente si tienes conocimientos avanzados sobre jQuery<\/strong>.<\/p>\n
Para adaptar este c\u00f3digo a los dispositivos peque\u00f1os es posible utilizar media queries<\/strong>.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Tutorial y c\u00f3digo de ejemplo que te permite agregar un carrusel con contenido HTML a tu p\u00e1gina Web. C\u00f3digo muy simple y liviano mediante el uso de jQuery.<\/p>\n","protected":false},"author":1,"featured_media":7326,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[51,74,110],"class_list":["post-3188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-carousel","tag-contenedores","tag-imagenes"],"yoast_head":"\nCarrousel de contenido HTML - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite agregar un carrusel con contenido HTML a tu p\u00e1gina Web. C\u00f3digo muy simple y liviano mediante el uso de jQuery.\" \/>\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=\"Carrousel de contenido HTML - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite agregar un carrusel con contenido HTML a tu p\u00e1gina Web. C\u00f3digo muy simple y liviano mediante el uso de jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/\" \/>\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=\"2012-07-07T13:40:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-14T10:41:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/carrousel-de-contenido-html.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\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=\"4 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\/carrousel-de-contenido-html\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/\",\"name\":\"Carrousel de contenido HTML - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/carrousel-de-contenido-html.png\",\"datePublished\":\"2012-07-07T13:40:49+00:00\",\"dateModified\":\"2019-06-14T10:41:14+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Tutorial y c\u00f3digo de ejemplo que te permite agregar un carrusel con contenido HTML a tu p\u00e1gina Web. C\u00f3digo muy simple y liviano mediante el uso de jQuery.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/carrousel-de-contenido-html.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/carrousel-de-contenido-html.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Carrousel de contenido HTML\"}]},{\"@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":"Carrousel de contenido HTML - Jose Aguilar Blog","description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar un carrusel con contenido HTML a tu p\u00e1gina Web. C\u00f3digo muy simple y liviano mediante el uso de jQuery.","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":"Carrousel de contenido HTML - Jose Aguilar Blog","og_description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar un carrusel con contenido HTML a tu p\u00e1gina Web. C\u00f3digo muy simple y liviano mediante el uso de jQuery.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-07-07T13:40:49+00:00","article_modified_time":"2019-06-14T10:41:14+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/carrousel-de-contenido-html.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":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/","url":"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/","name":"Carrousel de contenido HTML - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/carrousel-de-contenido-html.png","datePublished":"2012-07-07T13:40:49+00:00","dateModified":"2019-06-14T10:41:14+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar un carrusel con contenido HTML a tu p\u00e1gina Web. C\u00f3digo muy simple y liviano mediante el uso de jQuery.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/carrousel-de-contenido-html.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/carrousel-de-contenido-html.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/carrousel-de-contenido-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Carrousel de contenido HTML"}]},{"@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\/3188","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=3188"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3188\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7326"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}