CODEWITHSUNDEEP
javascriptjquerysliderslideshowcycle2
user933061
user933061

Reputation: 15

How to move element on slide change using jQuery cycle2?

I have a slideshow that’s using jQuery cycle2. I’ve included a jsfiddle with a mockup of how it needs to function in my project: https://jsfiddle.net/b1tfx58o/2/

It has navigational links on the side and it has a red small box on the edge that’s supposed to move to align with the nav link. For example if I click “slide 2” than the red box will slide down and stay there like it does for slide 1. If I click either slide 1 or slide 3 than it will move to be in the middle of the border line for that link. You should also be able to click on the red box to make it go to the next slide. I have that part working but not moving it when I click the links. Any help on this would be much appreciated!

The script so far(checking the JSfiddle will make more sense):

var icon = $('.icon');
var slideshow = $('.cycle-slideshow');

icon.on('click', function(e){
    e.preventDefault();
   slideshow.cycle('next', function(){
   });
});

Upvotes: 0

Views: 135

Answers (1)

Andrew
Andrew

Reputation: 1526

You need to add click listeners to each list link, to run a function that .getBoundingClientRect() of 'this', referring to the link clicked, then use the 'top' value from getBCR to change the top position of your icon element. You'll likely have to combine it with window.scrollY for your project.

See here https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect & good luck

Upvotes: 0

Related Questions