Dual Direction InDemand Slider

[pctechtv]

I modified this code from another project. I want a slider that goes both directions. I did not want to siled all panels at once. Like I see a lot of sliders do. I wanted the content to show in kind of an “in-demand” once requested way. This being one of my first jQuery projects, I figured I would learn, so I tried it out. I seem to get pretty much what I wanted. The place I am stuck with is this. I cannot seem to get out of the IF statement context in the sliderMultipanel function. I need this, so I can determine the direction the animation should flow in, based on the click. I have read a lot and learned some about bubbling and (stopping) propagation, but I don’t know if I am going down the correct path. The IF statement seems to keep on starting the counting over. This makes for unexpected results. So what gets evaluated by the IF is only sometime correct, also it does random weird behavior. However, it is correct if its context is outside of the IF or click function (see lines 66-73). Can some show a way this can be done? To be clear I want to properly determine the number of the nav button click so the slider can go in the requested direction. Thanks

 

https://codepen.io/pctechtv/pen/KrxoOQ

[justsomeguy]

You only use a variable called marqueeVars once, shouldn't that be mySlider?

[pctechtv]

Thanks for pointing that out that was a mistake. I had renamed the the slider div and the object from marquee to slider. I fixed it. I can't seem to get the IF statement at line 135 to do what I need it to. Its context seem to override what I need. I want to understand this for learning sake also... what is this concept called and how is it handled. Thanks

Edited August 3, 2016 by pctechtv

[justsomeguy]

You might be referring to scope, but I don't know what you're trying to do with that if statement. You're checking if panelCompare is 0, -1, or less than currentPanel - 1. I'm not sure what you're looking for there.

[pctechtv]

I want to know if the slider button (nav buttons at bottom) is less than or greater than the current panel. This way I can determine if the animation should go to the right or left. For example if I am on the 4th panel and I click the 2nd button I want it animate from the left, If I clicked the 6th button (while currently on 4th) I want it to animate from right. Thanks

[justsomeguy]

What does panelCompare hold? It's always better to try and use descriptive variable names that identify the data. What problem are you having with the if statement, why isn't it working? What values are in the variables you're testing in the cases that you're trying? You can add console.log statements to print any of that data out to the browser's console.