{"id":10684,"date":"2012-11-26T14:05:40","date_gmt":"2012-11-26T13:05:40","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=10684"},"modified":"2023-02-27T14:44:34","modified_gmt":"2023-02-27T14:44:34","slug":"thumbnail-slider-jquery","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/","title":{"rendered":"Realizzare un Thumbnail Slider con jQuery"},"content":{"rendered":"

jQuery<\/strong>, come altri framework javascript, ci d\u00e0 la possibilit\u00e0 di poter realizzare strutture grafiche ad hoc, senza dover per forza ricorrere all’utilizzo di un plugin. In questo intervento analizzeremo come creare un Thumbnail Slider, ossia una struttura composta da un carousel di elementi, controllati da una navigazione a frecce<\/strong> totalmente circolare e quindi navigabile sia da destra verso sinistra che viceversa.<\/p>\n

Struttura Html di base<\/h2>\n

La struttura html da predisporre per il funzionamento e la realizzazione del nostro Thumbnail Slider<\/strong>, \u00e8 piuttosto semplice:<\/p>\n

[html]
\n<div class="thumbs-container"><a class="slide-arrow sx-arrow" href="javascript:void(0);">Left<\/a>
\n <a class="slide-arrow dx-arrow" href="javascript:void(0);">Right<\/a>
\n<div id="thumbs">
\n<ul class="thumbs-wrapper clearfix">
\n\t<li class="thumb">…<\/li>
\n\t<li class="thumb">…<\/li>
\n\t<li class="thumb">…<\/li>
\n\t<li class="thumb">…<\/li>
\n\t<li class="thumb">…<\/li>
\n\t<li class="thumb">…<\/li>
\n\t<li class="thumb">…<\/li>
\n<\/ul>
\n<\/div>
\n<\/div>
\n[\/html]<\/p>\n

Il <div class=”thumbs-container”> ci servir\u00e0 principalmente per poter posizionare correttamente le frecce. Il tag <div id=”thumbs”> sar\u00e0 l’elemento che determiner\u00e0 le dimensioni effettive del nostro slider, sostanzialmente servir\u00e0 per delimitare la porzione che sar\u00e0 visibile nella nostra pagina.<\/p>\n

Il contenitore <ul class=”thumbs-wrapper”> sar\u00e0, invece, il carousel contenente le nostre anteprime<\/strong> (<li class=”thumb”><\/li>). Le frecce ci permetteranno di poter scorrere il nostro slider a nostro piacimento. Potranno essere skinnate e personalizzate a nostro piacimento via Css.<\/p>\n

Propriet\u00e0 Css utilizzate<\/h2>\n

[css]
\n.thumbs-container{
\n\tposition:relative;
\n\twidth:540px;
\n\theight:360px;
\n\tmargin-left:150px;
\n}
\n.thumbs-container .slide-arrow{
\n\tdisplay:block;
\n\twidth:64px;
\n\theight:96px;
\n\tposition:absolute;
\n\ttop:70px;
\n\tleft:-70px;
\n}
\n.thumbs-container .slide-arrow.dx-arrow{
\n\tleft:auto;
\n\tright:-85px;
\n}
\n#thumbs{
\n\twidth: 540px;
\n\theight: 360px;
\n\toverflow: hidden;
\n\tposition: relative;
\n}
\n.thumbs-wrapper{
\n\tposition: absolute;
\n\twidth: 3000em;
\n\ttop: 0;
\n\tleft: 0;
\n}
\n.thumbs-wrapper .thumb {
\n\tfloat: left;
\n\twidth: 160px;
\n\theight: 100px;
\n\tmargin: 30px 30px 0 0;
\n\tbackground-color:red;
\n}
\n[\/css]<\/p>\n

Per quanto riguarda le regole css, sar\u00e0 importante impostare al nostro <div id=”thumbs”><\/div> posizione relativa, dimensioni fisse e overflow hidden, in modo tale da creare una vera e propria sezione delimitata che nasconda gli elementi all’esterno di essa.<\/p>\n

Il nostro “wrapper” dovr\u00e0 avere posizione assoluta e dimensioni molto grandi, questo perch\u00e9 dovr\u00e0 scorrere orizzontalmente e dovr\u00e0 poter contenere un qualsiasi numero di thumbs. Le “thumbs” dovranno avere float:left e dimensione fissa e di conseguenza il suo contenitore (in questo caso proprio il nostro wrapper) dovr\u00e0 prevedere una classe clearfix o comunque delle regole css per una corretta visualizzazione crossbrowser<\/strong>, di elementi allineati con float.<\/p>\n

Le frecce avranno sempre posizione assoluta e si potranno posizionare a piacimento. Ovviamente dovranno essere posizionate al di fuori della struttara per lo slider, poich\u00e9 essendo posizionate ai lati di esso, nel caso le inserissimo dentro il div con id=”thumbs” verrebbero tagliate dal contenitore stesso per via delle sue regole css.<\/p>\n

Codice Javascript\/jQuery<\/h2>\n

