Не удалось реализовать "прыжок в слайд" в слайдере jQuery

Я пробовал это в течение последних двух дней и, похоже, не могу понять решение.

У меня есть предыдущая и следующая стрелки, работающие для навигации (вместе со стрелками). Но теперь, когда у меня есть временная шкала, я не могу "перейти на" слайды, используя div-id (правильно)?

Так, например, если бы я хотел перейти от раздела 1 к разделу 5, я хочу, чтобы иметь возможность щелкнуть по моей кнопке 5 раздела, и она переходит на этот слайд.

Вот мой рабочий пример. Временная шкала слайдера отображается на слайде 2+. Например, я работаю только в целевом разделе.

Это код, который я использую для перехода к слайду:

$('.slideshow-timeline a').click(function() {
    var target_id = $(this).attr('href');
    removeClasses();
    $($(".tour-panel")[current]).addClass("fadeOutRight");
    setTimeout(function() {
        $(target_id).addClass("active-tour fadeInLeft");
    }, 50);
    setTimeout(function() {
        $($(".tour-panel")[current]).removeClass("fadeOutRight");
    }, 750);
    current = target_id.split('-')[1] || 0;
});

Но по какой-то причине у меня возникают две специфические проблемы:

Проблема 1: я нажимаю, чтобы перейти к слайду, а затем используйте клавиши со стрелками, чтобы вернуться назад. Это заставляет меня отсканировать 2 слайда.


Проблема 2: я нажимаю, чтобы перейти к слайду, а затем используйте клавиши со стрелками, чтобы идти вперед. Это нарушает мой слайдер и показывает белый экран

Я считаю, что большинство зонда лежит внутри этой строки кода:

current = target_id.split('-')[1] || 0;

Но я не уверен на 100% и нуждаюсь в вашей помощи, я подготовил очень простой пример скрипта здесь.


Некоторые вещи, которые я пробовал, возились с переменными split(), заменяя nextElement(); и previousElement();, и я просто не могу найти решение, которое работает.

Вся помощь очень ценится!

Ссылки на определенные файлы

Pastebin для полного JS

Pastebin для полного CSS

Ответ 1

Посмотрите, что скрипта:

https://jsfiddle.net/gjyswrr9/19/

Проблемы были в трех местах:

var previous = parseInt(current, 10) - 1;
var next = parseInt(current) + 1;

(они были строками, а не ints).

И

current = target_id.split('-')[1] - 1 || 0;

(вы считаете ссылки, начинающиеся с 1)

Надеюсь, что он работает так, как вам нужно.

Ответ 2

Здесь вы идете → fiddle

В основном я изменил ваше значение current, которое вы определяете в своей функции щелчка. Фактически, ваше значение id представляет собой строку, поэтому стрельба nextElement() не изменит значение, вместо этого оно будет конкатенацией. Это приводит к некоторому странному поведению, поэтому вместо изменения от целевого 0 до 1 вы просто изменяетесь от 0 до 01.

Также я скорректировал ваш $('.slideshow-timeline a').click(function() { }, чтобы вести себя так же, как и ваша функция nextElement().

Изменить: Я забыл упомянуть

Я считаю, что большинство зонда лежит внутри этой строки кода:

current = target_id.split('-')[1] || 0;

Ты был прав. Как упоминалось выше, target_id.split('-')[1] вернет вам строковое значение, а не число, и это снова, как упоминалось выше, приводит к странному поведению, когда ваш код просто объединяет возвращаемую строку с номером. Чтобы достичь желаемой цели, вам необходимо проанализировать значение target_id.split('-')[1] в значение number с помощью встроенной функции parseInt() JavaScripts.

В результате получается следующее:

current = parseInt(target_id.split('-')[1]) || 0;

Ответ 3

Привет. Вы можете проверить ссылку ниже.

Это то, что вы ищете правильно?

Пожалуйста, перейдите по этой ссылке   [JsFiddle] [1]

[1]: https://jsfiddle.net/gjyswrr9/39/

Script, как показано ниже,

$(document).ready(function() {

var current = 0;

function previousIndex() {
var previous = parseInt(current,10) - 1;
if(previous == 0) {
    previous = $(".tour-panel").size();
}
return previous;
}

function nextIndex() {
var next = parseInt(current,10) + 1;
if(next == $(".tour-panel").size()+1) {
next = 1;
}
return next;
}

function removeClasses() {
$(".tour-panel").each(function(index) {
if(index != current) {
  $(this).removeClass("active-tour fadeInRight fadeInLeft fadeOutRight fadeOutLeft");
}
})
}

function nextElement() {
removeClasses(); 
current = nextIndex();
setTimeout(function() {
$("#target-"+current).addClass("active-tour fadeInRight");
 }, 50);
 }

function previousElement() {
removeClasses();
current = previousIndex();
setTimeout(function() {
$("#target-"+current).addClass("active-tour fadeInLeft");  
}, 50);
setTimeout(function() {
$($(".tour-panel")[nextIndex()]).removeClass("active-tour fadeOutRight");
}, 750);
}


$('.slideshow-timeline a').click(function() {
  var target_id = $(this).attr('href');
removeClasses();
$($(".tour-panel")[current]).addClass("fadeOutRight");
setTimeout(function() {
    $(target_id).addClass("active-tour fadeInLeft");
}, 50);
setTimeout(function() {
    $($(".tour-panel")[current]).removeClass("fadeOutRight");
}, 750);
current = target_id.split('-')[1] || 0;
});


Mousetrap.bind('left', previousElement);
Mousetrap.bind('right', nextElement);

$(".previous").click(previousElement);
$(".next").click(nextElement);
});

Ответ 4

Вы были правы... проблема была в этой строке:

current = target_id.split('-')[1] || 0;

попробуйте следующее:

current = (target_id.split('-')[1] - 1) || 0; // cater for zero-index

UPDATE

  • В ходе дальнейшего расследования я обнаружил несколько вещей на вашем fiddle (12 февраля-16): "li для" Connect "," Convert "и" Optimize "находятся за пределами" ul "выше - я предполагаю, что там, где они должны быть.
  • Иды для упомянутого выше слова не соответствуют вашему соглашению об именах ( "target-1", "target-2" и т.д.). Это наверняка приведет к тому, что стратегия, используемая здесь, потерпит неудачу.
  • Должны быть соответствующие элементы div для каждого "li"... в вашем fiddle, элементы для вышеупомянутого 'li отсутствуют.

Устранены некоторые проблемы с этим fiddle.