{"id":11956,"date":"2016-09-14T09:06:22","date_gmt":"2016-09-14T07:06:22","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=11956"},"modified":"2016-09-14T09:06:22","modified_gmt":"2016-09-14T07:06:22","slug":"bxslider-uno-slider-di-immagini-e-contenuti-in-jquery","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/bxslider-uno-slider-di-immagini-e-contenuti-in-jquery\/","title":{"rendered":"bxSlider, uno slider di immagini e contenuti in jQuery"},"content":{"rendered":"<p>In questo post, presentiamo uno strumento <em>responsive<\/em> molto interessante per i nostri layout web:\u00a0<a href=\"http:\/\/bxslider.com\/\" target=\"_blank\">bxSlider<\/a>. Il suo scopo \u00e8 fornire uno <strong>slider di immagini e contenuti\u00a0in jQuery<\/strong>\u00a0da installare velocemente al costo di pochissime righe di codice.<\/p>\n<p>Come viene spiegato nell&#8217;homepage del sito, per utilizzarlo, si deve<a href=\"http:\/\/bxslider.com\/lib\/jquery.bxslider.zip\" target=\"_blank\"> scaricare la libreria<\/a> ed integrarla nel layout insieme a jQuery che ne costituisce il prerequisito:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.2\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"\/js\/jquery.bxslider.min.js\"&gt;&lt;\/script&gt;\r\n&lt;link href=\"\/lib\/jquery.bxslider.css\" rel=\"stylesheet\" \/&gt;<\/pre>\n<p>Fatto ci\u00f2, baster\u00e0 indicare, per ogni slider, un blocco di tag &lt;ul&gt;, appartenente\u00a0alla classe bxslider:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;ul class=\"bxslider\"&gt;\r\n  &lt;li&gt;&lt;img src=\"\/images\/pic1.jpg\" \/&gt;&lt;\/li&gt;\r\n  &lt;li&gt;&lt;img src=\"\/images\/pic2.jpg\" \/&gt;&lt;\/li&gt;\r\n  &lt;li&gt;&lt;img src=\"\/images\/pic3.jpg\" \/&gt;&lt;\/li&gt;\r\n  &lt;li&gt;&lt;img src=\"\/images\/pic4.jpg\" \/&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/pre>\n<p>Ed infine, avviare lo slider una volta che il documento sar\u00e0 pronto:<\/p>\n<pre class=\"lang:js decode:true \">$(document).ready(function(){\r\n  $('.bxslider').bxSlider();\r\n});<\/pre>\n<p>Altro aspetto apprezzabile del progetto \u00e8 la lunga <a href=\"http:\/\/bxslider.com\/examples\" target=\"_blank\">galleria di esempi<\/a>, ben spiegati nelle finalit\u00e0 e nei metodi, che non offrono solo ci\u00f2 che ci si aspetterebbe da uno slider ma anche casi di utilizzo pi\u00f9 interessanti che sfruttano contenuti diversi dalle immagini o\u00a0funzioni interne della libreria per la gestione degli eventi che si verificano al caricamento del componente o alla transizione tra una slide e l&#8217;altra.<\/p>\n<p>E voi come realizzate il vostri slider nelle pagine web ? Commentate e fateci sapere !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In questo post, presentiamo uno strumento responsive molto interessante per i nostri layout web:\u00a0bxSlider. Il suo scopo&#8230;<\/p>\n","protected":false},"author":561,"featured_media":12343,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[481],"tags":[1481,1746,1745,1620],"class_list":["post-11956","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-risorse-utili","tag-jquery","tag-librerie-jquery","tag-slider-jquery","tag-web-developer"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/11956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=11956"}],"version-history":[{"count":4,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/11956\/revisions"}],"predecessor-version":[{"id":12344,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/11956\/revisions\/12344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media\/12343"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=11956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=11956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=11956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}