{"id":14984,"date":"2013-06-25T15:32:41","date_gmt":"2013-06-25T13:32:41","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=14984"},"modified":"2023-02-27T14:40:46","modified_gmt":"2023-02-27T14:40:46","slug":"slider-animazione-slideinleft-slideinright","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/","title":{"rendered":"Slider jQuery con animazione SlideInLeft\/SlideInRight"},"content":{"rendered":"

A gentile richiesta di una nostra lettrice, vi proporr\u00f2 uno slider con animazione SlideInLeft\/SlideInRight<\/strong>, che consiste nel far comparire l\u2019elemento successivo o precedente rispettivamente da destra verso sinistra o da sinistra verso destra, facendo \u201cscivolare\u201d i nuovi elementi sopra a quello attuale. A parole pu\u00f2 sembrare un\u2019animazione complessa, ma vedrete subito che si tratta di un effetto semplice e allo stesso tempo efficace.<\/p>\n

Markup HTML<\/h2>\n

La struttura HTML dello slider \u00e8 esattamente la stessa dello slider nivo<\/a> precedentemente realizzato da me, eccezion fatta per le immagini che ho inserito all\u2019interno dei div con classe element per rendere l\u2019effetto dello slider<\/strong> pi\u00f9 chiaro.<\/p>\n

[code type=”markup”]<\/p>\n

\n
<\/div>\n

\t«
\n\t»<\/p>\n

\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/p><\/div>\n<\/div>\n

[\/code]<\/p>\n

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

Lo slider avr\u00e0 una struttura molto simile a quella di uno Slider Nivo, infatti avr\u00e0 un wrapper con dimensioni fisse, che conterr\u00e0 tutti i nostri elementi, un sistema di navigazione a frecce e un sistema di navigazione a pallini.<\/p>\n

Il wrapper avr\u00e0 le seguenti regole Css:<\/p>\n

[code type=”css”]
\n#nivo{
\n position: relative;
\n overflow: hidden;
\n width: 620px;
\n height: 460px;
\n}
\n[\/code]<\/p>\n

Il wrapper pi\u00f9 esterno, ovvero il contenitore di tutta la struttura, avr\u00e0 le stesse regole principali. Sostanzialmente entrambi avranno dimensioni fisse, position:relative e overflow hidden.<\/p>\n

Queste regole sono necessarie per poter avere i figli, ovvero i div con classe element, posizionati in modo assoluto rispetto al padre, e quindi sovrapposti uno all\u2019altro. Per far ci\u00f2 bisogna assegnare agli elementi position:absolute, left e right ad “auto” e dimensioni fisse. Assegneremo, inoltre, anche un valore di z-index sempre pari ad “auto” che ci verr\u00e0 utile nella realizzazione dello script<\/strong> per far s\u00ec che gli elementi che compaiono, a cui verr\u00e0 assegnato tramite javascript z-index pari a 1, stiano sempre ad un livello superiore rispetto a quello dell\u2019elemento che verr\u00e0 nascosto. Mettiamo anche la regola display:none, poich\u00e9 ogni elemento nello stato iniziale, non sar\u00e0 visibile, tranne il primo della lista che per\u00f2 visualizzeremo tramite il codice Js del nostro Slider.<\/p>\n

[code type=”css”]
\n#nivo .element {
\ndisplay:none;
\nposition: absolute;
\ntop: 0;
\nright: auto;
\nleft: auto;
\nwidth: 620px;
\nheight: 460px;
\nzoom: 1;
\nz-index:auto;
\n}
\n[\/code]<\/p>\n

Infine abbiamo i nostri elementi di navigazione, che sono i medesimi di quelli presenti nello Slider Nivo<\/a>, che serviranno per poter scorrere le nostre immagini.<\/p>\n

