Image Slider

<!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>Image Slider</title> <link rel="stylesheet" href="https://cssslider.com/styles.min.css" type="text/css" /> <style type="text/css"> #rt-showcase.slider-container { background: #F5F6F8; } .slider-container { padding-top: 20px; } .slider-container .csslider1 { position: relative; display: block; margin: 0 auto !important; } </style> </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"> <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="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 class="active"> <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/image-slider-6.html" title="English"><i class="flag-en"></i> EN</a></li> <li><a class="item" href="https://cssslider.com/es/image-slider-6.html" title="Español"><i class="flag-es"></i> ES</a></li> <li><a class="item" href="https://cssslider.com/nl/image-slider-6.html" title="Nederlands"><i class="flag-nl"></i> NL</a></li> <li><a class="item" href="https://cssslider.com/pt/image-slider-6.html" title="Português"><i class="flag-pt"></i> PT</a></li> <li><a class="item" href="https://cssslider.com/da/image-slider-6.html" 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/image-slider-6.html" title="Deutsch"><i class="flag-de"></i> DE</a></li> <li><a class="item" href="https://cssslider.com/fr/image-slider-6.html" title="Français"><i class="flag-fr"></i> FR</a></li> <li><a class="item" href="https://cssslider.com/ja/image-slider-6.html" title="日本語"><i class="flag-ja"></i> JA</a></li> <li><a class="item" href="https://cssslider.com/no/image-slider-6.html" title="Norsk"><i class="flag-no"></i> NO</a></li> <li><a class="item" href="https://cssslider.com/sv/image-slider-6.html" 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"> <link rel="stylesheet" href="https://cssslider.com/sliders/demo-6/engine1/style.css">   <script type="text/javascript" src="https://cssslider.com/sliders/demo-6/engine1/gestures.js"></script> <div class='csslider1 autoplay '> <input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide'> <input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide'> <input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide'> <input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide'> <input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked> <input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause'> <input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause'> <input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause'> <input name="cs_anchor1" id='cs_pause1_3' type="radio" class='cs_anchor pause'> <ul> <div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"> <img src="https://cssslider.com/sliders/demo-6/data1/images/aster_tongolensis_michelmas_daisy_mauve_flower.jpg" style="width: 100%;"> </div> <li class='num0 img'> <img src="https://cssslider.com/sliders/demo-6/data1/images/aster_tongolensis_michelmas_daisy_mauve_flower.jpg" alt='jQuery slider ' title='Daisy Mauve Flower' /> </li> <li class='num1 img'> <img src="https://cssslider.com/sliders/demo-6/data1/images/flowers_plant_bloom_daisies_white.jpg" alt='Responsive ' title='White daisies' /> </li> <li class='num2 img'> <img src="https://cssslider.com/sliders/demo-6/data1/images/flowers_plant_purple_pansy_violet.jpg" alt='Responsive ' title='Pansy' /> </li> <li class='num3 img'> <img src="https://cssslider.com/sliders/demo-6/data1/images/rose_summer_flower_flowers_garden_rose.jpg" alt='HTML slider ' title='White rose' /> </li> </ul> <a class="cs_lnk" href="https://cssslider.com"> Bootstrap image slideshow </a> <div class='cs_description'> <label class='num0'> <span class="cs_title"><span class="cs_wrapper">Daisy Mauve Flower</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Aster Tongolensis</span></span> </label> <label class='num1'> <span class="cs_title"><span class="cs_wrapper">White daisies</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">field plant</span></span> </label> <label class='num2'> <span class="cs_title"><span class="cs_wrapper">Pansy</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">purple flowers</span></span> </label> <label class='num3'> <span class="cs_title"><span class="cs_wrapper">White rose</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">garden plant</span></span> </label> </div> <div class='cs_play_pause'> <label class='cs_play' for='cs_play1'><span><i></i></span></label> <label class='cs_pause num0' for='cs_pause1_0'><span><i></i></span></label> <label class='cs_pause num1' for='cs_pause1_1'><span><i></i></span></label> <label class='cs_pause num2' for='cs_pause1_2'><span><i></i></span></label> <label class='cs_pause num3' for='cs_pause1_3'><span><i></i></span></label> </div> <div class='cs_arrowprev'> <label class='num0' for='cs_slide1_0'><span><i></i></span></label> <label class='num1' for='cs_slide1_1'><span><i></i></span></label> <label class='num2' for='cs_slide1_2'><span><i></i></span></label> <label class='num3' for='cs_slide1_3'><span><i></i></span></label> </div> <div class='cs_arrownext'> <label class='num0' for='cs_slide1_0'><span><i></i></span></label> <label class='num1' for='cs_slide1_1'><span><i></i></span></label> <label class='num2' for='cs_slide1_2'><span><i></i></span></label> <label class='num3' for='cs_slide1_3'><span><i></i></span></label> </div> <div class='cs_bullets'> <label class='num0' for='cs_slide1_0'> <span class='cs_point'></span> <span class='cs_thumb'><img src="https://cssslider.com/sliders/demo-6/data1/tooltips/aster_tongolensis_michelmas_daisy_mauve_flower.jpg" alt='HTML slideshow ' title='Daisy Mauve Flower' /></span> </label> <label class='num1' for='cs_slide1_1'> <span class='cs_point'></span> <span class='cs_thumb'><img src="https://cssslider.com/sliders/demo-6/data1/tooltips/flowers_plant_bloom_daisies_white.jpg" alt='Responsive carousel ' title='White daisies' /></span> </label> <label class='num2' for='cs_slide1_2'> <span class='cs_point'></span> <span class='cs_thumb'><img src="https://cssslider.com/sliders/demo-6/data1/tooltips/flowers_plant_purple_pansy_violet.jpg" alt='HTML5 carousel ' title='Pansy' /></span> </label> <label class='num3' for='cs_slide1_3'> <span class='cs_point'></span> <span class='cs_thumb'><img src="https://cssslider.com/sliders/demo-6/data1/tooltips/rose_summer_flower_flowers_garden_rose.jpg" alt='HTML5 slider ' title='White rose' /></span> </label> </div> </div> </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> </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/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/non-jquery-carousel-7.html"> <img src="https://cssslider.com/sliders/demo-7/thumb.jpg" alt="non-jQuery Carousel wordpress " 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> <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-slideshow-3.html"> <img src="https://cssslider.com/sliders/demo-3/thumb.jpg" alt="non-jQuery Slideshow wordpress " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non-jQuery 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/non-jquery-slider-1.html"> <img src="https://cssslider.com/sliders/demo-1/thumb.jpg" alt="non-jQuery Slider jquery " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non-jQuery 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> </ul> </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" style="margin-top: 0;"> <div class="module-surround"> <div class="module-content"> <div id="download" class="customfp-feature rt-center rt-big-title">  <div class="rt-readon-row"> <a href="https://cssslider.com/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="https://cssslider.com/cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> Scarica per Mac</a> </div>  <div class="clear"></div> <div class="clear"></div> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div>   <div id="rt-content" class="rt-overlay-light"> <div class="rt-container"> <div class="rt-grid-12 rt-alpha rt-omega"> <div class="rt-block fp-feature rt-big-title"> <div class="module-surround"> <div class="module-content"> <div class="customfp-feature"> <div class="gantry-width-80 gantry-width-block rt-margin-auto"> <h2 class="entry-title"> Slide Effect & Blast Style Image Slider</h2> <p>Questo è uno slider ad ampiezza massima, progettato in CSS, molto bello e appariscente. È abilitato ai gesti per touch screen, rendendolo l'ideale per tablet e smartphone. I tempi di caricamento sono molto rapidi. </p> <p align="center"><img src="https://cssslider.com/sliders/demo-6/preview.jpg" style="border: 0px"></p> <p>Essendo ad ampiezza massima, le immagini possono offrire il massimo impatto, rendendo lo slider un'ottima scelta per fotografi e per altri siti in cui va dato il massimo risalto alle immagini. </p> <p>Ci sono due frecce di navigazione e un pulsante pause/play che appaiono quando l'utente punta il mouse sulle immagini. Le icone sono bianche in grassetto e si trovano su di un cerchio blu scuro. Appaiono con un effetto caduta, comparendo gradualmente e rimpicciolendosi fino alle dimensioni standard. Quando si allontana il puntatore del mouse, l'effetto è l'esatto contrario: le icone si gonfiano e si dissolvono velocemente. Nel complesso questo effetto dà un forte senso di tridimensionalità allo slider. </p> <p>Quando si punta direttamente sulle icone, appare un bordo blu che sembra irradiarsi dal cerchio centrale per poi dissolversi. Di nuovo, un effetto elegante e drammatico che dà grande risalto a questo slider. </p> <p>Le icone fanno esattamente quello che l'utente si aspetta: cliccando sulle frecce a destra e a sinistra si procede avanti o indietro con la presentazione, mentre cliccando sul tasto play/pause si arresta o riavvia la presentazione. </p> <p>L'utente può anche navigare tra le immagini utilizzando i cerchietti in basso al centro. Questi cerchietti sono di colore blu scuro, e ciascuno rappresenta un'immagine della presentazione. Quando una nuova immagine compare nell'area principale, il cerchietto ad essa associato si evidenzia acquisendo un bordo bianco semitrasparente che cattura l'attenzione facendo capire all'utente qual è la funzione del cerchietto. </p> <p>Interagendo con i cerchietti, comparirà un'anteprima dell'immagine relativa, contenuta in una cornice blu. Questa immagine 'cade' e 'decolla' proprio come le icone di navigazione. Cliccando su di un cerchio, l'immagine relativa si caricherà nella finestra principale della presentazione. </p> <p>Ogni immagine della presentazione scivola in posizione spingendo via quella precedente, a destra o a sinistra, a seconda della direzione in cui si sta navigando. Quando si usano i cerchietti per navigare direttamente su di un'immagine specifica, si vedranno scorrere velocemente tutte le immagini intermedie, e quando la presentazione giunge alla fine, si scorreranno rapidamente tutte le immagini per tornare a quella iniziale. Questo dà alla presentazione un carattere molto fine e realistico, rendendo lo slider caldo e organico. </p> <p>All'angolo in basso a sinistra si trova una didascalia, composta di titolo e sottotitolo, entrambe in testo bianco su rettangolini blu semitrasparenti. Le didascalie cadono e si alzano in posizione alla stessa maniera delle altre icone. Lo sfondo blu semitrasparente permette di lasciar passare i colori dell'immagine sottostante e dà allo stesso tempo un tono morbido alla didascalia. </p> <p>Il testo è in carattere Duru Sans, un font sans-serif che mette insieme un design umanista e modernista. Il risultato è molto elegante e dona a tutto lo slider un carattere molto sofisticato. </p> <p>Dato che non ci sono elementi jQuery, javascript o immagini, questo slider è veloce e funziona su qualsiasi piattaforma. È perfetto per i siti ottimizzati per dispositivi mobili. </p> </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"> © 2015 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> </body> </html>

CINXE.COM

Image Slider