JQuery SerialScroll: Klassenklasse zum aktiven Element hinzufügen

Question

Ich verwende das SerialScroll -Skript von Ariel Flesler und möchte dem aktiven oder hervorgehobenen Element eine Klasse hinzufügen, damit ich sie mit CSS stylen kann. Lektüre die Dokumentation Ich habe den Benachrichtigungsauslöser entdeckt, aber ich bin mir nicht sicher, wie / ob er dazu verwendet werden könnte.

Dies ist mein Code:

JQuery

jQuery(function( $ ){

    $('#slideshow').serialScroll({
        items:'li',
        prev:'#screen2 a.prev',
        next:'#screen2 a.next',
        offset:-180,
        start: 0,
        duration:1200,
        force:true,
        stop:true,
        lock:false,
        cycle:false,
        jump: true
    });

});

Html

    <div id="screen2">
    <div id="buttons">
        <a class="prev" href="#">Previous</a>
        <a class="next" href="#">Next</a>
        <br class="clear" />
    </div>
    <div id="slideshow">
        <ul>
            <li><img src="http://www.stockvault.net/data/s/113497.jpg" /></li>
            <li><img src="http://www.stockvault.net/data/s/100177.jpg" /></li>
            <li><img src="http://www.stockvault.net/data/s/101916.jpg" /></li>
            <li><img src="http://www.dreamstime.com/animal-steps-in-snow-thumb12853223.jpg" /></li>
            <li><img src="http://www.dreamstime.com/animal-eggs-thumb15876342.jpg" /></li>
            <li><img src="http://www.dreamstime.com/animal-cat-thumb15385101.jpg" /></li>
            <li><img src="http://www.dreamstime.com/green-nature-thumb596309.jpg" /></li>
            <li><img src="http://www.dreamstime.com/office-in-nature-thumb3256171.jpg" /></li>
            <li><img src="http://www.dreamstime.com/nature-tree-thumb16030502.jpg" /></li>
            <li><img src="http://www.dreamstime.com/gift-of-the-nature-thumb15977958.jpg" /></li>
            <li><img src="http://www.dreamstime.com/nature-abstract-thumb3615419.jpg" /></li>
            <li><img src="http://www.dreamstime.com/nature-path-in-forest-with-sunshine-thumb8241130.jpg" /></li>
            <li><img src="http://www.dreamstime.com/nature-walk-thumb8436665.jpg" /></li>
            <li><img src="http://www.dreamstime.com/save-the-nature-thumb15696583.jpg" /></li>
        </ul>
    </div>
</div>

Verstehe ich die Funktion des Benachrichtigungsauslösers missverstanden? Und wenn ja, gibt es alternative Möglichkeiten, das zu erreichen, wonach ich suchte?

Answer 1

Auf der Plugin -Beispielseite wird hier eine Art und Weise verwendet, wie sie verwendet werden:

onBefore:function( e, elem, $pane, $items, pos ){
    /**
    * 'this' is the triggered element 
    * e is the event object
    * elem is the element we'll be scrolling to
    * $pane is the element being scrolled
    * $items is the items collection at this moment
    * pos is the position of elem in the collection
    * if it returns false, the event will be ignored
    */
    //those arguments with a $ are jqueryfied, elem isn't.
}

In dieser Funktion können Sie Ihre aktive Klasse hinzufügen und die On -Nach -Funktion verwenden, um die Klasse aus dem vorherigen Element zu entfernen.