How to Sync 2 Sliders

How To
21

Are you actually using primary and secondary as the id’s of your sliders? If so, it won’t work. You’ll see the sliders still use the bricks assigned id’s regardless of what you set. I guess it might be considered a bug, although I can’t say for sure.

Try running this from the console on the page with the sliders and you’ll see what I mean.

console.log(bricksData.splideInstances);
22

It is working! You can change the ID in Bricks via attributes as you want :wink:
Bildschirmfoto-2022-09-29-um-22.46.52.png

Bildschirmfoto-2022-09-29-um-22.52.28.png

23

I personally don’t suggest to change the data attribute assigned by Bricks, unless we can confirm Bricks’s JS wouldnt use that, but pretty sure your screenshot error causing by that.

Check the instance Id like cmstew suggest.

And change like this

Alternatively, just use another way to retrieve the instance Id like this.

const mainCarouselId = document.getElementById('primary').dataset.scriptId ,
		thumbnailCarouselId = document.getElementById('secondary').dataset.scriptId,
		main = bricksData.splideInstances[mainCarouselId],
		thumbnail = bricksData.splideInstances[thumbnailCarouselId]

@cmstew I think the current way of remaining the bricks’ Id as instance Id is better, can imagine if people assigned same CSS Id for different sliders will cause more problem later :slight_smile:

2 Likes
24

I’ve got to say though that both of you have gotten creative with the problem. I wouldn’t have thought of changing the data attribute or using the id to get the data attribute. lol

2 Likes
25

hahaha
 I also wouldnt change the CSS Id in my sites :laughing:

1 Like
26

I have now reinserted the original ID. Unfortunately, your code didn’t work.

Now with the original ID, the sync works again, but I get an error again when I resize the window.

Uncaught ReferenceError: sliderSyncFunction is not defined

The same error in the console as in the screenshot above.

@cmstew I just tested it because I think it’s stupid to always look for the ID :smiley:
This would also make it easy to copy without having to look for the ID again


<script>
function timeOutFunction() {
  timeout = setTimeout(syncSliders, 1000);
}

function syncSliders() {
  
          const mainCarouselId = 'ibklsz',
      			thumbnailCarouselId = 'wsdisz',
      			main = bricksData.splideInstances[mainCarouselId],
      			thumbnail = bricksData.splideInstances[thumbnailCarouselId]


  // console.log('timeout started')

  if( main && thumbnail) {

   main.sync(thumbnail)

  }

  console.log('timeout ended')
  console.log(main, thumbnail )
  console.log(bricksData.splideInstances);

  clearTimeout(timeout);
}
  
var timer;

window.addEventListener("resize", (function() {
  clearTimeout(timer);
  timer = setTimeout(sliderSyncFunction, 300);
}));

  
document.addEventListener( 'DOMContentLoaded',   timeOutFunction)
</script>
27

I’m gonna let you spot the error.

1 Like
28

syncSliders vs. sliderSyncFunction ?
It should be called the same right?

29

lol yeah, so change sliderSyncFunction to syncSliders and that error will go away.

1 Like
30

yup! Its working perfectly now
 Now I’m learning JS with you guys haha

But I’m still interested in the other way with the Extra ID
 unfortunately that just didn’t work.
The attribute is then called “data-scriptId” right?

const mainCarouselId = document.getElementById('primary').dataset.scriptId ,
		thumbnailCarouselId = document.getElementById('secondary').dataset.scriptId,
		main = bricksData.splideInstances[mainCarouselId],
		thumbnail = bricksData.splideInstances[thumbnailCarouselId]

Bildschirmfoto-2022-09-29-um-23.22.10.png

31

perfect. I’m glad it’s working now.

datasets translate to javascript a little confusingly if you don’t know what’s going on.

essentially if you have an html element with the id of primary and data-script-id=“primary” as the attribute, you can access it with Javascript like this:

// data-script-id is translated to scriptId on the javascript side
var primary = document.getElementById('primary').dataset.scriptId
32

To avoid confusion for myself, I will also inspect frontend and use getAttribute without converting it to dataset.xxxxx in camel case :slight_smile:

// data-script-id 
var primary = document.getElementById('secondary').getAttribute('data-script-id')
2 Likes
33

I really don’t suggest to change any data attribute generated by Bricks :smile:
Because you don’t know they might use it in some other places which suppose to check in other arrays or objects and required the original bricks Id.

1 Like
34

Can’t I just say I take the attribute itchycodeid for example? :rofl:
So if I specify a custom attribute and then define it as primary and secondary and address it like this in the script?

35

to avoid more confusion, maybe don’t put secondary ID into primary variable either. :rofl:

That ones my fault, I know you copied from my post.

36

I think itchycode’s suggestion is your best bet. No need to overcomplicate things especially if you’re already setting the ID.

1 Like
37

It’s not necessary to assign another attribute to use as selector now since you already has CSS ID.

document.getElementId('seconday') is checking which element from your page with CSS ID is secondary

38

I’m sorry for the stupid question, but is that correct?
I have now changed the CSS IDs, deleted the attributes and left them on default. and adjust the script accordingly.

https://labs.tobiashaas.dev/custom-slider/

Thank you both very much @cmstew @itchycode

<script>
    function timeOutFunction() {
      timeout = setTimeout(syncSliders, 1000);
    }

    function syncSliders() {

      var primary = document.getElementById('slider-primary').getAttribute('data-script-id');
    var secondary = document.getElementById('slider-secondary').getAttribute('data-script-id');

              const mainCarouselId = 'primary',
          			thumbnailCarouselId = 'secondary',
          			main = bricksData.splideInstances[mainCarouselId],
          			thumbnail = bricksData.splideInstances[thumbnailCarouselId]

      // console.log('timeout started')

      if( main && thumbnail) {

       main.sync(thumbnail)

      }

      // console.log('timeout ended')
      // console.log(main, thumbnail )
      // console.log(bricksData.splideInstances);

      clearTimeout(timeout);
    }
    
    var timer;

    window.addEventListener("resize", (function() {
      clearTimeout(timer);
      timer = setTimeout(syncSliders, 300);
    }));

    document.addEventListener( 'DOMContentLoaded',   timeOutFunction)
</script>
39

Nope
 try this.

<script>
    function timeOutFunction() {
      timeout = setTimeout(syncSliders, 1000);
    }

    function syncSliders() {

	  const mainCarouselId = document.getElementById('slider-primary').getAttribute('data-script-id'),
			thumbnailCarouselId = document.getElementById('slider-secondary').getAttribute('data-script-id'),
			main = bricksData.splideInstances[mainCarouselId],
			thumbnail = bricksData.splideInstances[thumbnailCarouselId]

      // console.log('timeout started')

      if( main && thumbnail) {

       main.sync(thumbnail)

      }

      // console.log('timeout ended')
      // console.log(main, thumbnail )
      // console.log(bricksData.splideInstances);

      clearTimeout(timeout);
    }
    
    

// In Bricks new version, don't need this anymore
//var timer;
    //window.addEventListener("resize", (function() {
      //clearTimeout(timer);
      //timer = setTimeout(syncSliders, 300);
    //}));

    document.addEventListener( 'DOMContentLoaded',   timeOutFunction)
</script>

Suggest you can search some JavaScript online courses if you are interested on it.

1 Like
40

Yeah it works! I was confused because you guys started with “var”. I didn’t know what to do with it!

You’re right! I would like to learn Javascript for a long time. I hope I can find time for it soon!
Thank you very much! I wish you both a wonderful day.

1 Like