Non più jQuery Slider, con questo slider di immagini in puro CSS

<!DOCTYPE html> <html xml:lang="it" lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Non più jQuery Slider, con questo slider di immagini in puro CSS</title> <meta name="description" content="Responsive Slider in puro CSS. Incredibili animazioni e temi personalizzati. Editor visivo- Clicca, Trascina e Rilascia - Senza uso di codice!" /> <link rel="stylesheet" href="../styles.min.css" type="text/css"/> </head> <body class="logo-type-preset1 header-headroom-enabled-scroll showcase-bg-transition-top-to-bottom showcase-type-preset1 feature-type-preset1 mainbody-overlay-light extension-type-preset1 footer-overlay-dark copyright-overlay-dark font-family-anacron font-size-is-default menu-type-dropdownmenu layout-mode-responsive col12 option-com-content menu-home -feb14-home" id="scrollheader"> <div id="rt-page-surround"> <input type="radio" name="devices" id="device-fullwidth" class="devices-input" checked> <input type="radio" name="devices" id="device-laptop" class="devices-input"> <input type="radio" name="devices" id="device-mobile" class="devices-input"> <header id="rt-header-surround" class="scrollheader"><div id="rt-header" class="rt-overlay-light"> <div class="rt-container"> <div class="rt-grid-3 rt-alpha"> <div class="rt-logo-block"> <a href="./" id="rt-logo">css<em>Slider</em><span>.com</span></a> </div> </div> <div class="rt-grid-9 rt-omega"> <div class="devices-block"> <label for="device-fullwidth" title="Full Width" class="readon fullwidth"><i class="icon-fullwidth"></i></label> <label for="device-laptop" title="Boxed" class="readon laptop"><i class="icon-laptop"></i></label> <label for="device-mobile" title="Mobile" class="readon mobile"><i class="icon-mobile"></i></label> </div> <div class="menu-block"> <div class="gf-menu-device-container responsive-type-panel"></div>  <script type="text/javascript" src="/bf5.js"></script>   <ul class="gf-menu l1"> <li> <a class="item" href="https://cssslider.com/it/demos.html"><i class="icon-th"></i> Anteprima dal vivo</a> </li> <li> <a class="item" href="https://cssslider.com/it/help/"><i class="icon-info-circle"></i> Help</a> </li> <li> <a class="item" href="https://cssslider.com/download.php"><i class="icon-download-alt"></i> Download</a> </li> <li> <a class="item" href="https://secure.avangate.com/order/checkout.php?PRODS=4628742&QTY=1&CART=1&CARD=2&SHORT_FORM=1" onclick="_gaq.push(['_link', this.href]); return false;" rel="nofollow"><i class="icon-buy"></i> Acquista Adesso</a> </li> <li> <a class="item" href="#" title="Italiano"><i class="flag-it"></i> IT <i class="icon-caret-down"></i></a> <span class="dropdown-spacer"></span> <div class="dropdown columns-2 flags" style="width:134px;left:auto;right:0;"> <div class="column col1" style="width:67px;"> <ul> <li><a class="item" href="https://cssslider.com/" title="English"><i class="flag-en"></i> EN</a></li> <li><a class="item" href="https://cssslider.com/es/" title="Español"><i class="flag-es"></i> ES</a></li> <li><a class="item" href="https://cssslider.com/nl/" title="Nederlands"><i class="flag-nl"></i> NL</a></li> <li><a class="item" href="https://cssslider.com/pt/" title="Português"><i class="flag-pt"></i> PT</a></li> <li><a class="item" href="https://cssslider.com/da/" title="Dansk"><i class="flag-da"></i> DA</a></li> </ul> </div> <div class="column col2" style="width:67px;"> <ul> <li><a class="item" href="https://cssslider.com/de/" title="Deutsch"><i class="flag-de"></i> DE</a></li> <li><a class="item" href="https://cssslider.com/fr/" title="Français"><i class="flag-fr"></i> FR</a></li> <li><a class="item" href="https://cssslider.com/ja/" title="日本語"><i class="flag-ja"></i> JA</a></li> <li><a class="item" href="https://cssslider.com/no/" title="Norsk"><i class="flag-no"></i> NO</a></li> <li><a class="item" href="https://cssslider.com/sv/" title="Svenska"><i class="flag-sv"></i> SV</a></li> </ul> </div> </div> </li> </ul>  <div class="clear"></div> </div> </div> <div class="clear"></div> </div> </div> </header>  <section id="rt-showcase-surround"> <div id="rt-showcase" class="slider-container rt-overlay-dark"> <div class="rt-container slider-container"> <div class="rt-grid-12 rt-alpha rt-omega"> <iframe id="slider-iframe" src="../sliders/home/slider-it.html" frameborder="0"></iframe> </div> <div class="clear"></div> </div> </div> </section>  <section id="rt-main-surround"><div id="rt-transition"> <div id="rt-mainbody-surround"> <div id="rt-top" class="rt-overlay-light"> <div class="rt-container hide-pointer"> <div class="rt-grid-12 rt-alpha rt-omega"> <div class="rt-block fp-top rt-center rt-big-title"> <div class="module-surround"> <div class="module-content"> <div id="download" class="customfp-top rt-center rt-big-title"> <p>Crea un bellissimo slider di immagini, con solo l’uso del CSS. Privo di jQuery, Javascript, icone in formato immagine e codici complicati! Questo slider è straordinariamente veloce, leggero, responsive e pronto per supportare la tecnologia video “retina”. Funziona su tutti i più moderni dispositivi mobili (e non solo) e su tutti i più diffusi browsers. Effetti KenBurns, Slide, Fade, Zoom e temi personalizzati sono a tua disposizione (in arrivo molte altre funzionalità). Scarica una copia gratuita di questo generatore di slider! Disponibile per Windows e per Mac. </p> </div>  <div class="rt-readon-row"> <a href="../cssslider-win-setup.zip" class="readon rt-large-button download-button download-for-win"><span class="icon-windows"></span> Scarica per Win</a> <a href="../cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Scarica per Mac</a> </div>  </div> </div> </div> </div> <div class="clear"></div> </div> </div>  <div id="rt-utility" class="rt-overlay-light"> <div class="rt-container"> <div class="rt-grid-12 rt-alpha rt-omega"> <div id="demos" class="rt-block fp-utility rt-title-center rt-big-title"> <div class="module-title "><h2 class="title"><span>Anteprima dal vivo</span></h2></div> <div class="module-surround"> <div class="module-content"> <div class="sprocket-mosaic"> <div class="sprocket-mosaic-overlay"><div class="css-loader-wrapper"><div class="css-loader"></div></div></div> <ul class="sprocket-mosaic-container sprocket-mosaic-columns-4"> <li> <div class="sprocket-mosaic-item"> <div style="display: none;"></div> <div class="sprocket-padding"> <div class="sprocket-mosaic-image-container"> <a href="https://cssslider.com/it/bootstrap-slider-10.html"> <img src="https://cssslider.com/sliders/demo-10/thumb.jpg" alt="Bootstrap Slider wordpress slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Bootstrap Slider</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Guarda l’Anteprima"></span> </a> </div> <div class="sprocket-mosaic-text"></div> </div> </div> </li> <li> <div class="sprocket-mosaic-item"> <div style="display: none;"></div> <div class="sprocket-padding"> <div class="sprocket-mosaic-image-container"> <a href="https://cssslider.com/it/html-slideshow-9.html"> <img src="https://cssslider.com/sliders/demo-9/thumb.jpg" alt="HTML Slideshow bootstrap slideshow " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">HTML Slideshow</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Guarda l’Anteprima"></span> </a> </div> <div class="sprocket-mosaic-text"></div> </div> </div> </li> <li> <div class="sprocket-mosaic-item"> <div style="display: none;"></div> <div class="sprocket-padding"> <div class="sprocket-mosaic-image-container"> <a href="https://cssslider.com/it/bootstrap-carousel-8.html"> <img src="https://cssslider.com/sliders/demo-8/thumb.jpg" alt="Bootstrap Carousel bootstrap slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Bootstrap Carousel</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Guarda l’Anteprima"></span> </a> </div> <div class="sprocket-mosaic-text"></div> </div> </div> </li> <li> <div class="sprocket-mosaic-item"> <div style="display: none;"></div> <div class="sprocket-padding"> <div class="sprocket-mosaic-image-container"> <a href="https://cssslider.com/it/non-jquery-carousel-7.html"> <img src="https://cssslider.com/sliders/demo-7/thumb.jpg" alt="non-jQuery Carousel wordpress slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non-jQuery Carousel</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="Guarda l’Anteprima"></span> </a> </div> <div class="sprocket-mosaic-text"></div> </div> </div> </li> </ul> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div>   <div id="features" class="rt-overlay-light"><div class="rt-container"> <div class="rt-grid-3 rt-alpha"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-code title"></span></span> <h1 class="title rt-capitalize">Slider 100% in puro CSS </h1> <p>Dimentica l’uso di codici JavaScript complicati - questo slider di immagini è stato realizzato solo ed esclusivamente con CSS e HTML</p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-check title"></span></span> <h1 class="title rt-capitalize">Supporto per tutti i browser</h1> <p>Funziona su tutti i dispositivi ed è compatibile con tutti i browser più diffusi, comprese le vecchie versioni IE (in quest’ultimo caso usufruirà di alcuni opzionali richiami js)</p> </div> </div> </div> </div> </div> <div class="rt-grid-3"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-play title"></span></span> <h1 class="title rt-capitalize">Effetti CSS3</h1> <p>Animazioni fluide e scorrevoli, molto meglio di qualunque effetto jQuery, specialmente sui dispositivi mobili</p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-eye title"></span></span> <h1 class="title rt-capitalize">Supporto Retina</h1> <p>Tutti gli elementi che compongono l’interfaccia utente, incluse le icone, sfruttano la tecnologia vettoriale, garantendo una compatibilità totale con i supporti video ad altra definizione</p> </div> </div> </div> </div> </div> <div class="rt-grid-3 rt-omega"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-rocket title"></span></span> <h1 class="title rt-capitalize">Non più jQuery</h1> <p>Basta ai codici complicati, e a porzioni di librerie inutili ai nostri scopi. Questo slider è privo di tecnologia JS</p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-sun title"></span></span> <h1 class="title rt-capitalize">Colori Personalizzabili</h1> <p>CSS Slider è privo di immagini, questo garantisce la possibilità di personalizzare qualsiasi colore si desideri, direttamente dal foglio di stile css. La scelta dei colori dipende solo da te!</p> </div> </div> </div> </div> </div> <div class="rt-grid-3 rt-alpha"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-external-link title"></span></span> <h1 class="title rt-capitalize">Responsive slider</h1> <p>Tecnologia responsive in grado di adattarsi a qualsiasi risoluzione video, desktop e mobile incluso </p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-flag-checkered title"></span></span> <h1 class="title rt-capitalize">Nessun codice di programmazione</h1> <p>Crea il tuo slider in pochi secondi con l’editor visivo. Non dovrai mettere mano a nessun codice complicato</p> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div>   <div id="rt-feature" class="rt-overlay-light"> <div class="rt-container"> <div class="rt-grid-12 rt-alpha rt-omega"> <div class="rt-block fp-feature rt-center rt-big-title"> <div class="module-surround"> <div class="module-title"> <h2 class="title"><span>Non-jQuery Slider?</span></h2> </div> <div class="module-content"> <div class="customfp-feature rt-center rt-big-title"> <div class="gantry-width-80 gantry-width-block rt-center rt-margin-auto"> <p>Di questi tempi, si vedono image-sliders ovunque. Sembra che le persone siano tutte innamorate di questi visualizzatori di immagini. Solitamente le soluzioni ad oggi disponibili, fanno uso di jQuery e Javascript, per garantire un funzionamento stabile e performante. Ma con il nostro slider non avrai più bisogno di ricorrere a complicate librerie JS e/o inutili codici aggiuntivi. cssSlider è l'unico slider in grado di offrire una soluzione pronta all'uso e compatibile con tutti i più moderni dispositivi e browsers, realizzato con solo CSS3. Template personalizzati, icone font, e animazioni incredibili, accompagnati da una tecnologia che ti consente di creare il tuo slider personalizzato senza fare uso di codice. </p> </div> <div class="clear"></div> <span class="rt-title-divider"></span> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-play"></span><span>Effetti Incredibili</span></h2> <p>cssSlider sfrutta le potenzialità offerte dalla tecnologia CSS3 per offrire effetti e animazioni incredibili, in grado di creare un’esperienza d’uso focalizzata su ogni azione.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-asterisk"></span><span>Bellissimi Temi Grafici Pronti Per L’uso</span></h2> <p>Grazie ai numerosi stili grafici e temi preo-costruiti, che accompagnano cssSlider, non dovrai ricorrere ad alcun codice sorgente per personalizzare il tuo slider. Infatti, ti basterà scegliere il tema grafico che più si addice alle tue esigenze e/o preferenze stilistiche.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-code"></span><span>Pure CSS</span></h2> <p>cssSlider è composto di puro CSS (no c’è Javascript, jQuery ne’ Flash) ed è in grado di funzionare su qualsiasi browser senza bisogno di utilizzare plug-in esterni.</p> </div> </div> </div> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-mobile"></span><span>Mobile</span></h2> <p>I tuoi utenti potranno interagire con cssSlider da qualsiasi dispositivo vorranno utilizzare, compreso il loro cellulare. Tutto questo può verificarsi perchè cssSlider è ottimizzato per adattarsi ad una risoluzione ottimale a seconda del dispositivo utilizzato per navigare.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-refresh"></span><span>Anteprima Dal Vivo</span></h2> <p>Potrai tenere traccia di ogni modifica direttamente con la funzione “Anteprima dal Vivo”.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-desktop"></span><span>Retina-ready</span></h2> <p>Tutta l’interfaccia utente, comprese le icone (in tecnologia font), sfruttano la tecnologia vettoriale per offrire una totale compatibilità su schermi ad alta definizione.</p> </div> </div> </div> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-magic"></span><span>Semplice da Usare</span></h2> <p>Semplice da usare, puoi scegliere tra numerosi temi grafici predefiniti, colori ed effetti disponibili nella libreria nativa. Il loro utilizzo non necessità di alcuna conoscenza di programmazione. Grazie all’editor visivo, non dovrai scrivere nessuna linea di codice! <a href="migliori-website-builder.html">Migliori Website Builder!</a> </p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-external-link"></span><span>Responsive Design</span></h2> <p>Quasi la metà dei visitatori di un sito web utilizza un dispositivo mobile per consultare la pagina. Non possedere un sito web ottimizzato per dispositivi mobili, significa dare origine ad un’esperienza di navigazione negativa. Ma, grazie all’ottimizzazione responsive proposta da cssSlider, con un layout in grado di adattarsi alla rispettiva risoluzione video utilizzata, tutto questo sarà solo un lontano ricordo.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-gear"></span><span>Altamente Personalizzabile</span></h2> <p>Puoi utilizzare cssSlider in due differenti modalità: versione Base o Avanzata. A tua disposizione numerosi layout pronti per l’uso, affinchè tutto possa rimanere semplice da usare. Oppure, qualora tu possieda qualche conoscenza avanzata, potrai modificare direttamente la configurazione base proposta.</p> </div> </div> </div> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-crop"></span><span>Ridimensionamento delle immagini automatico</span></h2> <p>Non dovrai ricorrere ad editor grafici per ridimensionare le tue immagini. cssSlider ridimensionerà le immagini automaticamente.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-tint"></span><span>Tanti Colori a Tua Disposizione</span></h2> <p>Non sai qaule schema colore scegliere per il tuo slider? Grazie alla ricca libreria di colori predefiniti, avrai solo l’imbarazzo della scelta!</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-paperclip"></span><span>Clicca, Trascina e Rilascia</span></h2> <p> Con la funzionale modalità "clicca, trascina e rilascia" è possibile aggiungere o rimuovere rapidamente le immagini dalla vostra interfaccia di scorrimento e/o cambiarne l'ordine. Più facile di così non è possibile! </p> </div> </div> </div> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-bug"></span><span>SEO Friendly</span></h2> <p>Grazie all’uso della tecnologia HTML5, lo slider risulta ottimizzato per la comprensione (lato codice) da parte dei crawl dei motori di ricerca.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-wrench"></span><span>Personalizza il tuo Slider</span></h2> <p>Tanti elementi pronti per essere personalizzati! Con pochi click, grazie all’editor visivo, potrai personalizzare i bottoni “avanti/indietro”, le icone di navigazione, i colori, le animazioni da utilizzare e molto altro ancora.</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-cloud"></span><span>Leggerezza e Compatibilità Senza Frontiere</span></h2> <p>Progettato per essere utilizzato senza l’ausilio di risorse JS esterne. Grazie al suo cuore CSS, questo slider potrà usufruire di un caricamento veloce e un’interazione compatibile con tutti i browser più diffusi.</p> </div> </div> </div> <div class="clear"></div>  <div class="rt-readon-row"> <a href="#download" class="readon rt-large-button download-button"><span class="icon-download-alt"></span> Download gratuito per Windows e Mac</a> </div>  <div class="clear"></div> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div>  </div> </div> </section><footer id="rt-footer-surround"> </footer><div id="rt-copyright" class="rt-overlay-dark"> <div class="rt-container"> <div class="rt-grid-4 rt-alpha"> <div class="rt-copyright-content rt-block"> © 2017 CSS Slider - All Rights Reserved. </div> </div> <div class="rt-grid-4"> <div class="clear"></div> <div class="rt-block"> <a href="#" id="gantry-totop" rel="nofollow"><span class="icon-angle-up rt-totop-icon"></span></a> </div> </div> <div class="rt-grid-4 rt-omega"> </div> <div class="clear"></div> </div> </div> </div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-51685724-1']); _gaq.push(['_setDomainName', '.cssslider.com']); _gaq.push(['_setAllowLinker', true]); _gaq.push(['_setAllowHash', false]); if(document.cookie.match("(^|;\\s)__utma") && !/utmcsr=\(direct\)/.test(unescape(document.cookie))) { _gaq.push( ['_setReferrerOverride', ''],['_setCampNameKey', 'aaan'],['_setCampMediumKey', 'aaam'], ['_setCampSourceKey', 'aaas'],['_setCampTermKey', 'aaat'],['_setCampContentKey', 'aaac'], ['_setCampCIdKey', 'aaaci']) } _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script type="text/javascript" src="../js/adjast-slider.js"></script> </body> </html>

CINXE.COM

Non più jQuery Slider, con questo slider di immagini in puro CSS