[code type=”css”]
\n.prev{
\n position: absolute;
\n top: 185px;
\n left: -40px;
\n cursor: pointer;
\n color:#000;
\n font-size:50px;
\n line-height:normal;
\n text-decoration:none;
\n}
\n.next{
\n position: absolute;
\n top: 185px;
\n line-height:normal;
\n right: -40px;
\n cursor: pointer;
\n color:#000;
\n font-size:50px;
\n text-decoration:none;
\n}
\n.navigation{ position:absolute; top:auto; bottom:-20px; z-index:300; right:0; }
\n.navigation a{
\n display:block;
\n background:#000;
\n -webkit-border-radius:10px;
\n -moz-border-radius:10px;
\n -ms-border-radius:10px;
\n -o-border-radius:10px;
\n border-radius:10px;
\n border:none;
\n width:11px;
\n height:11px;
\n text-indent:-999em;
\n overflow:hidden;
\n margin:8px 5px 0 0;
\n cursor:pointer;
\n float:left;
\n}
\n.navigation a.active , .navigation a:hover { background-color:red; }
\n[\/code]<\/p>\n

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

Veniamo alla parte pi\u00f9 interessante di questo intervento: per prima cosa dichiariamo le variabili che ci serviranno nel corso del nostro script.<\/p>\n

