jQuery: evitare l'effetto riavvolgimento sulle slide di uno slideshow

Il riavvolgimento rapido delle slide è un problema abbastanza comune in quegli slideshow jQuery che fanno uso del posizionamento per mostrare le slide. Fortunatamente esiste una soluzione. Vediamo quale.

Partiamo da questa struttura HTML:


<div id="slideshow">
    <div id="slideshow-wrapper">
        <div class="slide" id="s1"></div>
        <div class="slide" id="s2"></div>
        <div class="slide" id="s3"></div>
        <div class="slide" id="s4"></div>
        <div class="slide" id="s5"></div>
    </div>
    <div id="slideshow-nav">
        <a href="#s1">1</a>
        <a href="#s2">2</a>
        <a href="#s3">3</a>
        <a href="#s4">4</a>
        <a href="#s5">5</a>
    </div>
</div>
​

Come si può notare, ciascun link della navigazione è collegato ad una slide tramite un'ancora corrispondente all'ID della slide. Il codice CSS è il seguente:


#slideshow {
    width: 500px;
    margin: 2em auto;
    overflow: hidden;
}

#slideshow-wrapper {
    width: 2500px;
    height: 300px;
    position: relative;
    background: #000;
}

div.slide {
    width: 500px;
    height: 300px;
    float: left;
}

#s1 {
    background: gray;
}

#s2 {
    background: #eed;
}

#s3 {
    background: #d34545;
}

#s4 {
    background: #f60;
}

#s5 {
    background: #ffc;
}

#slideshow-nav {
    margin: 1em 0;
    text-align: center;
}

#slideshow-nav a {
    margin-right: 0.5em;
    text-decoration: none;
    padding: 3px 6px;
    background: #ccc;
    border: 1px solid #333;
    color: #000;
}​

In jQuery dobbiamo utilizzare l'offset di ciascuna slide per spostare il contenitore delle slide, ma con un accorgimento: se la slide corrente non è la prima, allora creiamo una normale animazione, ma se la slide è la prima del set, allora riportiamo la proprietà left del contenitore al suo valore originale, (ossia 0) senza usare animazioni che creerebbero l'effetto di riavvolgimento:


var Slider = {
    run: function() {
        $('a', '#slideshow-nav').click(function(e) {
            e.preventDefault();
            var $a = $(this);
            var $slide = $($a.attr('href'));



            if (!$slide.is('div.slide:first')) {
                $('#slideshow-wrapper').animate({
                    left: -$slide.position().left
                }, 800);

            } else {




                $('#slideshow-wrapper').css('left', 0);



            }

        });

    }
};

Slider.run();​
Torna su