Slider components are used for adding sliders (carousels) to a layout. There are three Slider components included with the UIKit.
Key information about these components:
The slider container must be used with the Slide item component. The Slider container provides the navigation, pagination and track for the Slide items.
Slider container - The slider container provides the track for the Slide items. To offer flexibility for the slider's appearance and functionality, several options within the Slider container element are exposed to the component form. To view these, open the settings for the Slider container element. The options exposed include the space between the slides, the number of slides to show and the number of slides to scroll.
In addition, the component provides options for the placement of the sliders pagination dots and the style of the navigation buttons. This is achieved using classes that, when applied to the slider, modify these elements. To make changes to these 'Modifier' styles, open the Styles tab on the Slider container and then open the Style tree. Within this, you will see the different modifiers that can be applied to the Slider container.
The slider navigation relies on the custom styles Slider navigation left and Slider navigation right. The modifiers (shown below) extend these styles. You mustn't remove the two custom styles above.
The Slide item must be placed within the Slider container component when used.
Slide item - The slide item provides the container for the content of each slide. The Slide item will likely be used to contain Card components. To ensure the Cards all display with an equal height, the Slide item uses display:flex and flex-direction:column. This makes the Slide item behave in the same way as the Column layout components.
If you open the Styles tab of the Slide item, you will notice that the display:flex property has been added to the Custom CSS field. This is so that !important can be applied to the property to override the display:block property included with Slider plugin CSS.
The Gallery slider provides a slider of images with image thumbnails as navigation.
The Gallery slider includes two Sliders. The Main slider, used for the main image and the Thumbnail slider, used for the thumbnail navigation. The two Sliders are linked together using the Use as navigation feature available within the Slider container. This works by linking each Slider together with IDs. Both Slider containers are set as the navigation for the other. This allows the two sliders to sync with each other when used. To understand more:
Within each Slider container, there's a Pattern repeater and nested within this a Slide item and finally an Image element. The Pattern repeater is used to allow multiple Slides to be added using the Field repeater element within the component form.
The image element within both the Main slider and the Thumbnail slider is populated using the image field in the component form. This is so content authors only need to upload one image and it will be used for both the main image and the thumbnail image.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Wed Mar 26 2025 01:06:27 GMT+0000 (Coordinated Universal Time)