Veniamo ora alla parte principale di questo intervento. Innanzitutto dichiariamo le variabili che ci serviranno nel corso di questo script, perci\u00f2 preleviamo la larghezza delle thumb (in questo caso specifico larghezza + margine sinistro), il wrapper, una variabile di controllo per prevenire molteplici istanze di click e il punto di partenza che verr\u00e0 ricavato come larghezza delle thumb moltiplicata per il numero delle thumb stesse.<\/p>\n

[js]
\n\t\tvar width = -($(‘.thumbs-wrapper li’).outerWidth() + (parseInt($(‘.thumbs-wrapper li’).css(‘marginRight’)))),
\n\t\t\tslider = $(‘.thumbs-wrapper’),
\n\t\t\tmove = false,
\n\t\t\tstart = width*($(‘.thumbs-wrapper’).find(‘.thumb’).size());<\/p>\n

\t\t$(‘.thumbs-wrapper’).find(‘.thumb’).clone().addClass(‘cloned’).appendTo($(‘.thumbs-wrapper’));
\n\t\t$(‘.thumbs-wrapper’).find(‘.thumb.cloned’).clone().addClass(‘cloned’).insertBefore($(‘.thumbs-wrapper .thumb:first-child’));
\n\t\tslider.css("left", start + "px");<\/p>\n

\t\t$(‘.sx-arrow’).click(function(){
\n\t\t\tif (!move) {
\n\t\t\t\tmove = true;
\n\t\t\t\tslider.animate({
\n\t\t\t\t\tleft: ‘-=’ + width
\n\t\t\t\t}, function() {
\n\t\t\t\t\t\tif ( parseInt(slider.css(‘left’)) == 0 ) {
\n\t\t\t\t\t\t\tslider.css("left", start + "px");
\n\t\t\t\t\t\t}
\n\t\t\t\t\t\tmove = false;
\n\t\t\t\t\t}
\n\t\t\t\t);
\n\t\t\t};
\n\t\t})<\/p>\n

\t\t$(‘.dx-arrow’).click(function(){
\n\t\t\tif (!move) {
\n\t\t\t\tmove = true;
\n\t\t\t\tslider.animate({
\n\t\t\t\t\tleft: ‘+=’ + width
\n\t\t\t\t}, function() {
\n\t\t\t\t\t\tif ( parseInt(slider.css(‘left’)) == 2 * start ) {
\n\t\t\t\t\t\t\tslider.css("left", start + "px" );
\n\t\t\t\t\t\t};
\n\t\t\t\t\t\tmove = false;
\n\t\t\t\t\t}
\n\t\t\t\t)
\n\t\t\t};
\n\t\t});
\n[\/js]<\/p>\n

A questo punto bisogna pensare di predisporre una struttura che dia la possibilit\u00e0 di navigazione circolare del nostro slider, ovvero dare la possibilit\u00e0 all’utente di poter scorrere le thumbnail orizzontalmente<\/strong> senza mai concludere il ciclo di rotazione. Per farlo baster\u00e0 copiare le nostre thumbs due volte, ed inserire la prima copia in coda ad esse e la seconda copia posta prima di esse, in modo tale da “circondare” le nostre thumbs sia a destra che a sinistra. Utilizzeremo la funzione di jQuery clone() per clonare gli elementi, appendTo() per inserire la prima copia in coda e insertBefore() per inserire la seconda copia “in cima” al contenitore.<\/p>\n

Step successivo sar\u00e0 quello di realizzare il movimento orizzontale, utilizzando l’evento click() che verr\u00e0 applicato alle nostre frecce. All’interno di esso utilizzeremo la funzione animate() di jQuery per poter agire sul left del nostro wrapper e creare l’effetto di movimento<\/strong>. Per prima cosa si controller\u00e0 che lo slider non sia in movimento (variabile “move”), se la condizione \u00e8 verificata si valorizza subito a true e poi verr\u00e0 riportata a false al complete della funzione animate(), ossia nel momento esatto in cui lo spostamento di una thumb sia concluso, questo per poter prevenire molteplici istanze di click. Dopodich\u00e9 si attiver\u00e0 l’animazione spostando il left del wrapper in modo positivo o negativo a seconda della freccia su cui abbiamo cliccato e sempre al complete dell’animazione effettueremo un controllo che differir\u00e0 sempre in base alla freccia cliccata. Per la freccia di destra si controller\u00e0 sostanzialmente se il left del nostro wrapper \u00e8 uguale a due volte il punto di partenza iniziale. Tradotto: se siamo arrivati al primo elemento della lista clonata posta in coda alle nostre thumbs il left viene riposizionato al punto di partenza. Stesso discorso vale per la freccia di sinistra, ma il nostro punto di arrivo in questo caso sar\u00e0 a left=0, cio\u00e8 quando capitiamo sul primo elemento clonato della nostra lista. Cos\u00ec facendo ogniqualvolta capitiamo sull’ultimo elemento delle thumbs clonate in coda o sul primo elemento delle thumbs clonate in cima, lo stato viene riportato alla situazione iniziale.<\/p>\n

