0

私はこのjQueryInfiniteCarouselを使用していますが、デモとは少し異なる方法で、「CustomerSuccessStories」という見出しの下に私の使用法を見ることができます。

ご覧のとおり、カルーセルを中央に配置し、カルーセルをスクロールしても前の画像が表示されるようにしました。カルーセルが最初に読み込まれるとき、シーケンスの最後の画像は読み込まれないため、最初の画像の左側に空白があります。カルーセルが最初の画像に戻ると、最後の画像も一時的に消えます。

私はこれを何度も自分で修正しようとしましたが、jQueryの知識が不足していて、スクリプトが応答を停止します。カルーセルがロードされたときに表示され、最初に到達したときに消えないように、シーケンスの最後の画像を取得する方法を知っていますか？また？ありがとう。

jQueryスクリプトは次のとおりです。

    /**
 * @author Stéphane Roucheray 
 * @extends jquery
 */


jQuery.fn.carousel = function(previous, next, options){
    var sliderList = jQuery(this).children()[0];

    if (sliderList) {
        var increment = jQuery(sliderList).children().outerWidth("true"),
        elmnts = jQuery(sliderList).children(),
        numElmts = elmnts.length,
        sizeFirstElmnt = increment,
        shownInViewport = Math.round(jQuery(this).width() / sizeFirstElmnt),
        firstElementOnViewPort = 1,
        isAnimating = false;

        for (i = 0; i < shownInViewport; i++) {
            jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px");
            jQuery(sliderList).append(jQuery(elmnts[i]).clone());
        }

        jQuery(previous).click(function(event){
            if (!isAnimating) {
                if (firstElementOnViewPort == 1) {
                    jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
                    firstElementOnViewPort = numElmts;
                }
                else {
                    firstElementOnViewPort--;
                }

                jQuery(sliderList).animate({
                    left: "+=" + increment,
                    y: 0,
                    queue: true
                }, "swing", function(){isAnimating = false;});
                isAnimating = true;
            }

        });

        jQuery(next).click(function(event){
            if (!isAnimating) {
                if (firstElementOnViewPort > numElmts) {
                    firstElementOnViewPort = 2;
                    jQuery(sliderList).css('left', "0px");
                }
                else {
                    firstElementOnViewPort++;
                }
                jQuery(sliderList).animate({
                    left: "-=" + increment,
                    y: 0,
                    queue: true
                }, "swing", function(){isAnimating = false;});
                isAnimating = true;
            }
        });
    }
};
4

1 に答える 1

0

このプラグインは可能な限り自動化することを目的としているため、オプションはほとんどありません。CSSを変更するだけで、目的を達成できると思います。は#customersCarousel3 項目の大きさで、最初の要素の左端が左側のグラデーションによって部分的に隠されていなければ、最初の要素の左端が意図されている場所に配置する必要があります。この最初の項目がリストの最初の項目になります。右マージンを取り除きます#customersCarouselList(自動サイズと配置処理で競合する可能性があります)。次に、グラデーション イメージを変更して、最初のアイテムの左側と 3 番目のアイテムの右側を非表示にします。この助けを願っています。

于 2012-04-16T20:08:29.400 に答える