Limitations with Nestable Slider

Feature Requests / Improvements
1

Is there a way to access the nestable slider initialization code?

For now it’s really limiting in terms of how one can implement extra splideJS feature like thumbnail carousel etc. It works with the required code added to custom code section of the page, but certain things like the pagination dots are duplicated, probably due to the fact that the slider mount function is initializing twice. It appears the whole instance of the sliders are duplicated

image

Oxygen, for example, exposes the code for it’s dynamic slider, thus it’s easy to extend the functions. The custom options in the nestable slider only provides ability to add extra JSON settings, not extend features by adding extra JS.

See image below, the dots are supposed to be three, instead of six.

image
image1225×543 76.7 KB

6 Likes
2

Hi friend, this isn’t the correct way to access the instance of initialized splides.

Your code will create more splide instances and it causing your duplicated pagination. And only the new pagination doing the “sync”

You should just do like this.

 bricksData.splideInstances[mainCarouselId].sync( bricksData.splideInstances[thumbnailCarouselId] )
 //mainCarouselId and thumbnailCarouselId get from bricks element Id

And above code should perform after DOMContentLoaded + after Bricks initialized them (add some setTimeout because no event hook available in Bricks JS code).

I did posted tutorial example in here but it was SwiperJS (Old carousel element). However, the way to update the instance options (JS part) in NestableSlider (SplideJS) are the same.

3

Thanks for the code, one question: is the only way to pass the sliders via IDs? Can classes or data attributes be used? I’m asking because the code input in Bricks would usually convert ‘#element-id’ to ‘root’, in some cases causing it not to work.

4

I’ve gone ahead to use the code, but for some reason the sliders aren’t syncing. Here’s my code

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


function syncSliders() {

      const mainCarouselId = 'main-slider',
  			thumbnailCarouselId = 'thumbnail-slider',
  			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 )

  clearTimeout(timeout);
}

document.addEventListener( 'DOMContentLoaded',   timeOutFunction)

when I console log the main and thumbnail, it says undefined for both
image

5

The code is good. suggest you directly use dev tool console tab enter
bricksData.splideInstances first. Then you should see Array. Expand them and check the Ids
image

If you assigned your own CSS ID, you gonna use this way to check the initialized splide Instances

7

Here’s what it is, do I need to take any further actions?

image
image396×529 19.9 KB

8

OK, then you should amend your Ids in code.

 const mainCarouselId = 'bbzcrk',
  			thumbnailCarouselId = 'gjabnd',
  			main = bricksData.splideInstances[mainCarouselId],
  			thumbnail = bricksData.splideInstances[thumbnailCarouselId]

Assuming the #main-slider is bbzcrk from your screenshot

9

Yep already figured it. Thanks so much for the assist! It’s working now.
I’m wondering why the added CSS ID doesn’t work. I would be nice if it worked though.

1 Like
10

so we have to solve most things with own code and own fixes?

"Do I Need To Know Code?

No. You can visually design your entire site without any coding knowledge. But if you know how to code, you can do even more. Such as creating your own elements, etc."

1 Like
11

Don’t think this is a “fix”.
Cracka just wanted to create a more advanced slider which is not included in the current Nestable Slider element. And here I came to help with my limited knowledge :slight_smile:

3 Likes
12 
"Build without needing to code" != "Can do everything you can possibly imagine"
2 Likes
13

@itchycode if I may ask, where did you get the information you provided for this solution? Is the any docs provided by Bricks?

I mean this

bricksData.splideInstances[mainCarouselId].sync( bricksData.splideInstances[thumbnailCarouselId] )
14

I don’t think there’s any docs for this but one of the team members, timmse, made mention of it awhile ago in a response.

1 Like
15

Yup, as mentioned by @cmstew currently no documentation on Bricks Javascript.
As a coding lovers, I enjoy exploring the source code of the tools I use.
And so I can share some of my found which might not exists in official docs. :laughing:

5 Likes
16

Nice! this has been very helpful!

17

Hi Cracka, have you uploaded a tutorial about this implementation ? I’m having a hard time getting this to work…

2 Likes