Per maggiore chiarezza, su jsfiddle.net, \u00e8 possibile visualizzare una semplice demo<\/a> realizzata da me.<\/p>\n","protected":false},"excerpt":{"rendered":"

jQuery<\/strong>, come altri framework javascript, ci d\u00e0 la possibilit\u00e0 di realizzare strutture grafiche ad hoc. In questo intervento analizzeremo come creare un Thumbnail Slider, una struttura composta da un carousel di elementi, controllati da una navigazione a frecce<\/strong>.<\/p>\n","protected":false},"author":4,"featured_media":12461,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[300],"tags":[96,97,279,280],"class_list":["post-10684","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","tag-javascript","tag-jquery","tag-slider","tag-slideshow"],"yoast_head":"\n\u2022 Realizzare un Thumbnail Slider con jQuery - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Realizzare un Thumbnail Slider con jQuery. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Realizzare un Thumbnail Slider con jQuery - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Realizzare un Thumbnail Slider con jQuery. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Artera\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/artera.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2012-11-26T13:05:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:44:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2012\/11\/jquery1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1\" \/>\n\t<meta property=\"og:image:height\" content=\"1\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sergio Ravera\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergio Ravera\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Realizzare un Thumbnail Slider con jQuery\",\"datePublished\":\"2012-11-26T13:05:40+00:00\",\"dateModified\":\"2023-02-27T14:44:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/\"},\"wordCount\":1087,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2012\\\/11\\\/jquery1.jpg\",\"keywords\":[\"javascript\",\"jquery\",\"slider\",\"slideshow\"],\"articleSection\":[\"Marketing\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/\",\"name\":\"\u2022 Realizzare un Thumbnail Slider con jQuery - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2012\\\/11\\\/jquery1.jpg\",\"datePublished\":\"2012-11-26T13:05:40+00:00\",\"dateModified\":\"2023-02-27T14:44:34+00:00\",\"description\":\"Leggi dal blog: Realizzare un Thumbnail Slider con jQuery. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2012\\\/11\\\/jquery1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2012\\\/11\\\/jquery1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/thumbnail-slider-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Realizzare un Thumbnail Slider con jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"name\":\"Artera\",\"description\":\"Swiss Premium Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.artera.net\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\",\"name\":\"Artera\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"width\":300,\"height\":77,\"caption\":\"Artera\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/artera.net\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/artera\\\/\",\"https:\\\/\\\/www.instagram.com\\\/artera_swiss\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\",\"name\":\"Sergio Ravera\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"caption\":\"Sergio Ravera\"},\"description\":\"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sergioravera\\\/\"],\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/author\\\/sergio-ravera\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u2022 Realizzare un Thumbnail Slider con jQuery - Artera","description":"Leggi dal blog: Realizzare un Thumbnail Slider con jQuery. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","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:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Realizzare un Thumbnail Slider con jQuery - Artera","og_description":"Leggi dal blog: Realizzare un Thumbnail Slider con jQuery. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2012-11-26T13:05:40+00:00","article_modified_time":"2023-02-27T14:44:34+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2012\/11\/jquery1.jpg","width":1,"height":1,"type":"image\/jpeg"}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"5 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Realizzare un Thumbnail Slider con jQuery","datePublished":"2012-11-26T13:05:40+00:00","dateModified":"2023-02-27T14:44:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/"},"wordCount":1087,"commentCount":3,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2012\/11\/jquery1.jpg","keywords":["javascript","jquery","slider","slideshow"],"articleSection":["Marketing"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/","url":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/","name":"\u2022 Realizzare un Thumbnail Slider con jQuery - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2012\/11\/jquery1.jpg","datePublished":"2012-11-26T13:05:40+00:00","dateModified":"2023-02-27T14:44:34+00:00","description":"Leggi dal blog: Realizzare un Thumbnail Slider con jQuery. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2012\/11\/jquery1.jpg","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2012\/11\/jquery1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/marketing\/thumbnail-slider-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Realizzare un Thumbnail Slider con jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.artera.net\/it\/#website","url":"https:\/\/www.artera.net\/it\/","name":"Artera","description":"Swiss Premium Hosting","publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.artera.net\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.artera.net\/it\/#organization","name":"Artera","url":"https:\/\/www.artera.net\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","width":300,"height":77,"caption":"Artera"},"image":{"@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/artera.net\/","https:\/\/www.linkedin.com\/company\/artera\/","https:\/\/www.instagram.com\/artera_swiss\/"]},{"@type":"Person","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0","name":"Sergio Ravera","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","caption":"Sergio Ravera"},"description":"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.","sameAs":["https:\/\/www.linkedin.com\/in\/sergioravera\/"],"url":"https:\/\/www.artera.net\/it\/author\/sergio-ravera\/"}]}},"_links":{"self":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/10684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/comments?post=10684"}],"version-history":[{"count":1,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/10684\/revisions"}],"predecessor-version":[{"id":234486,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/10684\/revisions\/234486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media\/12461"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=10684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=10684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=10684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}