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);
It is working! You can change the ID in Bricks via attributes as you want 
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 
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
hahaha… I also wouldnt change the CSS Id in my sites 
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 
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>
I’m gonna let you spot the error.
syncSliders vs. sliderSyncFunction ?
It should be called the same right?
lol yeah, so change sliderSyncFunction to syncSliders and that error will go away.
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]
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
To avoid confusion for myself, I will also inspect frontend and use getAttribute without converting it to dataset.xxxxx in camel case
// data-script-id
var primary = document.getElementById('secondary').getAttribute('data-script-id')
I really don’t suggest to change any data attribute generated by Bricks 
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.
Can’t I just say I take the attribute itchycodeid for example? 
So if I specify a custom attribute and then define it as primary and secondary and address it like this in the script?
to avoid more confusion, maybe don’t put secondary ID into primary variable either.
That ones my fault, I know you copied from my post.
I think itchycode’s suggestion is your best bet. No need to overcomplicate things especially if you’re already setting the ID.
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
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>
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.
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.