Unsere Marken Slider Animation verändern?

Hallo Zusammen,

erstmal wieder vielen Dank fürs reinschauen :slight_smile:

Bin gerade dabei meinen “Unsere Marken Slider” etwas anzupassen.
Dabei gefällt mir der Effekt “Easing” sehr gut.

Habe dazu auch was passendes gefunden:

http://www.gmarwaha.com/jquery/jcarousellite/?#demo

Leider bin ich noch sehr schwach in sachen Jquery, und weiss nicht wie ich den Effekt umbauen kann.

Das ist der der Code von meinem Slider:

( function( $ ) {

    oxManufacturerSlider = {
            options: {
                classButtonNext    : '.nextItem',
                classButtonPrev    : '.prevItem'
            },

            _create: function() {

                var self = this,
                options = self.options,
                el         = self.element;

                 el.jCarouselLite({
                     btnNext: options.classButtonNext,
                     btnPrev: options.classButtonPrev,
                   visible: 6,
                   scroll: 1
                });
            }
    };

    $.widget("ui.oxManufacturerSlider", oxManufacturerSlider );

} )( jQuery );

Und das ist das “Easing” Script.

$(".bounceout .jCarouselLite").jCarouselLite({
    btnNext: ".bounceout .next",
    btnPrev: ".bounceout .prev",
    easing: "bounceout",
    speed: 1000
});

Hat jemand eine Idee?

Vielen Dank an euch :slight_smile: für jede Hilfe! :slight_smile:

Jemand vllt eine Idee? :slight_smile:

Pushen nach 2,5 Stunden habe ich bis jetzt nur bei 12-jährigen Kindern im CHIP Forum erlebt :smiley:

Übe bitte etwas mehr Geduld, ein Forum ist keine Hotline.
Um Dich beim Üben der Geduld zu unterstützen, poste ich die Lösung erst um die Mitternacht :slight_smile:

Viele Grüße aus dem sonnigen Bonn

um die Uhrzeit sind die Kiddies aber schon im Bett…

eventuell solltest Du die Lösung vielleicht schon ein wenig früher verraten :slight_smile:

Sorry, so war es nicht gemeint.
Kommt nicht mehr vor, dann muss ich eben leider warten.
:frowning: Schade

so, es ist mehr oder weniger Halbzeit, hier ein Tipp:
vergleich mal diese 2 Stellen im Code:

1: dein Slider


...
...el.jCarouselLite({ 
                     btnNext: options.classButtonNext, 
                     btnPrev: options.classButtonPrev, 
                   visible: 6, 
                   scroll: 1 
                });
...
...

und dein easing Script:


$(".bounceout .jCarouselLite").jCarouselLite({ 
    btnNext: ".bounceout .next", 
    btnPrev: ".bounceout .prev", 
    easing: "bounceout", 
    speed: 1000 
});  

fallen irgendwelche Ähnlichkeiten auf? :slight_smile:

[QUOTE=vanilla thunder;104107]
Um Dich beim Üben der Geduld zu unterstützen, poste ich die Lösung erst um die Mitternacht :)[/QUOTE]

klasse! ääääh, welche mitternacht? 17.12.2013???.. :wink:

meine innere Uhr geht ein bisschen nach :smiley:

Schritt 1: easing plugin besorgen
easing Animationen erfordern easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
(aufpassen: “bounceout” ist mittlerweile veraltet, daher entweder die alte Version 1.1 runterladen oder die compatibility Version oder auch die neue Schreibweise benutzen: “easeOutBounce”)

Schritt 2: easing plugin einbinden
z.B. in der widget/manufacturerslider.tpl einfügen:

[{oxscript include="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"}][/php}
ich hab noch die URL von der Sanbox, aber ihr/du kannst das Plugin ja auf den eigenen Server hochladen.

[b]Schritt 3: Easing Animation "einschalten"[/b]
in der oxmanufacturerslider.js gibts ab der Zeile 37 diese bereits erwähnte Stelle:


el.jCarouselLite({
btnNext: options.classButtonNext,
btnPrev: options.classButtonPrev,
visible: 6,
scroll: 1,
speed: 1000,
easing: “easeOutBounce”
});



und das wars auch schon :)

vanilla thunder hält sein wort!
und hat hier echt toll beschrieben, wie man das teil einbaut! RIESEN DANK und KOMPLIMENT an dich :slight_smile: Habs auch gleich reingebaut und funktioniert tadelos!

http://custest.bragis.net/

Freue mich sehr!!!