Я использую эту бесконечную карусель 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;
}
});
}
};