Slick: Go to slide based on data attribute

[chrish-d]

Hey, I asked this over on Stack Overflow but didn't get a reply and hoped I might get a better response here. I know this is generally used for actual _issues_...

Some slides in my slick slider have data attributes such as this: data-artwork="unique-id". What I'm trying to do is when you hover over a menu item it will slickGoTo a slide based on the data-attribute.

The menu items have matching data-attributes like this:

<ul class="project-feed">
    <li data-artwork="unique-id">
        <a href="#">Example</a>
    </li>
</ul>

and I'm using Javascript to add those data-attributes to a variable, like so:

$('.project-feed li').hover(function() {
    var artworkId = $(this).data('artwork'); // 'unique-id'
});

My question is how can I then use slick slider to go to the relative slide? Ex: If I hover over a menu item with data-artwork="test" then it will go to the slide with the same data-artwork value.

For extra credit: How can I then resume the slider from where it left off?

Thanks

[nominalaeon]

It's completely doable using Slick events and methods, but most people charge for dev work, man. It's not a bug and there's not a question that isn't answered in the docs.

But your examples above are on the right track. Just take it farther. By the time your hover catches the event.currentTarget's data attribute, you should have have a list of all available data attributes and the indexes of the slides they relate to.

[simeydotme]

you'll need to find the artwork-id like:

var $slide = $(".slick-slider [data-artwork=" + artworkId + ");

then get it's actual index:

var slideIndex = $slide.data("slick-index");

then use slickGoTo:

$(".slick-slider").slick("goTo", slideIndex);

in total, something like:

var $slider = $(".slick-slider").slick({ ... });
var resumeIndex;

$(".project-feed li").on("mouseover", function() {

   resumeIndex = $slider.slick("getSlick").currentSlide;
   var artworkId = $(this).data("artwork");
   var artIndex = $slider.find("[data-artwork="+artworkId+"]").data("slick-index");
   $slider.slick("pause").slick("goto", artIndex);

}).on("mouseout", function() {

  $slider.slick("goto", resumeIndex).slick("play");

});

I just hand-typed all that in to Github, so you'll undoubtedly have to fix something, but the logic is all legit :moneybag:

Good luck.
While I kind of agree with @nominalaeon in his principle, I also know that all my skill and knowledge in webdevelopment has come from open-source sharing and people giving me free help when I needed it... so I am willing to return the favour. I also note you're not just asking for someone to do your work, you've spent some time to try yourself, so that is admirable :smile: -- share back what you are shared.

I would ask that you answer your own question on Stackoverflow properly when you have figured it out, so that in future people can find your answer and fix their own problems, too :)

Si. x

[simeydotme]

oh, PS:
"for extra credit" does sound a bit douchey, like you're setting us homework, or we are working for you... Helping others is it's own reward, no need to say such things... you'll get even more negative response (which could be why nobody answer on stackoverflow) :penguin:

[nominalaeon]

Right, I'm going for encouraging, not trying to be a dick, but this is a great challenge to learn not just Slick but jQuery. I don't think @chrishiam is stuck just yet and he's definitely on the right track.

[chrish-d]

@nominalaeon — thanks for the encouragement.

@simeydotme — your solution worked (had to fix one or two things as you expected). It's extremely unpredictable though. For example if you hover through the menu items the script becomes confused. Here's what I have, but with it behaving the way it does I don't think I'll be using it:

var resumeIndex;
$('.project-feed li').hover(function() {
    resumeIndex = $slider.slick("getSlick").currentSlide;
    var artworkId = $(this).data('artwork');
    var artIndex = $slider.find('[data-artwork="' + artworkId + '"]').data('slick-index');
    $slider.slick('slickPause').slick('slickGoTo', artIndex);
    console.log(resumeIndex);
}, function() {
    $slider.slick('slickGoTo', 0).slick('slickPlay');
}); 

Edit:

Adding in a delay to the hover (in) function helped smooth out the confusion. I also added in a random slide feature:

var randomSlide;
var timeout;

$('.project-feed li').hover(function() {
    var artworkId = $(this).data('artwork');
    var artIndex = $slider.find('[data-artwork="' + artworkId + '"]').data('slick-index');
    var totalSlides = $('.slick-slide:not(.slick-cloned)').length;
    randomSlide = Math.floor((Math.random() * totalSlides) + 1);

    timeout = setTimeout(function() {
        $slider.slick('slickPause').slick('slickGoTo', artIndex);
    }, 500);

}, function() {
    clearTimeout(timeout);
    $slider.slick('slickGoTo', randomSlide).slick('slickPlay');
});

PS — Apologies if I came across as "douchey", I guess my phrasing could of been better so I'm sorry that I upset you.

[simeydotme]

Hah! takes a bit more to upset me :stuck_out_tongue_winking_eye: -- I was just pointing out that we're doing you a favour so giving us "extra credit" kinda sounds bad :wink:

Anyway, to the task at hand:

I'd love to see your implementation (or even better; a JSFiddle) with the code you have to see what actually you're trying to do (right now I have your words turned in to an image in my mind, but probably it's wrong, haha.) and see if I can figure out how a script can become confused! :smile: -- failing that, I would suggest swapping around the timer/clear so it clears in the mouseover and has a 100ms timer in the mouseout ... this is because you would want the slider to respond to the user's input (ie: hovering over a slide) more than their lack of input (ie: leaving) ... gah, does that make sense?

best,
Si