{"id":11772,"date":"2013-01-07T16:09:57","date_gmt":"2013-01-07T15:09:57","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=11772"},"modified":"2023-02-27T14:43:48","modified_gmt":"2023-02-27T14:43:48","slug":"slider-nivo-jquery","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/","title":{"rendered":"Realizzare uno Slider Nivo con jQuery"},"content":{"rendered":"

Partendo dal post precedentemente realizzato da me, riguardante la realizzazione di un Thumbnail Slider<\/a>, in questa puntata tratteremo la creazione di uno Slider Nivo<\/strong>, la cui principale caratteristica \u00e8 quella di avere una transizione grafica, da una immagine alla seguente, con effetto di dissolvenza, giocando sull’opacit\u00e0 degli elementi.<\/p>\n

Inoltre, tratteremo la gestione di una navigazione alternativa alle frecce<\/strong>, ossia una navigazione con dei “pallini” che potranno portare la visualizzazione dello slider direttamente all’immagine selezionata.<\/p>\n

Struttura Html di base<\/h2>\n

L’html del nostro Slider Nivo, sar\u00e0 praticamente il medesimo di quello realizzato per il precedente slider.<\/p>\n

[html]
\n<section class="nivo-slider">
\n<div class="navi"><\/div>
\n <a class="prev" href="javascript:void(0);">\u00ab<\/a>
\n <a class="next" href="javascript:void(0);">\u00bb<\/a>
\n<div id="nivo"><\/div>
\n<\/section>
\n[\/html]<\/p>\n

Eccezione fatta per l’aggiunta di un div class=”navi”<\/strong> che sar\u00e0 il contenitore dei nostri pallini per navigare rapidamente tra le immagini.<\/p>\n

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

Le regole css del nostro Slider Nivo serviranno per posizionare il nostro navigatore a pallini e per posizionare le nostre immagini o i nostri elementi uno sopra l’altro in modo tale da poter permettere, con l’animazione javascript, il fadein<\/strong> e il fadeout<\/strong> dei nostri elementi.<\/p>\n

Il contenitore principale sar\u00e0 la section class=”nivo-slider”<\/strong> che sar\u00e0 il contenitore di tutti gli elementi: slider, frecce e navigazione a pallini.<\/p>\n

[css]
\n.nivo-slider{
\n position:relative;
\n margin: 30px auto 0;
\n width:620px;
\n height: 460px;
\n}
\n[\/css]<\/p>\n

Al suo interno avremmo appunto, le frecce a class=”prev”<\/strong> e a class=”next”<\/strong> che saranno posizionate in modo assoluto rispetto al contenitore.<\/p>\n

[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[\/css]<\/p>\n

Lo slider div id=”nivo”<\/strong> verr\u00e0 posizionato in modo relativo, e a sua volta conterr\u00e0 gli elementi posizionati in modo assoluto rispetto ad esso. Essi saranno gli elementi su cui verr\u00e0 applicata l’animazione javascript. Questi ultimi, saranno posizionati uno sopra l’altro, top:0; left:0; avranno dimensione fissa e, condizione importante per il corretto funzionamento, opacity:0;.<\/p>\n

[css]
\n#nivo{
\n position: relative;
\n overflow: hidden;
\n width: 620px;
\n height: 460px;
\n}
\n#nivo .element {
\n opacity: 0;
\n display: block;
\n position: absolute;
\n top: 0;
\n left: 0;
\n width: 640px;
\n height: 460px;
\n zoom: 1;
\n}<\/p>\n

#nivo .slide1 {
\n background-image: #4e4e48;
\n background-image: linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
\n}
\n#nivo .slide2 {
\n background-image: #6a7259;
\n background-image: linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
\n}
\n#nivo .slide3 {
\n background-image: #70415c;
\n background-image: linear-gradient(bottom, #ff2b1f 0%, #5297f5 100%, #000000 100%);
\n}
\n#nivo .slide4 {
\n background-image: #606088;
\n background-image: linear-gradient(left, #fcff99 0%, #2422ff 100%, #000000 100%);
\n}
\n#nivo .slide5 {
\n background-image: #044a29;
\n background-image: linear-gradient(top left, #0cdd7c 0%, #000000 80%, #000000 100%);
\n}
\n[\/css]<\/p>\n

