无法在jQuery滑块中实现“跳转到幻灯片”

Question

I've been trying this for the past 2 days and can't seem to figure out a solution..

I have the prev and next arrows working for navigation (along with arrow keys). But now that I have a timeline, I can't seem to 'jump to' slides using a div-id (correctly)?

So for example, if I wanted to go from section 1 to section 5, I want to be able to click on my section 5 button and it jumps to that slide.

Here is my working example . The slider's timeline appears on slide 2+. For the example, I am only working within the target section.

This is the code I am using to "jump to a slide":

$('.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;
});

But for some reason, I get 2 specific problems:

Problem 1: I click to go to a slide, then use arrow keys to go back ~ this causes me to jump back 2 slides.

---

Problem 2: I click to go to a slide, then use arrow keys to go forward ~ this breaks my slider and shows a white screen

I believe the majority of the probelem lies within this line of code:

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

But I am not 100% sure and need your help, I have prepared a very basic fiddle example here .

---

Some things I've tried was messing with the split() variables, swapping out nextElement(); and previousElement(); and I just can not find a solution that works.

All help is very appreciated!

Links to certain files

Pastebin to full JS

Pastebin to full CSS

Answer 1

Check out that fiddle:

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

Problems were in 3 places:

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

(they were strings, not ints).

And

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

(you count links starting with 1)

Hope it works as you need.

Answer 2

Here you go -> fiddle

What I've basicly changed is your current value, which you are defining in your click function. Actually, your id value is a string, so firing nextElement() won't change the value, instead it will concatenate it. This results in some weird behaviour, so instead of changing from target 0 to 1 , you just change from 0 to 01 .

Also I've adjusted your $('.slideshow-timeline a').click(function() { } to behave the same way as your nextElement() function does.

Edit: I forgot to mention

I believe the majority of the probelem lies within this line of code:

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

You've been right with this. As mentioned above, target_id.split('-')[1] will return you a string value, not a number and this again, as mentioned above, leads to the weird behaivour where your code just concatenates your returned string with a number. To achieve the goal you want, you have to parse target_id.split('-')[1] 's value into a number value by using JavaScripts built-in parseInt() function.

The result is the following:

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

Answer 3

Hi Can you please check the below link..

Is this what you are looking for right?

Please refer this link [jsFiddle][1]

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

Script code as below,

$(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);
});

Answer 4

You were right... the problem was in this line:

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

try this:

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

UPDATE

• On further investigation, I discovered a few things on your fiddle (12-Feb-16): the 'li's for 'Connect', 'Convert' and 'Optimize' are outside of the 'ul' above - I'm guessing that's where they should be.
• The ids for the 'li's mentioned above don't follow your naming convention ("target-1", "target-2", etc). That will sure cause the strategy employed here to fail.
• There should be matching 'div' elements for each 'li'... in your fiddle , elements for the aforementioned 'li's are missing.

Cleared up some of the issues with this fiddle .