CODEWITHSUNDEEP
javascriptwordpressslick.js
user7308139
user7308139

Reputation:

Slick Slider goTo WordPress postID

I have a slider that contains all the post thumbnails for a CPT. I'm trying to use it as a navigation tool. As you slide the page automatically loads the post content without refreshing the page. It also updates the URL to reflect the new current post.

The problem I'm running into is that when you navigate to a URL of a specific post, the content loads correctly, but the slick slider loads at the beginning, in other words, the post thumbnail doesn't match up to the post content.

After some research, some help from a friend, and going through this post (https://gist.github.com/galdiolo/4b73c81925f659320b5a) I'm pretty close to but not quite there.

I'm trying to pass the post's id (which I collect via a data attribute - data-id="<?php echo get_the_ID(); ?>) to JS and match it up with slick's index. This is what I have so far:

The slider:

$slider = $('.slider').slick({ centerMode: true, infinite: true, slidesToShow: 3, slidesToScroll: 1, arrows: true, focusOnSelect: true,

And this piece of code my "guru" sent me:

var $slide = $(".slick-slider [data-id=" + postID + "");
var slideIndex = $slide.data("slick-index");
$(".slick-slider").slick("goTo", slideIndex);

The problem is I don't know anything about JS and I don't know how to modify the code and where to insert it in my slider initiation.

Basically what I need is to understand how to associate the WordPress Post ID to its corresponding index in the slider.

Upvotes: 0

Views: 353

Answers (1)

Traveling Tech Guy
Traveling Tech Guy

Reputation: 27849

Not sure what your problem is, but the first of the 3 JavaScript lines should be:

var $slide = $(".slick-slider [data-id='" + postID + "']");

There's a ] missing, and AFAIK values should be surrounded by '' in a data selector.

Upvotes: 0

Related Questions