Unable to select slider dots with JS in Webflow Embed

[Stan (justAnotherDeveloper)]

Hi all I have come across one thing I’m not able to solve. I can’t grab slider dots with JS I have tried almost everything but no joy. In the console everything is fine, I have tried even “DOMContentLoaded”, the console doesn’t show any error. So does anyone know how to grab dots?

This simple slide example is on the second page. in the first page is code for one forum member that works in Chrome scripts but it cant work in Webflow because of dots

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[Stan (justAnotherDeveloper)]

really none know the answer to this issue?

[Davidlin_ch12 (David Xin Long Lin)]

Hey Stan

Maybe Webflow is using Jquery for the slider. Can you try to add the code in the page’s before </body> custom code and see if that works?

[Davidlin_ch12 (David Xin Long Lin)]

Or maybe this works?

var Webflow = Webflow || [];
Webflow.push(function() {
  //Your code
});

[Stan (justAnotherDeveloper)]

hi @Davidlin_ch12 thanks for suggestion. I was moving code everywhere to see if I will be able to grab dots, but no joy. JQuery is only sugar on plain JS and browser doesn’t understand JQuery, thats why is JQuery code transpiled on runtime to vanilla JS so browser will understand the code. I will give try to your second suggestion. But to grab a simple div with class that is rendered in DOM should be an easy task without need to take extra action.

[Davidlin_ch12 (David Xin Long Lin)]

@Stan

But to grab a simple div with class that is rendered in DOM

I completely agree, which is why I think it isn’t rendered in DOM but after some form of JS code has been run. If you look in the Designer navigator, Slide Nav is not populated as well which makes me more sure that it isn’t rendered in DOM.

[Stan (justAnotherDeveloper)]

hi @Davidlin_ch12 I’m 100% convinced that is rendered in DOM I have tested code beside chrome snippets also with Tempermonkey and all works as expected. Not in Webflow.

[Davidlin_ch12 (David Xin Long Lin)]

Yes it is rendered in DOM, but just not at initial load. I created a quick test here:

By adding the async function I provided previously, you should be able to get the dots. Consequently, the dots are appended onto the document after load

[Stan (justAnotherDeveloper)]

As I have mentioned I have also tried

document.addEventListener("DOMContentLoaded", () => {})

to make sure that DOM is rendered before code will run. Nothing helps.

[Stan (justAnotherDeveloper)]

oh I see I was thinking about async as well but it looked to me like overkill. Now i know that is the only way.

[Davidlin_ch12 (David Xin Long Lin)]

Using Jquery ready event also works. So I think they are using jquery to append the dots

[Stan (justAnotherDeveloper)]

I’m not familiar with jQuery syntax as I’ve learned and prefer Vanilla JS.

[Stan (justAnotherDeveloper)]

I’m just scratching my head why “DOMContentLoaded” doesn’t work.

[Davidlin_ch12 (David Xin Long Lin)]

I think it is a timing challenge. Jquery gets added as one of the last elements before </body>, which means the dots only get appended after jquery has loaded. The old code was trying to query the div elements before the dots were appended to the document, which in turn gave you zero matches. Hope the code helps

[Stan (justAnotherDeveloper)]

Yeh I have got it, that’s why I used DOMContentLoaded as it is a vanilla JS of jQuery $(document)... and even moved embed on the bottom to make sure that is read as last. It didn’t work even in page before body code section. This should not happened when use vanilla JS. Thanks for your help

[Davidlin_ch12 (David Xin Long Lin)]

Makes sense. Tried to use your vanilla JS syntax after jquery is loaded, but just as you say, it doesn’t work!

Not sure why though?

[Stan (justAnotherDeveloper)]

Yeah it is odd behaviour but is sorted now and I have another experience with webflow I can use before they fix it. Now I can, thank to you, post help with custom code for this specific request. I will give you credit.

[itsazzam (Mohamed Azzam)]

Hey @Stan ,

I hope this is not too late but to be able to select the custom dots you should use jQuery instead. That’s how it works. here’s an example

$(document).ready(function () {
  const slider = $('.work_slider');
  const slides = $('.work-slider_slide');
  const customDots = $('.work_slider-dot');
  const sliderDots = $('.w-slider-dot'); // from Webflow

  slider.on('click', '[data-arrow]', function () {
    sliderDots.each(function (i, slide) {
      if ($(slide).hasClass('w-active')) {
        $('.is--active').removeClass('is--active');
        $(customDots[i]).addClass('is--active');
      }
    });
  });
  console.log(sliderDots);
});

[Stan (justAnotherDeveloper)]

hi @itsazzam appreciate your help but this request is from 2020 when I was learning how to work with WF as I come to WF from standard web developer environment to build everything from scratch (and thankfully returned back to it). I believe I have at the time found solution. Im not familiar with jQuery as I use javascript but I believe that someone will find your solution helpful. Good luck with your WF journey.

[itsazzam (Mohamed Azzam)]

@Stan Actually, I noticed that I just shared my answer to help anyone visit this article. Pleased to get in touch. Have a nice day!