Per quanto riguarda i pallini, il div class=”navi”<\/strong> avr\u00e0 posizione assoluta rispetto alla section class=”nivo-slider”<\/strong>. In questo caso li ho posizionati in basso a destra sotto gli elementi, e li ho anche affiancati utilizzando float:left;.<\/p>\n

[css]
\n.navi{ position:absolute; top:auto; bottom:-20px; z-index:300; right:0; }
\n.navi a{
\n display:block;
\n background:#000;
\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.navi a.active, .navi a:hover{ background-color:red; }
\n[\/css]<\/p>\n

I pallini avranno come stato active e hover un colore differente. Per stato active si intende quando il codice javascript assegna al pallino corrente una classe “.active”.<\/p>\n

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

Analizziamo ora il codice realizzato per ottenere il nostro Slider Nivo<\/strong>. Nella prima parte dichiariamo le variabili che ci serviranno nel corso del nostro script, tra cui il numero degli elementi, una variabile contatore e una variabile per prevenire molteplici istanze di click.<\/p>\n

[js]
\nvar nEle = $(‘#nivo .element’).size(),
\n i = 1,
\n counter = 1,
\n squareT = 0,
\n move = false;
\n[\/js]<\/p>\n

Prima di analizzare le funzioni facciamo un salto al codice che parte dal commento “\/\/start and autoplay”, poich\u00e9 alcune di queste istruzioni ci serviranno per capire poi il funzionamento delle funzioni definite.<\/p>\n

Le condizioni necessarie per il funzionamento dello slider<\/strong>, sono posizionate sotto appunto questo commento. Esse consistono nello stampare un pallino per ogni elemento dello Slider Nivo tramite un “.each”, (nella quale assegneremo anche un attributo html rel=”” con valore crescente che ci servir\u00e0 successivamente per la navigazione a pallini), mettere ad opacit\u00e0 a 0 tutti gli elementi, mettere il primo elemento a opacit\u00e0 1 e aggiungere la classe “.active” al primo pallino.<\/p>\n

[js]
\n\/\/start and autoplay
\n $(‘#nivo .element’).each(function() {
\n $(‘.nivo-slider .navi’).append(”);
\n i = i+1;
\n });
\n $(‘#nivo .element’).css({ opacity:"0", filter:"alpha(opacity=0)"});
\n $(‘#nivo .element:first-child’).css({ opacity:"1", filter:"alpha(opacity=100)"});
\n $(‘.nivo-slider .navi a:first-child’).addClass(‘active’);
\n[\/js]<\/p>\n

Successivamente compare l’autoplay che effettuer\u00e0 il fading a intervalli di 5 secondi, gli eventi sulle frecce che applicheranno fading o fadingReverse al click, e le istruzioni da eseguire al momento del click su di un pallino. Per questi ultimi la prima istruzione, prelever\u00e0 tramite un parseInt<\/strong> il valore dell’attributo rel=”” che ci servir\u00e0 nella funzione fadingSquares<\/strong> per poter selezionare uno specifico elemento della lista.<\/p>\n

[js]
\nvar autoplayFade = setInterval(function() {
\n fading();
\n },5000);<\/p>\n

$(‘.prev’).click(function() {
\n fadingReverse();
\n clearInterval(autoplayFade);
\n });<\/p>\n

$(‘.next’).click(function() {
\n fading();
\n clearInterval(autoplayFade);
\n });<\/p>\n

$(‘.navi a’).click(function() {
\n squareT = parseInt(($(this).attr(‘rel’)));
\n fadingSquares();
\n clearInterval(autoplayFade);
\n });
\n[\/js]<\/p>\n

Dopodich\u00e9 definiamo le istruzioni per effettuare il movimento di Fading normale, Fading Reverse (quando clicchiamo sulla freccia “prev”), e il Fading per la navigazione a pallini<\/strong>. La prima funzione di Fading non far\u00e0 nient’altro che, il fadeout sull’immagine corrente, ovvero porter\u00e0 l’opacit\u00e0 dell’elemento da 1 a 0, toglier\u00e0 la classe “.active” al pallino corrente e la metter\u00e0 a quello successivo, e infine creer\u00e0 la transizione di opacit\u00e0 inversa sull’elemento che segue (da 0 a 1). Tutto questo verr\u00e0 effettuato mentre la variabile move passer\u00e0 da false a true, questo per non incorrere in molteplici istanze di click da parte dell’utente.<\/p>\n

[js]
\n fading = function() {
\n if (move) { return false; }<\/p>\n

move = true;
\n $(‘#nivo’).find(‘.element:nth-child(‘ + counter + ‘)’).animate({
\n opacity:’0′
\n }, 800);
\n $(‘.nivo-slider .navi’).find(‘a:nth-child(‘ + counter + ‘)’).removeClass(‘active’);
\n if ( counter == nEle ) {
\n counter = 0;
\n }
\n $(‘.nivo-slider .navi’).find(‘a:nth-child(‘ + ( counter + 1 ) + ‘)’).addClass(‘active’);
\n $(‘#nivo’).find(‘.element:nth-child(‘ + ( counter + 1 ) + ‘)’).animate({
\n opacity:’1′
\n }, 800, function() {
\n move = false;
\n }
\n );
\n counter = counter + 1;
\n }
\n[\/js]<\/p>\n

La seconda funzione di Fading (reverse) effettettuer\u00e0 esattamente la stessa animazione precedente al contrario. Quindi avremo che l’elemento attuale andr\u00e0 sempre in fadeout mentre sar\u00e0 l’elemento che precede ad effettuare il fadein. Entrambe le funzioni sono accomunate dal fatto che, quando la variabile counter arriver\u00e0 al limite superiore o al limite inferiore, la posizione verr\u00e0 riportata all’elemento iniziale o all’elemento in coda, a seconda se si tratti della funzione di Fading normale o reverse.<\/p>\n

[js]
\n fadingReverse = function() {
\n if (move) { return false; }<\/p>\n

move = true;
\n $(‘#nivo’).find(‘.element:nth-child(‘ + counter + ‘)’).animate({
\n opacity:’0′
\n }, 800);
\n $(‘.nivo-slider .navi’).find(‘a:nth-child(‘ + counter + ‘)’).removeClass(‘active’);
\n if ( counter == 1 ) {
\n counter = nEle+1;
\n }
\n $(‘.nivo-slider .navi’).find(‘a:nth-child(‘ + ( counter – 1 ) + ‘)’).addClass(‘active’);
\n $(‘#nivo’).find(‘.element:nth-child(‘ + ( counter – 1 ) + ‘)’).animate({
\n opacity:’1′
\n }, 800, function() {
\n move = false;
\n }
\n );
\n counter = counter-1;
\n }
\n[\/js]<\/p>\n

