Как я могу предотвратить исчезновение последнего изображения в моей бесконечной карусели jQuery?

Я использую эту бесконечную карусель jQuery, но немного иначе, чем демо, вы можете ознакомиться с моим использованием здесь под заголовком "Истории успеха клиентов" '.

Как вы увидите, я расположил карусель по центру и оставил предыдущее изображение видимым при прокрутке карусели. Когда карусель загружается впервые, последнее изображение в последовательности не загружается, поэтому слева от первого изображения есть пробел. Последнее изображение также ненадолго исчезает, когда карусель возвращается к первому изображению.

Я пытался исправить это много раз сам, но мне не хватает знаний 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;
            }
        });
    }
};

person remondo    schedule 13.04.2012    source источник


Ответы (1)


Этот плагин предназначен для максимально автоматической работы, поэтому вариантов очень мало. Я думаю, вы можете добиться того, чего хотите, только изменив свой CSS. #customersCarousel должен состоять из 3 элементов и располагаться там, где должен быть левый край первого элемента, если он не был частично скрыт градиентом слева от него. Этот первый элемент будет первым элементом в списке. Избавьтесь от правого поля на #customersCarouselList (это может конфликтовать с автоматической обработкой размера и позиционирования). Затем измените изображения градиента, чтобы скрыть левую часть первого элемента и правую часть третьего элемента. Надеюсь, это поможет.

person sroucheray    schedule 16.04.2012
comment
Спасибо, я полагаю, вы автор сценария? Вы правы, что поля влияли на последнее изображение. Я кое-что поправил, но теперь второе изображение исчезает. У меня нет времени возиться с этим, так что это придется сделать. - person remondo; 17.04.2012