Как сделать слайдер img с бесконечной прокруткой?
Я почти закончил веб-сайт для клиента на работе, у которого на главной странице есть большой динамический слайдер во всю ширину. Поскольку они дали несколько спецификаций, в настоящее время слайдер очень простой; он просто прокручивается слева направо, изменяя левое свойство CSS на UL. Очевидно, что из-за этого он будет внезапно прокручиваться обратно к началу, как только достигнет конца, чего, по-видимому, не хотят клиенты.
Я не эксперт в jQuery, и мне было интересно, как я могу легко изменить этот ползунок, чтобы вместо этого он прокручивался бесконечно.
Он также использует простую навигацию, имеет четыре слайда и небольшую панель управления внизу с заголовком каждого из них для быстрого перехода к определенным слайдам. Он также имеет стрелку, которая следует за последним слайдом.
Я нашел решения, чтобы сделать его зацикленным, но я не вижу ни одного, который выглядел бы совместимым с навигацией. Я бы очень хотел не начинать заново с нуля, возможно ли это?
Вот весь код, который я сейчас использую, если вам нужен CSS, я тоже могу его опубликовать, но я не думаю, что он слишком нужен.
Заранее большое спасибо.
РЕДАКТИРОВАТЬ :Результат jsFiddle
http://jsfiddle.net/hCXhZ/5/embedded/result/
Возможно, вам придется увеличить раздел результатов, чтобы компенсировать адаптивный CSS. Я просто связал таблицу стилей, потому что мне было лень, и я не мог найти все разделы в файле...
jQuery
$(function(){
var screenWidth = $(window).width();
$("ul.slides li").css("width",screenWidth);
$(window).resize(function() {
var SlideWidth = $("ul.slides li").width();
var screenWidth = $(window).width();
$("ul.slides li").css("width",screenWidth);
});
$('.slider-controls li').click(function(){
var slideToID = $(this).children().attr('rel');
var SlideWidth = $("ul.slides li").width();
var slideTo = (slideToID * SlideWidth) - SlideWidth;
var arrowTo = 85+(240*(slideToID-1));
$('.slider-controls li').removeClass('active');
$(this).addClass('active');
$('ul.slides').animate({"left": -slideTo});
$('div.slider-arrow').animate({"left": arrowTo});
});
});
function slider() {
var SlideWidth = $("ul.slides li").width();
var SlideCount = $("ul.slides li").size();
var TotalWidth = SlideWidth * SlideCount;
var StopPos = TotalWidth - SlideWidth;
var CurPos = $("ul.slides").position().left;
if (CurPos <= -StopPos) {
$("ul.slides").animate({"left": "0"});
}
if (CurPos > -StopPos) {
$("ul.slides").animate({"left": "-="+SlideWidth+"px"});
}
var slideId = (-CurPos + SlideWidth) / SlideWidth;
var fSlideId = slideId + 1;
var arrowTo = 85+(240*(fSlideId-1));
$('.slider-controls li').removeClass('active');
if (fSlideId < 5) {
$('.slider-controls li.slide'+fSlideId+'').addClass('active');
$('div.slider-arrow').animate({"left": arrowTo});
}
if (fSlideId == 5) {
$('.slider-controls li.slide1').addClass('active');
$('div.slider-arrow').animate({"left": 85});
}
};
$(function(){
var SlideWidth = $("ul.slides li").width();
var SlideCount = $("ul.slides li").size();
var TotalWidth = SlideWidth * SlideCount;
var StopPos = TotalWidth - SlideWidth;
var CurPos = $("ul.slides").position().left;
timeout = setInterval('slider()', 6000);
$(window).width();
$("ul.slides").css("width",TotalWidth);
$(".controls.leftarrow").click(function() {
var CurPos = $("ul.slides").position().left;
if (CurPos >= 0){
$("ul.slides").animate({"left": "-"+StopPos})
}
if (CurPos < 0){
$("ul.slides").animate({"left": "+="+SlideWidth+"px"})
}
});
$(".controls.rightarrow").click(function() {
var CurPos = $("ul.slides").position().left;
if (CurPos <= -StopPos) {
$("ul.slides").animate({"left": "0"})
}
if (CurPos > -StopPos) {
$("ul.slides").animate({"left": "-=" + SlideWidth + "px"})
}
});
$(".slider-controls").hover(
function () {
clearInterval(timeout);
},
function () {
timeout = setInterval('slider()', 4000);
}
);
});
HTML