Slick Slider Thumbs Not Showing In Wordpress Theme

I'm making a custom WordPress theme with pinegrow editor and I'm using slick slider for my slides (not the WordPress plugin!). Here is the code of one item of my slider with custom

Solution 1:

Not sure i'm following your correctly. I'll update if I am off track.

Maybe try using get_bloginfo('template_url') function instead?

data-thumb="<?=get_bloginfo('template_url)?>/images/realmix/products/fresh-energy.png"

This will go to the immediate child images folder in your current theme folder.

---

In relation to your comment on questions/64405779 linking to this question, for that script to work with your php, would be as follows...

<divclass="slider"><divclass="item"data-thumb="<?=get_bloginfo('template_url')?>/images/realmix/products/fresh-energy.png"><divclass="row productz"><divclass="col-md-7 col-lg-7 doesle col-sm-5 col-xs-12"><imgsrc="<?=get_bloginfo('template_url')?>/images/realmix/products/energy-panel.png"alt="" /></div></div></div><!-- next slides here --></div>

And the script would be...

// my slick slider optionsconst options = {
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  autoplay: true
};

// my slick slider as const objectconst mySlider = $('.slider').on('init', function(slick) {

  // set this slider as const for use in set time outconst slider = this;
    
  // slight delay so init completes rendersetTimeout(function() {

    // dot buttonslet dots = $('.slick-dots > LI > BUTTON', slider);

    // each dot button function
    $.each(dots, function(i,e) {

      // slide idlet slide_id = $(this).attr('aria-controls');
      
      // custom dot imagelet dot_img = $('#'+slide_id).data('thumb');
      
      $(this).html('<img src="' + dot_img + '" alt="" />');

    });

  }, 100);


}).slick(options);

and the css would be the same from questions/64405779