{"id":4680,"date":"2016-09-13T23:13:55","date_gmt":"2016-09-14T02:13:55","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=4680"},"modified":"2021-08-19T18:58:20","modified_gmt":"2021-08-19T21:58:20","slug":"5-modelos-gratuitos-de-sliders","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/5-modelos-gratuitos-de-sliders\/","title":{"rendered":"5 modelos gratuitos de sliders para seu site"},"content":{"rendered":"

Os Sliders s\u00e3o recursos incr\u00edveis que d\u00e3o um toque de otimiza\u00e7\u00e3o e requinte em seus sites, blogs e e-commerce. Aqui mesmo neste blog, temos um recurso de Slider que oferece aos nossos leitores um espa\u00e7o compactado e de destaque para veicula\u00e7\u00e3o de conte\u00fados recentes.<\/p>\n

Neste artigo listarei 5\u00a0scripts de Sliders gratuitos que v\u00e3o incrementar mais seus projetos.<\/p>\n

Ah, e se voc\u00ea quiser aprender a criar Sliders como esses e aprender tudo sobre HTML, CSS e Javascript, n\u00e3o deixe de conhecer nossos cursos online de Front-End<\/a>.<\/p>\n

Continue lendo.<\/p>\n

1. SlidesJS<\/a><\/h2>\n

\"Site<\/a><\/h2>\n

Este Slider \u00e9 incr\u00edvel. Bem simples, pr\u00e1tico e ainda responsivo. Possui dois tipos de navega\u00e7\u00e3o: Por setas e bullets. Se adapta a diversos tipos de projetos.<\/p>\n

Ver exemplo<\/a><\/strong><\/p>\n

Baixar c\u00f3digo<\/a><\/strong><\/p>\n

2. FlexSlider<\/a><\/h2>\n

\"Site<\/a><\/h2>\n

Tamb\u00e9m responsivo, este Slider tem uma pegada bastante moderna. Desenvolvido em jQuery, seu c\u00f3digo permite diversas configura\u00e7\u00f5es e customiza\u00e7\u00f5es como alterar os efeitos de transi\u00e7\u00e3o. \u00c9 poss\u00edvel veicular imagens e v\u00eddeos. Suas setas ocultas que surgem \u00e0 presen\u00e7a do ponteiro do mouse sobre a imagem \u00e9 um charme a mais.<\/p>\n

Ver exemplo<\/a><\/strong><\/p>\n

Baixar c\u00f3digo<\/a><\/strong><\/p>\n

3. Elastic Slider<\/a><\/h2>\n

\"Site<\/a><\/h2>\n

Tem um design bem peculiar e uma composi\u00e7\u00e3o bem moderna. Este Slider al\u00e9m de responsivo, tem um detalhe importante: Permite inclus\u00e3o de textos em sua composi\u00e7\u00e3o visual, e mais: Permite anima\u00e7\u00f5es e efeitos de transi\u00e7\u00e3o nesses textos. Sua navega\u00e7\u00e3o ocorre por squares que exibem thumbnails ao passar a seta do mouse.<\/p>\n

Ainda oferece 2 modelos distintos: Um com e outro sem autoplay.<\/p>\n

Ver exemplo<\/a><\/strong><\/p>\n

Baixar c\u00f3digo<\/a><\/strong><\/p>\n

4. Blueberry<\/a><\/h2>\n

\"Site<\/a><\/h2>\n

Simplicidade. Esta \u00e9 a palavra que descreve o Slider\u00a0Blueberry. Com uma pegada minimalista e composi\u00e7\u00e3o flex\u00edvel por ser responsivo, tem um efeito de transi\u00e7\u00e3o em fade. Peca no tamanho dos bullets de navega\u00e7\u00e3o, mas dependendo do projeto, pode se adequar facilmente.<\/p>\n

Ver exemplo<\/a><\/strong><\/p>\n

Baixar c\u00f3digo<\/a><\/strong><\/p>\n

5. Slidorion Sliders<\/a><\/h2>\n

\"Site<\/a><\/p>\n

Ideal para projetos como portais de conte\u00fado, portais de jornalismo, etc. Infelizmente, n\u00e3o \u00e9 responsivo, mas sua navega\u00e7\u00e3o ocorre por camadas que se sobrep\u00f5em sobre a outra. Bem interessante.<\/p>\n

Possui uma documenta\u00e7\u00e3o com diversas possibilidades de efeitos e customiza\u00e7\u00f5es.<\/p>\n

Ver exemplo<\/a><\/strong><\/p>\n

Baixar c\u00f3digo<\/a><\/strong><\/p>\n

E a\u00ed? Gostou das dicas? J\u00e1 usa ou usou algum desses Sliders? Conhece outros scripts interessantes? Deixe seu coment\u00e1rio.<\/p>\n

Ah, e como de costume, compartilha esse conte\u00fado com seus contatos.<\/p>\n

\n

Voc\u00ea gostou dessa dica? Quem tal aprender HTML, CSS e Javascript e criar seus pr\u00f3prios Sliders? N\u00f3s possu\u00edmos diversos cursos sobre Front-End<\/a> que ajudar\u00e1 a dominar essas linguagens. N\u00e3o perca tempo, assine agora<\/a>, e venha estudar com a gente.<\/p>\n","protected":false},"excerpt":{"rendered":"

Os Sliders s\u00e3o recursos incr\u00edveis que d\u00e3o um toque de otimiza\u00e7\u00e3o e requinte em seus sites, blogs e e-commerce. Aqui mesmo neste blog, temos um recurso de Slider que oferece aos nossos leitores um espa\u00e7o compactado e de destaque para veicula\u00e7\u00e3o de conte\u00fados recentes. Neste artigo listarei 5\u00a0scripts de Sliders gratuitos que v\u00e3o incrementar mais […]<\/p>\n","protected":false},"author":83,"featured_media":4691,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[],"class_list":["post-4680","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/4680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=4680"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/4680\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/4691"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=4680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=4680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=4680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}