Come creare slideshow di immagini come al sito di Valentino Rossi

Sai che  i grandi siti utilizzano cose comuni che potresti utilizzare anche te, per esempio il sito ufficiale di Valentino Rossi sulla prima pagina utilizza slaideshow di immagini che si chiama FlexSlider. FlexSlider - un piccolo plug-in jQuery, che ci permette di organizzare ottimo carosello di immagini o altri elementi HTML.

Nella realizzazione del carosello viene utilizzata una lista non ordinata. Come voci della lista  possono essere inseriti tutti gli elementi HTML, che sarànno convertiti in diapositive del nostro carosello di immagini.

Scorere  varie slaid  nel nostro slideshow è possibile usando i controlli di navigazione destra / sinistra o impostare scorimento in automatico

Vedimo come inserire questo slideshow basato su jscript e libreria jQueri in una pagina web indipendemente se e un sito joomla o WP o un sito html semlplice. il nostro carosello di immagini e molto universale.

Codice html del nostro slideshow di immagini su jQuery

Il codice è molto semplice da inserire sulla vostra pagina HTML o un articolo Joomla

<!-- inserire sulla vostra pagina al interno del tag  <body> nel posto voluto  -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="/slide1.jpg" />
    </li>
    <li>
      <img src="/slide2.jpg" />
    </li>
    <li>
      <img src="/slide3.jpg" />
    </li>
    <li>
      <img src="/slide4.jpg" />
    </li>
  </ul>
</div>

Gestione del aspetto finale del carosello

Posimo modifficare il fail originale incluso nello FlexSlider o crere gli stili proprie i come colore (posiamo creare un proprio foglio di stili CSS), largezza,effetto di scorimento, aggiungere varie titoli o semplice testo.

Per esempio vediamo come hanno realizato le frecce gialle di navigazione tramite i stili CSS sul sito di Valentino

.flex-direction-nav a {
    background-color: #eaff00;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 28% auto;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    text-indent: -9999px;
    transition: background-color 0.2s ease 0s;}