La funzione fadingSquares non far\u00e0 nient’altro che ricevere la posizione del pallino su cui abbiamo cliccato, effettuare il fadeout dell’elemento attuale, spostarsi alla posizione ricevuta dal pallino ed effettuare il fadein su quell’elemento.<\/p>\n

[js]
\n fadingSquares = function() {
\n if (move) { return false; }<\/p>\n

move = true;
\n $(‘#nivo’).find(‘.element:nth-child(‘ + counter + ‘)’).animate({
\n opacity:’0′
\n }, 800);
\n $(‘.nivo-slider .navi’).find(‘a:nth-child(‘ + counter + ‘)’).removeClass(‘active’);
\n counter = squareT;
\n $(‘.nivo-slider .navi’).find(‘a:nth-child(‘ + counter + ‘)’).addClass(‘active’);
\n $(‘#nivo’).find(‘.element:nth-child(‘ + counter + ‘)’).animate({
\n opacity:’1′
\n }, 800, function() {
\n move = false;
\n }
\n );
\n };
\n[\/js]
\nEcco una demo del Nivo Slider<\/a> realizzata da me.<\/p>\n","protected":false},"excerpt":{"rendered":"

In questa puntata tratteremo la creazione di uno Slider Nivo<\/strong>, la cui principale caratteristica \u00e8 quella di avere una transizione grafica, da una immagine alla seguente, con effetto di dissolvenza, giocando sull’opacit\u00e0 degli elementi.<\/p>\n","protected":false},"author":4,"featured_media":12525,"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-11772","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 uno Slider Nivo con jQuery - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Realizzare uno Slider Nivo 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\/slider-nivo-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Realizzare uno Slider Nivo con jQuery - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Realizzare uno Slider Nivo 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\/slider-nivo-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=\"2013-01-07T15:09:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:43:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/01\/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=\"6 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\\\/slider-nivo-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-nivo-jquery\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Realizzare uno Slider Nivo con jQuery\",\"datePublished\":\"2013-01-07T15:09:57+00:00\",\"dateModified\":\"2023-02-27T14:43:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-nivo-jquery\\\/\"},\"wordCount\":1243,\"commentCount\":16,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-nivo-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/01\\\/jquery1.jpg\",\"keywords\":[\"javascript\",\"jquery\",\"slider\",\"slideshow\"],\"articleSection\":[\"Marketing\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-nivo-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-nivo-jquery\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-nivo-jquery\\\/\",\"name\":\"\u2022 Realizzare uno Slider Nivo con jQuery - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-nivo-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-nivo-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/01\\\/jquery1.jpg\",\"datePublished\":\"2013-01-07T15:09:57+00:00\",\"dateModified\":\"2023-02-27T14:43:48+00:00\",\"description\":\"Leggi dal blog: Realizzare uno Slider Nivo 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\\\/slider-nivo-jquery\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-nivo-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-nivo-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/01\\\/jquery1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/01\\\/jquery1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/slider-nivo-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Realizzare uno Slider Nivo 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 uno Slider Nivo con jQuery - Artera","description":"Leggi dal blog: Realizzare uno Slider Nivo 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\/slider-nivo-jquery\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Realizzare uno Slider Nivo con jQuery - Artera","og_description":"Leggi dal blog: Realizzare uno Slider Nivo 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\/slider-nivo-jquery\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2013-01-07T15:09:57+00:00","article_modified_time":"2023-02-27T14:43:48+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/01\/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":"6 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Realizzare uno Slider Nivo con jQuery","datePublished":"2013-01-07T15:09:57+00:00","dateModified":"2023-02-27T14:43:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/"},"wordCount":1243,"commentCount":16,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/01\/jquery1.jpg","keywords":["javascript","jquery","slider","slideshow"],"articleSection":["Marketing"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/","url":"https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/","name":"\u2022 Realizzare uno Slider Nivo con jQuery - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/01\/jquery1.jpg","datePublished":"2013-01-07T15:09:57+00:00","dateModified":"2023-02-27T14:43:48+00:00","description":"Leggi dal blog: Realizzare uno Slider Nivo 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\/slider-nivo-jquery\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/01\/jquery1.jpg","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/01\/jquery1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/marketing\/slider-nivo-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Realizzare uno Slider Nivo 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\/11772","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=11772"}],"version-history":[{"count":1,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/11772\/revisions"}],"predecessor-version":[{"id":234484,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/11772\/revisions\/234484"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media\/12525"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=11772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=11772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=11772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}