Слайдер с jQuery
Вы можете помочь мне настроить мой код, чтобы сделать бесконечный слайдер? Я попробовал сам, но когда я изменил условия, у меня возникла проблема с правильной работой ... просто хочу, чтобы он шел с последнего слайда на первый, когда достигнут предел слайдов ... это мой код в JS
var nextBtn = $('.next_btn');
var prevBtn = $('.prev_btn');
var allSlides = $('.slide');
var indexSlide = 0;
$(allSlides[indexSlide]).addClass('visible');
nextBtn.on('click', function(){
if (indexSlide >= allSlides.length - 1) {
indexSlide = allSlides.length - 1;
} else {
$(allSlides[indexSlide]).removeClass('visible');
indexSlide++;
$(allSlides[indexSlide]).addClass('visible');
}
})
prevBtn.on('click', function(){
if (indexSlide <=0) {
indexSlide = 0;
} else {
$(allSlides[indexSlide]).removeClass('visible');
indexSlide--;
$(allSlides[indexSlide]).addClass('visible');
}
})
вы можете установить indexSlide = indexSlide % allSlides.length, когда пользователь нажимает кнопку «следующий / предыдущий», чтобы indexSlide «обернулся»
не уверен, как это сделать, Ник, так как я где-то нашел такую подсказку, но мне не удалось реализовать свой код ... Я чувствую, что у меня проблема с добавлением и удалением классов, поэтому возникают некоторые странные вещи, когда я помещаю indexSlide = 0 в условие nextBtn и та же история с prevBtn .. Marianos, мне сложно поставить codeen или jsfiddle, так как я пытаюсь помочь своему другу удаленно, и он дал мне только код JS, и он просто сказал мне, что он тоже не работает ..
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
- скрыть слайд,
- индекс увеличения / уменьшения
- проверьте, находится ли он в диапазоне (в противном случае установите правильное значение)
- показать новый слайд
var nextBtn = $('.next_btn');
var prevBtn = $('.prev_btn');
var allSlides = $('.slide');
var indexSlide = 0;
var lastIndex = allSlides.length - 1;
$(allSlides[indexSlide]).addClass('visible');
nextBtn.on('click', function() {
$(allSlides[indexSlide]).removeClass('visible');
indexSlide++;
if (indexSlide > lastIndex) {
indexSlide = 0;
}
$(allSlides[indexSlide]).addClass('visible');
})
prevBtn.on('click', function() {
$(allSlides[indexSlide]).removeClass('visible');
indexSlide--;
if (indexSlide < 0) {
indexSlide = lastIndex;
}
$(allSlides[indexSlide]).addClass('visible');
}).slide {
display: none;
}
.slide.visible {
display: block;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class = "prev_btn">Prev</button>
<button class = "next_btn">Next</button>
<div class = "slide">1</div>
<div class = "slide">2</div>
<div class = "slide">3</div>Спасибо большое! Похоже, я чертовски глуп ... Я добавил также после того, как исчезнет еще один мой первый div ... Эхх, мне нужно уделять больше внимания и, к сожалению, после 3 месяцев кодирования я все еще делаю глупые ошибки ... нужно сосредоточиться больше ... спасибо для быстрого ответа) вы ребята звери :)
Пожалуйста. Не волнуйтесь, бывает :)
Лучше разместите свой код в Интернете вместе с html. например jsfiddle.net. Это облегчает людям изучение / отладку.