Vediamo che alla classe ".flex-direction-nav a" hanno atribuito colore giallo(background-color: #eaff00;) e  hanno creato un discetto  tramite proprieta (border-radius: 50%;) e cosi via.

E vediamo anche come hanno fissato il numero 46 sopra il carosello

.logo {
    background-image: url("../images/logo46.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 177px 75px;
    display: block;
    height: 75px;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    top: 8px;
    width: 177px;
}

inserendo immagine  logo46.png  con la posizione position: absolute; nella scatola con la classe .header-content

.header-content {
    height: 100%;
    margin: 0 auto;
    max-width: 1160px;
    position: relative;
    width: 98%;
}

 E ora vediamo un esempio di questo slideshow

Vediamo subito anche  il codice dello slideshow sopra. Qui sotto troverete link per scaricare pacheto di fail di questo slideshow.

Codice dello slideshow

<link href="/flexslider/flexslider.css" rel="stylesheet" type="text/css" rel="stylesheet" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/flexslider/jquery.flexslider.js"></script>
 <!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="/flexslider/slide1.jpg" />
    </li>
    <li>
      <img src="/flexslider/slide2.jpg" />
    </li>
    <li>
      <img src="/flexslider/slide3.jpg" />
    </li>
    <li>
      <img src="/flexslider/slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
      <img src="/flexslider/slide1.jpg" />
    </li>
    <li>
      <img src="/flexslider/slide2.jpg" />
    </li>
    <li>
      <img src="/flexslider/slide3.jpg" />
    </li>
    <li>
      <img src="/flexslider/slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>
<script>
$(document).ready(function() {
  // The slider being synced must be initialized first
  $('#carousel').flexslider({
    animation: "slide",
 controlNav: true,
  animationLoop: true,
    slideshow: true,
    itemWidth: 190,
    itemMargin: 5,
    asNavFor: '#slider'
  });
 
  $('#slider').flexslider({
    animation: "slide",
    controlNav: true,
    animationLoop:true,
    slideshow: true,
    sync: "#carousel"
  });
});</script>

 

Impostazioni di FlexSlider

//FlexSlider: Default Settings
  $.flexslider.defaults = {
    namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
    selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
    animation: "fade",              //String: Select your animation type, "fade" or "slide"
    easing: "swing",                //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
    direction: "horizontal",        //String: Select the sliding direction, "horizontal" or "vertical"
    reverse: false,                 //{NEW} Boolean: Reverse the animation direction
    animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
    smoothHeight: false,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
    startAt: 0,                     //Integer: The slide that the slider should start on. Array notation (0 = first slide)
    slideshow: true,                //Boolean: Animate slider automatically
    slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
    animationSpeed: 600,            //Integer: Set the speed of animations, in milliseconds
    initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
    randomize: false,               //Boolean: Randomize slide order
    fadeFirstSlide: true,           //Boolean: Fade in the first slide when animation type is "fade"
    thumbCaptions: false,           //Boolean: Whether or not to put captions on thumbnails when using the "thumbnails" controlNav.
    // Usability features
    pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
    pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
    pauseInvisible: true,           //{NEW} Boolean: Pause the slideshow when tab is invisible, resume when visible. Provides better UX, lower CPU usage.
    useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
    touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
    video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
    // Primary Controls
    controlNav: true,               //Boolean: Create navigation for paging control of each slide? Note: Leave true for manualControls usage
    directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
    prevText: "Previous",           //String: Set the text for the "previous" directionNav item
    nextText: "Next",               //String: Set the text for the "next" directionNav item
    // Secondary Navigation
    keyboard: true,                 //Boolean: Allow slider navigating via keyboard left/right keys
    multipleKeyboard: false,        //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
    mousewheel: false,              //{UPDATED} Boolean: Requires jquery.mousewheel.js (<a href="https://github.com/brandonaaron/jquery-mousewheel">https://github.com/brandonaaron/jquery-mousewheel</a>) - Allows slider navigating via mousewheel
    pausePlay: false,               //Boolean: Create pause/play dynamic element
    pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
    playText: "Play",               //String: Set the text for the "play" pausePlay item
    // Special properties
    controlsContainer: "",          //{UPDATED} jQuery Object/Selector: Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be $(".flexslider-container"). Property is ignored if given element is not found.
    manualControls: "",             //{UPDATED} jQuery Object/Selector: Declare custom control navigation. Examples would be $(".flex-control-nav li") or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
    customDirectionNav: "",         //{NEW} jQuery Object/Selector: Custom prev / next button. Must be two jQuery elements. In order to make the events work they have to have the classes "prev" and "next" (plus namespace)
    sync: "",                       //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
    asNavFor: "",                   //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
    // Carousel Options
    itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
    itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
    minItems: 1,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
    maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
    move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
    allowOneSlide: true,           //{NEW} Boolean: Whether or not to allow a slider comprised of a single slide

E ora piccola guida detagliata di come fare slideshow sulla vostra pagina.

Quindi, dopo aver passato sul sito della  casa produttrice clicando link qui sotto. Ho scaricato l'archivio da li ho preso il fail dello script dello slideshow , fail css con dei stili, e puoi la cartella con i font  flexslider-icon. Ho collegato tutto questo  e in piu libreria jQuery al mio articolo e ho creato il mio carosello inserendo delle immagini che potete vedere qui sopra come elementi della lista,  dopo di che ho inserito lo script che gestisce il carosello impostando varie parametri  come: scorrimento automatico, infinita nella esecuzione, tipo di animazione "slide", e altre. Vorrei anche notare che sulla pagina della casa produttrice ci sono vari tipologie di slideshow e ad ogni tipo corrisponde il suo script che troverete nelle rispettive cartelle del archivio scaricato. Ne posiamo avere tanti di slideshow sulla stessa pagina importante di attribuire a loro diversi id e applicare lo script finale a questi id.   

Clicando su DEMO passerai sulla  pagina del plugin dove potrai scaricarlo e leggere ulteriori spiegazioni riguardo questo ottimo slideshow di immagini!

 

Letto 1555 volte