Go to slide based on data attribute

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

[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) 🐧

[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 💰

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 😄 – 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