0

カスタム画像カルーセルで手を汚しました。それを機能させるためにいくつかのjqueryを書きましたが、1つの問題で立ち往生しています。

「前へ」と「次へ」のリンクをクリックすると問題が発生します。

  • 「次へ」をクリックすると、最後の表示項目に到達すると、サムネイル コンテナ DIV が負の左方向にスクロールします。
  • 合計スクロール値は 2 つの要因に依存します
  • まず、サムネイルが 5 つ以上残っている場合、DIV は (itemWidth x 5) までスクロールする必要があります。
  • 次に、残りのアイテムが 5 未満の場合、スクロール値は (itemWidth x leftItems) になります。

「前へ」ボタンと「次へ」ボタンがクリックされた場合、クリック時のスクロール値を計算する方法は?

参考までに：http://jsfiddle.net/ylokesh/8bHZq/2/

JavaScript コード:

var extCarousel = {
        backBtn : $('.backward'),
        fwdBtn : $('.forward'),
        thumbItems : $('.slidetabcontent a'),
        carouselItem : $('.slide'),
        currentItemIndex : $('.currentIndex'),
        totalItemsCount : $('.currentMax'),
        lastItemIndex : $('.slidetabcontent a:last').index(),
        firstItemIndex : $('.slidetabcontent a:first').index(),
        defaultThumbnailSet : 5,

        generateCarousel : function() {
            var _this = this;
            _this.thumbItems.eq('0').addClass('current');
            _this.carouselItem.hide().filter(':first').addClass('active').show().find(_this.currentItemIndex).html($('.slide.active').index() + 1);

            _this.totalItemsCount.html(_this.thumbItems.length);
            _this.controlNavigation();              
        },

        controlNavigation : function() {

            var _this = this,
                currentIndex, lastItem, firstItem;

            // Back Button
            _this.backBtn.on('click', function(e){
                e.preventDefault();
                currentIndex = $('.slide.active').index() - 1,
                firstItem = _this.firstItemIndex - 1;

                if(currentIndex != firstItem) {
                    _this.moveCarousel(currentIndex);
                }
            });

            // Prev Button
            _this.fwdBtn.on('click', function(e){
                e.preventDefault();
                currentIndex = $('.slide.active').index() + 1,
                lastItem = _this.lastItemIndex + 1;

                if(currentIndex != lastItem) {
                    _this.moveCarousel(currentIndex);
                }
            });

            //Thumbnail Click
            this.thumbItems.on('click', function(e) {
                e.preventDefault();
                currentIndex = $('.slide.active').index();
                _this.moveCarousel(currentIndex);
            });

        },

        moveCarousel : function(currIndex) {
            var _this = this;
            _this.carouselItem.removeClass('active').fadeOut('fast').eq(currIndex).addClass('active').fadeIn('fast');
            _this.activateThumbnail(currIndex);
        },

        activateThumbnail : function(currIndex) {
            var _this = this;
            _this.thumbItems.removeClass('current').eq(currIndex).addClass('current');
            _this.setCurrentItemIndex(currIndex + 1);

            if(currIndex == _this.defaultThumbnailSet) {
                _this.slideThumbnails();
            }

        },

        slideThumbnails : function() {
            var _this = this;
            var remainingThumbnails = _this.thumbItems.length - _this.defaultThumbnailSet;
            var itemWidth = _this.thumbItems.width() + parseInt(_this.thumbItems.css('padding').split('px')[0]*2);
            if(remainingThumbnails > 5) {
                $('.slidetabcontent').animate({
                    'left' : -(itemWidth*5)
                }, 'slow');
            } else {
                $('.slidetabcontent').animate({
                    'left' : -(itemWidth*remainingThumbnails)
                },'slow');
            }
        },

        setCurrentItemIndex : function(currIndex) {
            var _this = this;
            _this.currentItemIndex.html(currIndex);
        },

        init : function() {
            var _this = this;
            _this.generateCarousel();
        }
    };
    $(document).ready(function(){
        var extensionCarousel = extCarousel.init();
    })
4

0 に答える 0