[code type=”javascript”]
\nvar
\n sliderElements = $(‘#nivo’).find(‘.element’),
\n\tnEle = sliderElements.length,
\n\tnavigation = $(‘.navigation’),
\n\ti = 0,
\n\tcounter = 0,
\n\tspeed = 800,
\n\tdelta = $(‘#nivo .element’).width(),
\n\tmove = false;
\n[\/code]<\/p>\n

Ci servir\u00e0 la lista di elementi sottoforma di array, il numero degli elementi, la velocit\u00e0 in ms, che possiamo modificare a nostro piacimento e secondo le nostre esigenze e la dimensione di un singolo elemento che ci servir\u00e0 per sapere di quanto dovr\u00e0 spostarsi un elemento per uscire dalla nostra area di visualizzazione. Infine alcune variabili numeriche e la variabile move che ci servir\u00e0 per poter prevenire molteplici istanze di movimento del nostro slider.<\/p>\n

Per questo slider con animazione SlideInLeft\/SlideInRight<\/strong> sono riuscito ad ottimizzare le istruzioni e a definire una sola funzione che si occuper\u00e0 di tutti i possibili movimenti, e una piccola hash che mi sar\u00e0 utile per poter effettuare alcune oprazioni.
\nQuest\u2019ultima, operation, ci servir\u00e0 appunto per poter addizionare o sottrarre due numeri, passando come parametro in ingresso l\u2019operatore + o -.<\/p>\n

[code type=”javascript”]
\noperation = {
\n\t‘+’: function(a, b) { return a + b },
\n\t‘-‘: function(a, b) { return a – b },
\n}
\n[\/code]<\/p>\n

Questa hash ci verr\u00e0 molto utile all\u2019interno delle operazioni di movimento poich\u00e9 ci dar\u00e0 la possibilit\u00e0 di modificare il contatore dell\u2019elemento attuale, counter, in base al tipo di movimento che stiamo effettuando.<\/p>\n

Spiegher\u00f2 adesso la funzione sliding<\/strong>, vero e proprio cuore di questo script Javascript\/jQuery.<\/p>\n

Per prima cosa, essa avr\u00e0 come parametri in ingresso tre valori: direction, operator e nextCounter. Il parametro direction, sar\u00e0 la direzione nella quale l\u2019animazione deve svolgersi, potr\u00e0 essere quindi left o right. Il parametro operatore, ci servir\u00e0 per dire alla hash decrementare o aumentare il valore del contatore (+ o -). Infine, nextCounter, sar\u00e0 l\u2019unico parametro non richiesto, poich\u00e9 verr\u00e0 passato soltanto quando clicchiamo su uno dei pallini dello slideshow.<\/p>\n

[code type=”javascript”]
\nsliding = function(direction, operator, nextCounter) {
\n\/\/codice
\n}
\n[\/code]<\/p>\n

Passo successivo \u00e8 quello di prevenire molteplici istanze di click, e per fare ci\u00f2 baster\u00e0 questo controllo:<\/p>\n

[code type=”javascript”]
\nif (move) { return false; }
\nmove = true;
\n[\/code]<\/p>\n

L\u2019istruzione seguente assegner\u00e0 alcune propriet\u00e0 css all\u2019elemento per poter azzerare la sua posizione e in particolare, portando il valore dello z-index a 10, saremo sicuri che l\u2019elemento attuale rimanga a un livello inferiore rispetto a quello che comparir\u00e0. Rimuoviamo, inoltre, la classe active al pallino.<\/p>\n

[code type=”javascript”]
\n$(sliderElements[counter]).css({‘display’: ‘block’, direction: ‘0’, ‘z-index’: ’10’, left : ‘auto’, right: ‘auto’ });
\n$(navElements[counter]).removeClass(‘active’);
\n[\/code]<\/p>\n

A questo punto dichiariamo e assegnamo ad un hash, il valore delta ovvero la posizione da cui dovr\u00e0 partire il nostro elemento successivo o precedente. Questo sar\u00e0 possibile grazie al passaggio di parametri che effettueremo al momento della chiamata della funzione sliding. Sostanzialmente, se l\u2019immagine dovr\u00e0 comparire da destra verso sinistra, allora assegneremo al left il valore delta oppure, in caso contrario, delta sar\u00e0 il valore del right. Il senso opposto dell\u2019animazione rimarr\u00e0 auto in modo tale da non influire sullo scorrimento dell\u2019immagine, che altrimenti potrebbe bloccare lo sliding dell\u2019elemento.<\/p>\n

[code type=”javascript”]
\nvar hash = {}
\nhash[direction] = delta;
\n[\/code]<\/p>\n

Se abbiamo passato alla funzione sliding il valore nextCounter, a questo punto lo assegneremo a counter. Questa parte di codice ci servir\u00e0 nel caso in cui scateneremo l\u2019animazione attraverso il click su un pallino. Dopodich\u00e9 controlleremo se siamo posizionati all\u2019inizio o alla fine della lista e riporteremo il valore di counter a 0 o a nEle a seconda del caso.<\/p>\n

[code type=”javascript”]
\nif ( nextCounter != undefined )
\ncounter = nextCounter;<\/p>\n

if ( direction == ‘left’ && counter == nEle – 1 )
\n\tcounter = – 1;
\nelse if ( direction == ‘right’ && counter == 0 )
\n\tcounter = nEle;
\n[\/code]<\/p>\n

Step successivo assegnamo al pallino seguente la classe active e assegnamo all\u2019immagine successiva la posizione da cui deve partire, passando al metodo css() di jQuery la nostra hash.<\/p>\n

[code type=”javascript”]
\n$(navElements[operation[operator](counter, 1)]).addClass(‘active’);
\n$(sliderElements[operation[operator](counter, 1)]).css(hash);
\n[\/code]<\/p>\n

Qui troviamo anche il primo caso in cui la hash operation() entra in gioco. Semplicemente in base al parametro operator che noi passeremo alla nostra hash, esso sottrarr\u00e0 o addizioner\u00e0 a counter il valore 1, in modo da posizionare il contatore all\u2019elemento precedente o successivo a seconda della direzione in cui si sta muovendo lo slider.<\/p>\n

Ora \u00e8 il momento di eseguire l\u2019animazione. Assegnamo alla nostra hash valore 0, ovvero il valore che la direzione dovr\u00e0 raggiungere tramite l\u2019animazione, diamo display:block e z-index:10 all\u2019immagine che dovr\u00e0 comparire e utilizziamo il metodo jQuery animate() per effettuare lo sliding.<\/p>\n

[code type=”javascript”]
\nhash[direction] = 0;
\n$(sliderElements[operation[operator](counter, 1)]).css({‘display’: ‘block’, ‘z-index’: ’10’ });
\n$(sliderElements[operation[operator](counter, 1)]).animate(hash, speed, function() {
\n\tmove = false;
\n\t$(sliderElements).css({‘display’: ‘none’, ‘z-index’: ‘auto’ });
\n\t$(this).css({display: ‘block’, right : ‘auto’, left : ‘auto’});
\n\tcounter = operation[operator](counter, 1);
\n});
\n[\/code]<\/p>\n

Al complete di questa funzione rimettiamo move a false in modo tale da poter rendere di nuovo eseguibile la funzione sliding()<\/strong>, nascondiamo l\u2019immagine che esce dalla visualizzazione, azzeriamo la posizione dell\u2019elemento che verr\u00e0 visualizzato adesso assegnando a left e a right il valore auto, e come ultimo step decrementiamo o incrementiamo il valore di counter.<\/p>\n

Si conclude cos\u00ec la funzione sliding(), ora vedremo come utilizzarla all\u2019interno dello script, ma prima eseguiamo delle operazioni necessarie per inizializzare lo slider<\/strong>.<\/p>\n

[code type=”javascript”]
\n$(sliderElements).each(function() {
\n\tnavigation.append(”);
\n\ti = i+1;
\n});
\n$(sliderElements[0]).css({ display:”block”, ‘z-index’ : ‘1’, left: 0, right:0 });
\n$(navElements[0]).addClass(‘active’);
\n[\/code]<\/p>\n

Per ogni immagine, inseriamo un pallino con un attributo data-position che servir\u00e0 per poter ricavare il valore che dovr\u00e0 assumere counter quando clicchiamo su uno dei pallini. Rendiamo visibile il primo elemento e assegnamo la classe active al primo pallino.<\/p>\n

A questo punto analizziamo passo per passo le possibili animazioni\/movimenti:<\/p>\n

[code type=”javascript”]
\nvar navElements = navigation.find(‘a’);
\nautoplaySlide = setInterval(function() {
\n \tsliding(‘left’,’+’);
\n},5000);<\/p>\n

$(‘.prev’).click(function() {
\n\tsliding(‘right’,’-‘);
\n\tclearInterval(autoplaySlide);
\n})<\/p>\n

$(‘.next’).click(function() {
\n\tsliding(‘left’,”+”);
\n\tclearInterval(autoplaySlide);
\n});
\n[\/code]<\/p>\n

Prima operazione sar\u00e0 quella di salvare in una variabile tutti i pallini creati, dopodich\u00e9 generiamo un autoplay per lo slider e assegnamo all\u2019evento click() delle frecce lo slide nella direzione corretta. Come potete vedere, alla funzione sliding() vengono passati i parametri ‘left’,’+’ o ‘right’,’-‘.<\/p>\n

Ultima fase di questo script riguarder\u00e0 il click dei nostri pallini.<\/p>\n

[code type=”javascript”]
\n$(navElements).click(function() {<\/p>\n

\tclearInterval(autoplaySlide);<\/p>\n

\tif ( $(this).attr(‘data-position’) > counter )
\n\t\tsliding( ‘left’, “+”, parseInt($(this).attr(‘data-position’)) – 1 );
\n\telse if ( $(this).attr(‘data-position’) < counter )
\n\t\tsliding( ‘right’, “-“, parseInt($(this).attr(‘data-position’)) + 1 );<\/p>\n

});
\n[\/code]<\/p>\n

In questo caso, preleveremo anche il valore dell\u2019attributo data-position, che verr\u00e0 passato come nextCounter alla nostra funzione sliding().<\/p>\n

A questo link<\/a> la possibilit\u00e0 di visualizzare uno slider con animazione SlideInLeft\/SlideInRight<\/strong> d\u2019esempio su jsfiddle.<\/p>\n","protected":false},"excerpt":{"rendered":"

A gentile richiesta di una nostra lettrice, vi proporr\u00f2 uno slider con animazione SlideInLeft\/SlideInRight<\/strong> per far comparire l\u2019elemento successivo o precedente rispettivamente da destra verso sinistra o da sinistra verso destra.<\/p>\n","protected":false},"author":4,"featured_media":15006,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[108],"tags":[96,97,279,280],"class_list":["post-14984","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo","tag-javascript","tag-jquery","tag-slider","tag-slideshow"],"yoast_head":"\n\u2022 Slider jQuery con animazione SlideInLeft\/SlideInRight - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Slider jQuery con animazione SlideInLeft\/SlideInRight. 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\/sviluppo\/slider-animazione-slideinleft-slideinright\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Slider jQuery con animazione SlideInLeft\/SlideInRight - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Slider jQuery con animazione SlideInLeft\/SlideInRight. 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\/sviluppo\/slider-animazione-slideinleft-slideinright\/\" \/>\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=\"2013-06-25T13:32:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:40:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/jquery.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=\"8 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Slider jQuery con animazione SlideInLeft\\\/SlideInRight\",\"datePublished\":\"2013-06-25T13:32:41+00:00\",\"dateModified\":\"2023-02-27T14:40:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/\"},\"wordCount\":1579,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/06\\\/jquery.jpg\",\"keywords\":[\"javascript\",\"jquery\",\"slider\",\"slideshow\"],\"articleSection\":[\"Sviluppo\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/\",\"name\":\"\u2022 Slider jQuery con animazione SlideInLeft\\\/SlideInRight - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/06\\\/jquery.jpg\",\"datePublished\":\"2013-06-25T13:32:41+00:00\",\"dateModified\":\"2023-02-27T14:40:46+00:00\",\"description\":\"Leggi dal blog: Slider jQuery con animazione SlideInLeft\\\/SlideInRight. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/06\\\/jquery.jpg\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/06\\\/jquery.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/slider-animazione-slideinleft-slideinright\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Slider jQuery con animazione SlideInLeft\\\/SlideInRight\"}]},{\"@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 Slider jQuery con animazione SlideInLeft\/SlideInRight - Artera","description":"Leggi dal blog: Slider jQuery con animazione SlideInLeft\/SlideInRight. 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\/sviluppo\/slider-animazione-slideinleft-slideinright\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Slider jQuery con animazione SlideInLeft\/SlideInRight - Artera","og_description":"Leggi dal blog: Slider jQuery con animazione SlideInLeft\/SlideInRight. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2013-06-25T13:32:41+00:00","article_modified_time":"2023-02-27T14:40:46+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/jquery.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":"8 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Slider jQuery con animazione SlideInLeft\/SlideInRight","datePublished":"2013-06-25T13:32:41+00:00","dateModified":"2023-02-27T14:40:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/"},"wordCount":1579,"commentCount":0,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/jquery.jpg","keywords":["javascript","jquery","slider","slideshow"],"articleSection":["Sviluppo"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/","url":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/","name":"\u2022 Slider jQuery con animazione SlideInLeft\/SlideInRight - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/jquery.jpg","datePublished":"2013-06-25T13:32:41+00:00","dateModified":"2023-02-27T14:40:46+00:00","description":"Leggi dal blog: Slider jQuery con animazione SlideInLeft\/SlideInRight. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/jquery.jpg","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/jquery.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/sviluppo\/slider-animazione-slideinleft-slideinright\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Slider jQuery con animazione SlideInLeft\/SlideInRight"}]},{"@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\/14984","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=14984"}],"version-history":[{"count":7,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/14984\/revisions"}],"predecessor-version":[{"id":217560,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/14984\/revisions\/217560"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media\/15006"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=14984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=14984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=14984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}