Create a Dynamic Slider controlled by Thumbnail Carousel (or anything else really) /Basic Tutorial

I will use as a starter example the repeater block but this could be done with the other ways the Dynamic Slider is available.

CONCEPT
As explained in the splide documentation

The Thumbnail Carousel is simply a slider controlling another one and it is really simple to achieve with Cwicly which makes available all the parameters needed, which allows many more variations one could start imagining…

So basically we would have a first Slider, the main one, and another one, the thumbnail navigation one.

FIRST SLIDER (MAIN)
For this example we are going to need an ACF Repeater Field with just an Image Field, so first create one and assign it to the CP you would like it to appear in and feed it a few images.

In your page or template
Insert a Repeater Block and set the source to the ACF Repeater Field you just created.

Then, add an Image Block and set the Source to Dynamic,
for Data choose Repeater and
for Field choose the field name of the Image Field you set earlier in the Repeater Field.

Select the Repeater Block
in the Layout tab click on the Slider button to activate the Slider mode.
Below you should see the Slider ID, select if and copy it.

SECOND SLIDER (THUMBNAIL NAVIGATION CONTROLLER)
Below the first Repeater Block, Insert a new Repeater Block and set the source to the same ACF Repeater Field you created before.

Then, add an Image Block and set the Source to Dynamic,
for Data choose Repeater and
for Field choose the field name of the Image Field you set earlier in the Repeater Field.

Select the second Repeater Block
In the Layout tab click on the Slider button to activate the Slider mode, at the bottom of this tab (Repeater/Settings/General) click on the button Set as Navigation and paste above it the ID of the previous slider that should be in your clipboard.

Then in the Layout Tab (Repeater/Settings/Layout) set a Fixed Width of 100%.

At this point if you save and check the page/template you created you should have 2 sliders and by sliding through the second one, the first one should slide simultaneously.

You can now play with the styling of the image and the various parameters of the sliders to adapt them to your needs.

Using the same principles you can imagine all kinds of navigation from using words, logos and more, and this can also be used with the Query Template block to achieve creative posts navigations.

5 Likes

I just discovered that @Araminta already did a similar tutorial as a video
you can see it here:

These 2 were made just a few hours appart :wink:

1 Like