{"id":136,"date":"2015-02-21T02:52:01","date_gmt":"2015-02-21T02:52:01","guid":{"rendered":"http:\/\/drcode.com.br\/blog\/?p=136"},"modified":"2019-08-08T00:55:44","modified_gmt":"2019-08-08T00:55:44","slug":"como-fazer-um-carrossel-com-jquery","status":"publish","type":"post","link":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/","title":{"rendered":"Como fazer um Carrossel com Jquery"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-139\" src=\"http:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel.png\" alt=\"Carrossel com Jquery\" width=\"570\" height=\"269\" srcset=\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel.png 570w, https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel-300x142.png 300w\" sizes=\"auto, (max-width: 570px) 100vw, 570px\" \/><\/p>\n<p>Atualmente com jquery se ve muita coisa pratica de se fazer, e que ajuda muito em nossos sites, uma delas \u00e9 um <strong>carrossel com jquery<\/strong>, alem de ser muito simples se fazer um carrossel, \u00e9 r\u00e1pido e pratico. Mas e ent\u00e3o ? <strong>Como fazer um carrossel com Jquery&nbsp;<\/strong>vamos l\u00e1, voc\u00ea pode ver um exemplo aqui de como vai ficar, \u00e9 s\u00f3 <a title=\"Como fazer um carrosse com Jquery\" href=\"http:\/\/drcode.com.br\/blog\/exemplos\/carrossel\">clicar aqui<\/a>.<\/p>\n<p>Ou se preferir pode baixar tudo prontinho <a title=\"Download do Carrossel Jquery Pronto\" href=\"http:\/\/drcode.com.br\/blog\/exemplos\/carrossel\/carrossel.zip\">clicando aqui<\/a><\/p>\n<h2>HTML do Carrossel<\/h2>\n<p>Primeiro vamos colocar o html em nosso documento.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">&lt;div id=\"content\"&gt;\n\t&lt;div id=\"carrossel\"&gt;\n\t\t&lt;ul&gt;\n\t\t\t&lt;li&gt;\n\t\t\t\t&lt;img src=\"http:\/\/www.placehold.it\/200x150\" alt=\"Nome da Imagem\" title=\"Nome da Imagem\"\/&gt;\n\t\t\t&lt;\/li&gt;\n\t\t\t&lt;li&gt;\n\t\t\t\t&lt;img src=\"http:\/\/www.placehold.it\/200x150\" alt=\"Nome da Imagem\" title=\"Nome da Imagem\"\/&gt;\n\t\t\t&lt;\/li&gt;\n\t\t\t&lt;li&gt;\n\t\t\t\t&lt;img src=\"http:\/\/www.placehold.it\/200x150\" alt=\"Nome da Imagem\" title=\"Nome da Imagem\"\/&gt;\n\t\t\t&lt;\/li&gt;\n\t\t\t&lt;li&gt;\n\t\t\t\t&lt;img src=\"http:\/\/www.placehold.it\/200x150\" alt=\"Nome da Imagem\" title=\"Nome da Imagem\"\/&gt;\n\t\t\t&lt;\/li&gt;\n\t\t\t&lt;li&gt;\n\t\t\t\t&lt;img src=\"http:\/\/www.placehold.it\/200x150\" alt=\"Nome da Imagem\" title=\"Nome da Imagem\"\/&gt;\n\t\t\t&lt;\/li&gt;\n\t\t&lt;\/ul&gt;\n\t&lt;\/div&gt;\n\t&lt;nav id=\"menu-carrossel\"&gt;\n\t\t&lt;a href=\"#\" class=\"prev\" title=\"Anterior\"&gt;Anterior&lt;\/a&gt;\n\t\t&lt;a href=\"#\" class=\"next\" title=\"Pr\u00f3ximo\"&gt;Pr\u00f3ximo&lt;\/a&gt;\n\t&lt;\/nav&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Dentro das li, voc\u00ea pode trocar a imagem por texto, colocar um elemento a para colocar links nas imagens, ou qualquer outra coisa, fica a crit\u00e9rio seu&nbsp;decidir o que vai fazer com o <strong>carrossel jquery<\/strong> de sua p\u00e1gina.<\/p>\n<h2>CSS do Carrossel Jquery<\/h2>\n<p>Agora colocamos o CSS, no css voc\u00ea pode tratar do seu jeito, com suas cores e tamanhos, eu apenas estou colocando aqui para dar um exemplo no Carrossel com Jquery.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-css\">\/*reset*\/\n*{\n    margin: 0;\n    padding: 0;\n    list-style: none ;\n    outline: 0;\n    font-family: 'Arial','Sans-Serif';\n}\n\n#content {\n\tmargin: 0 auto;\n\twidth: 650px;\n\theight: 200px;\n}\n\n#carrossel {\n\tfloat: left;\n\twidth: 630px;\n\toverflow: hidden;\n\theight: 150px;\n}\n\n#carrossel ul li {\n\twidth: 200px;\n\theight: 150px;\n\tfloat: left;\n\tmargin: 0 5px;\n}\n\n#menu-carrossel {\n\tfloat: left;\n\tclear: both;\n\twidth: 100%;\n\ttext-align: center;\n}<\/code><\/pre>\n<p>Voc\u00ea pode personalizar tudo de sua forma e preferencia, o modo como coloquei \u00e9 apenas de exemplo.<\/p>\n<h2>Jquery do Carrossel<\/h2>\n<p>O jquery como todos os scripts tem que ter a galeria jquery ent\u00e3o cole isso no seu c\u00f3digo, antes do fechamento da tag body para quest\u00f5es de melhor carregamento. E lembre-se, a galeria deve ter apenas uma por p\u00e1gina, verifique se voc\u00ea j\u00e1 n\u00e3o possui ela em seu c\u00f3digo para n\u00e3o duplica-l\u00e1.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">&lt;script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Em seguida o plugin do carrossel jquery.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">&lt;script type=\"text\/javascript\" src=\"js\/jcarousellite.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Voc\u00ea pode baixar o plugin completo <a title=\"Download do Script\" href=\"http:\/\/drcode.com.br\/blog\/exemplos\/carrossel\/js\/jcarousellite.js\">clicando aqui<\/a>.<\/p>\n<h2>Configura\u00e7\u00e3o do Carrossel<\/h2>\n<p>E por ultimo o de configura\u00e7\u00e3o do <strong>carrossel<\/strong>.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-javascript\">$(function() {\n    $(\"#carrossel\"). jCarouselLite({\n        btnPrev: '.prev', \n        btnNext: '.next',\n        visible: 3\n    })\n})<\/code><\/pre>\n<p>Ok, agora vou explicar o de configura\u00e7\u00e3o.<\/p>\n<p>Na div #carrossel estamos aplicando o plugin<br \/>\nO btnPrev \u00e9 o bot\u00e3o de prev, o anterior, que ent\u00e3o colocamos entre aspas simples a classe do bot\u00e3o, e o mesmo se aplica para o btnNext<br \/>\nO visible, s\u00e3o a quantidade de imagens que iram aparecer<\/p>\n<p>Voc\u00ea tem in\u00fameras configura\u00e7\u00f5es, como:<\/p>\n<p>Passar automaticamente usando o auto: 800<br \/>\nVelocidade que ele passa usando o speed: 2000<br \/>\nA quantidade de imagens que passam com o scroll: 2<br \/>\nPassar imagens ao rodar o scroll do mouse mouseWheel: true<\/p>\n<p>Voc\u00ea pode ver todas as configura\u00e7\u00f5es na p\u00e1gina do plugin clicando <a title=\"JcarouselLite\" href=\"http:\/\/www.gmarwaha.com\/jquery\/jcarousellite\/demo.php\">neste link<\/a>.<\/p>\n<p>E ent\u00e3o, o que achou ? Deixe um coment\u00e1rio abaixo, com sua opini\u00e3o, ou entre em contato comigo para esclarecer suas d\u00favidas<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Atualmente com jquery se ve muita coisa pratica de se fazer, e que ajuda muito em nossos sites, uma delas \u00e9 um carrossel com jquery, alem de ser muito simples se fazer um carrossel, \u00e9 r\u00e1pido e pratico. Mas e ent\u00e3o ? Como fazer um carrossel com Jquery&nbsp;vamos l\u00e1, voc\u00ea pode ver um exemplo aqui [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":139,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[66,67,69,68,72,71,70],"class_list":["post-136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-carrossel","tag-carrossel-jquery","tag-como-faze-rum-carrossel","tag-como-fazer-um-carrossel-com-jquery","tag-jcarousel","tag-jcarousellite","tag-jquery-carrossel"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Como fazer um Carrossel com Jquery - Dr Code<\/title>\n<meta name=\"description\" content=\"Voc\u00ea sabe como fazer um carrossel com Jquery para sua p\u00e1gina? Eles s\u00e3o muito utilizados para otimizar espa\u00e7o, confira aqui como fazer um carrossel simples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como fazer um Carrossel com Jquery - Dr Code\" \/>\n<meta property=\"og:description\" content=\"Voc\u00ea sabe como fazer um carrossel com Jquery para sua p\u00e1gina? Eles s\u00e3o muito utilizados para otimizar espa\u00e7o, confira aqui como fazer um carrossel simples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Dr Code\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/Dr-Code\/1408258822807332\" \/>\n<meta property=\"article:author\" content=\"http:\/\/www.facebook.com.br\/Felipeourjake\" \/>\n<meta property=\"article:published_time\" content=\"2015-02-21T02:52:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-08T00:55:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel.png\" \/>\n\t<meta property=\"og:image:width\" content=\"570\" \/>\n\t<meta property=\"og:image:height\" content=\"269\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Felipe Mello\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Mello\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/\"},\"author\":{\"name\":\"Felipe Mello\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281\"},\"headline\":\"Como fazer um Carrossel com Jquery\",\"datePublished\":\"2015-02-21T02:52:01+00:00\",\"dateModified\":\"2019-08-08T00:55:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/\"},\"wordCount\":405,\"commentCount\":24,\"image\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel.png\",\"keywords\":[\"carrossel\",\"carrossel jquery\",\"como faze rum carrossel\",\"como fazer um carrossel com jquery\",\"jcarousel\",\"jcarouselLite\",\"jquery carrossel\"],\"articleSection\":[\"JS\/Jquery\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/\",\"url\":\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/\",\"name\":\"Como fazer um Carrossel com Jquery - Dr Code\",\"isPartOf\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel.png\",\"datePublished\":\"2015-02-21T02:52:01+00:00\",\"dateModified\":\"2019-08-08T00:55:44+00:00\",\"author\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281\"},\"description\":\"Voc\u00ea sabe como fazer um carrossel com Jquery para sua p\u00e1gina? Eles s\u00e3o muito utilizados para otimizar espa\u00e7o, confira aqui como fazer um carrossel simples.\",\"breadcrumb\":{\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#primaryimage\",\"url\":\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel.png\",\"contentUrl\":\"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel.png\",\"width\":570,\"height\":269,\"caption\":\"Carrossel com Jquery\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/drcode.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JS\/Jquery\",\"item\":\"https:\/\/drcode.com.br\/blog\/category\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como fazer um Carrossel com Jquery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#website\",\"url\":\"https:\/\/drcode.com.br\/blog\/\",\"name\":\"Dr Code\",\"description\":\"Dicas para desenvoldores web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/drcode.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281\",\"name\":\"Felipe Mello\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g\",\"caption\":\"Felipe Mello\"},\"description\":\"Felipe Mello, desenvolvedor desde 2014. Sendo programador Back-end, Front-end, e Designer. Conhecedor de PHP, CakePHP, Laravel, React, Angular, Node, jQuery\",\"sameAs\":[\"http:\/\/www.facebook.com.br\/Felipeourjake\",\"https:\/\/instagram.com\/felipeourjake\",\"https:\/\/www.linkedin.com\/in\/felipe-melo-62837aa7\/\",\"https:\/\/x.com\/felipeourjake\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como fazer um Carrossel com Jquery - Dr Code","description":"Voc\u00ea sabe como fazer um carrossel com Jquery para sua p\u00e1gina? Eles s\u00e3o muito utilizados para otimizar espa\u00e7o, confira aqui como fazer um carrossel simples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/","og_locale":"pt_BR","og_type":"article","og_title":"Como fazer um Carrossel com Jquery - Dr Code","og_description":"Voc\u00ea sabe como fazer um carrossel com Jquery para sua p\u00e1gina? Eles s\u00e3o muito utilizados para otimizar espa\u00e7o, confira aqui como fazer um carrossel simples.","og_url":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/","og_site_name":"Dr Code","article_publisher":"https:\/\/www.facebook.com\/pages\/Dr-Code\/1408258822807332","article_author":"http:\/\/www.facebook.com.br\/Felipeourjake","article_published_time":"2015-02-21T02:52:01+00:00","article_modified_time":"2019-08-08T00:55:44+00:00","og_image":[{"width":570,"height":269,"url":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel.png","type":"image\/png"}],"author":"Felipe Mello","twitter_misc":{"Escrito por":"Felipe Mello","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#article","isPartOf":{"@id":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/"},"author":{"name":"Felipe Mello","@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281"},"headline":"Como fazer um Carrossel com Jquery","datePublished":"2015-02-21T02:52:01+00:00","dateModified":"2019-08-08T00:55:44+00:00","mainEntityOfPage":{"@id":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/"},"wordCount":405,"commentCount":24,"image":{"@id":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel.png","keywords":["carrossel","carrossel jquery","como faze rum carrossel","como fazer um carrossel com jquery","jcarousel","jcarouselLite","jquery carrossel"],"articleSection":["JS\/Jquery"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/","url":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/","name":"Como fazer um Carrossel com Jquery - Dr Code","isPartOf":{"@id":"https:\/\/drcode.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#primaryimage"},"image":{"@id":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel.png","datePublished":"2015-02-21T02:52:01+00:00","dateModified":"2019-08-08T00:55:44+00:00","author":{"@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281"},"description":"Voc\u00ea sabe como fazer um carrossel com Jquery para sua p\u00e1gina? Eles s\u00e3o muito utilizados para otimizar espa\u00e7o, confira aqui como fazer um carrossel simples.","breadcrumb":{"@id":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#primaryimage","url":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel.png","contentUrl":"https:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/02\/carrossel.png","width":570,"height":269,"caption":"Carrossel com Jquery"},{"@type":"BreadcrumbList","@id":"https:\/\/drcode.com.br\/blog\/jquery\/como-fazer-um-carrossel-com-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/drcode.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"JS\/Jquery","item":"https:\/\/drcode.com.br\/blog\/category\/jquery\/"},{"@type":"ListItem","position":3,"name":"Como fazer um Carrossel com Jquery"}]},{"@type":"WebSite","@id":"https:\/\/drcode.com.br\/blog\/#website","url":"https:\/\/drcode.com.br\/blog\/","name":"Dr Code","description":"Dicas para desenvoldores web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/drcode.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/drcode.com.br\/blog\/#\/schema\/person\/7564c1ae5f763b633f00725927d47281","name":"Felipe Mello","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2dea5d49ac8216203b8c44bcd790eb8b21b19554180cd1dd0dd3debe01da41bf?s=96&d=mm&r=g","caption":"Felipe Mello"},"description":"Felipe Mello, desenvolvedor desde 2014. Sendo programador Back-end, Front-end, e Designer. Conhecedor de PHP, CakePHP, Laravel, React, Angular, Node, jQuery","sameAs":["http:\/\/www.facebook.com.br\/Felipeourjake","https:\/\/instagram.com\/felipeourjake","https:\/\/www.linkedin.com\/in\/felipe-melo-62837aa7\/","https:\/\/x.com\/felipeourjake"]}]}},"views":21930,"_links":{"self":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts\/136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/comments?post=136"}],"version-history":[{"count":3,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts\/136\/revisions"}],"predecessor-version":[{"id":419,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/posts\/136\/revisions\/419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/media\/139"}],"wp:attachment":[{"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/media?parent=136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/categories?post=136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/drcode.com.br\/blog\/wp-json\/wp\/v2\/tags?post=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}