Jquery Slider, перемещение от первого изображения к последнему - Можна получить ответ ? По данному вопросу [дубликат]

200
12 декабря 2016, 10:03

На данный вопрос уже ответили:

  • Jquery Slider, перемещение от первого изображения к последнему 2 ответа

Здравствуйте, не получается перейти с первой картинки на последнюю. Проблема не в slideRight() а в slideLeft() . с первой картинки перейти на последнюю .

$(function () {

var width = 920; var animationSpeed = 1000; var pause = 3000; var currentSlide = 1; var currentminSlide = -1;

var $slider = $("#slider"); var $sliderContainer = $slider.find(".slides"); var $slides = $sliderContainer.find(".image"); var $butright = $("#next"); var $butleft = $("#prev");

var interval;

function startSlider() { interval = setInterval(function () { $sliderContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () { currentSlide++; if (currentSlide == $slides.length) { currentSlide = 1; $sliderContainer.css('margin-left', 0); } }); }, pause); } function stopSlider() { clearInterval(interval); }

//mouse hower $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider); startSlider();

function slideRight() {
$sliderContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function () { currentSlide++; if (currentSlide == $slides.length) { currentSlide = 1; $sliderContainer.css('margin-left', 0); } }); }

function slideLeft() {
  $sliderContainer.animate({ 'margin-left': '+=' + width }, animationSpeed, function () {
    currentSlide--;
    if (currentSlide == $slides.length) {
      currentSlide = -1;                       
    }                   
  });             
}
//next slide
$($butright).click(function () {
  stopSlider();
  slideRight();
  startSlider();
});
//previous slide
$($butleft).click(function () {
  stopSlider();
  slideLeft();
  startSlider();
});    

});

body, html { margin: 0; padding: 0; }

slider {

width: 920px; height: 500px; margin: auto; overflow: hidden; background: #4b6f8a; }

slider .slides {

display: block; width: 7700px; height: 700px; margin: 0; padding: 0; }

slider .image {

float: left; list-style-type: none; width: 920px; height: 500px; }

img { width: 100%; }

<button id="prev">prev</button>
<button id="next">next</button>
Answer 1

Как работает Ваш код (кратко): срабатывает анимация, после этого сразу идет условие "а текущий элемент последний?", если да - то перемотай к первому. Получается что при переходе на последний слайд анимация срабатывает, после чего сразу идет переход на первый слайд, чтобы этого не было, нужно сначала вычислить новый индекс и проверить какой слайд. Исправленный вариант.

READ ALSO
Jquery Событие over для элементов

Jquery Событие over для элементов

Суть вопроса такова - можно ли как-то сделать событие чтобы когда один элемент находится над другим срабатывало событие?

201
Добавить элемент на страницу

Добавить элемент на страницу

Сообщение он получает, alert выполняет (вставил для отладки), но вот новые сообщения на страницу не выводит

238
jquery коллаж как в vk, есть ли где-то такой плагин?

jquery коллаж как в vk, есть ли где-то такой плагин?

Штука следующая, есть очень много различных плагинов мозаек, коллажей для реализации вот такой штуки:

417
проблема с размером документа в meteor js

проблема с размером документа в meteor js

Для своего небольшого приложения на meteorjs я хочу сделать бесконечную прокрутку

178