0

このスクリプトを使用して、私の Web サイトで無限のカルーセルを作成しました。CSSでカスタマイズされているので、最初と最後のアイテムが途中まで表示されます。

右矢印をクリックし続けると、最後に空のスペースにぶつかってしまいます。これまでのところ、これを修正できませんでした。誰でも解決策を提供できますか?

関連するスクリプトは次のとおりです。

/**
 * @author Stéphane Roucheray 
 * @extends jquery
 */
jQuery.fn.simplecarousel = 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;
            }
        });
    }
};

#home-carousel-container {
    position: relative;
}
#home-carousel {
    overflow: hidden;
}
#home-carousel ul {
    margin-left: -143px;
    padding: 0;
    position: relative;
}
#home-carousel li {
    float: left;
    height: 645px;
    list-style: none outside none;
    margin: 0 3px;
    width: 256px;
}

ここに画像の説明を入力

4

1 に答える 1

2

私のコメントのとおりです。

カルーセルに負の左余白を設定したため、画像の半分が非表示になりました。その結果、[次へ] または [前へ] をクリックすると、連続した効果を作成するために画像が移動される場所が表示されます。

あなたのCSS内で、私は変更しました

#home-carousel ul{
  position: relative;
  padding: 0;
  margin-left: -143px;
}

に

#home-carousel ul{
  position: relative;
  padding: 0;
  margin-left: -3px;
}

そして、これまでに何の問題もありませんでした。

変更を加えたページのスクリーンショット - Chrome の場合

于 2013-03-04T15:44:40.433 に答える