The Slider element lets you create interactive slideshows to showcase all kinds of content, including text, images, videos, buttons, and more.

Add a Slider

There are two ways to add a Slider element to your page:

From Interactive Elements

Kirki offers a few different premade Slider options, which you’ll find under Elements → Interactive in the Insert panel.

1. Open the Insert panel from the Left Sidebar.

2. Select Interactive from the Elements section.

3. Browse the premade Sliders in Light and Dark variants.

4. Click or drag your preferred design onto the canvas.

From Base Elements

Alternatively, if you want just the core Slider element without the structure or styling:

1. Open the Insert panel from the Left Sidebar.

2. Select Base Elements from the Elements section.

3. Scroll down to the Advanced section and click or drag the Slider element onto the canvas.

📝 Note: If you don’t see Base Elements, click on the Kirki logo at the top-left to access the main menu, go to View, and enable Show Base Elements.

Slider Structure

Once placed, the Slider element is made up of the following child elements visible in the Layers panel:

• Slider Mask – The container that holds all the slider items and controls what’s visible at any given time.

• Slider Item – Each slide. Inside each Slider Item is an inner wrapper, which is where you add and arrange your slide content freely.

• Arrow Left / Arrow Right – The navigation arrows that let users move between slides.

• Slider Nav – The indicators that show how many slides exist and which one is currently active.

Manage Slider Items

Add Slider Items

1. Select the Slider on the canvas.

2. Go to the Slider settings in the Design tab on the Right Panel.

3. Click Add Item under the Content section.

Remove Slider Items

1. Select the Slider on the canvas.

2. Go to the Slider settings in the Design tab on the Right Panel.

3. Click the minus ( – ) icon next to the slide you want to remove.

Reorder Slider Items

1. Select the Slider on the canvas.

2. Go to the Slider settings in the Design tab on the Right Panel.

3. Drag the handle next to any slide to reorder it.

Rename Slider Items

1. Select the Slider on the canvas.

2. Go to the Slider settings in the Design tab on the Right Panel.

3. Double-click the Slider Item in the Content list to rename it.

Add Content to a Sliders

1. Select the Slider element on the canvas, then go to the Design tab in the Right Panel.

2. Under the Slider section, select the Slider Item you want to add content to.

3. Add elements from the Element Island or the Insert Panel to the Inner Wrapper of your Slider Item on the canvas.

4. Repeat for each Slide.

You can drag and drop all kinds of elements directly into a slide and design it freely, just like any other section in Kirki. Build with text, images, buttons, and more.

Customize Slider Indicators

Indicators show how many slides are present and highlight the currently active one. To customize it:

1. Select the Slider on the canvas.

2. From the Design tab on the Right Panel, click Indicators.

3. Choose from several indicator styles or select None to remove them entirely.

4. Set the Position of the indicators using the position dropdown.

Customize Slider Arrows

Navigation arrows let users manually move between slides.

1. Select the Slider on the canvas.

2. From the Design tab on the Right Panel, click Arrows.

3. Choose from several arrow styles or select None to remove them.

4. Enable Hide at Each End to hide the left arrow on the first slide and the right arrow on the last slide.

Configure Slider Animation

1. Select the Slider on the canvas.

2. From the Design tab on the Right Panel, click the Lightning icon to access Slider Animation options:
   • Behavior – Set the slide transition style. Options include Slide and Fade.
   • Curve – Define the easing of the transition. Choose from the preset options or click the graph icon to customize it from the Custom Timing Editor.
   • Duration – Set the transition duration in milliseconds.
   • Dragging – Enable to allow users to drag through slides.
   • Slides Infinite Loop – Enable to loop slides continuously.
   • Autoplay on Loading – Enable to start playing slides automatically when the page loads.

Learn more about Interaction.

Dynamic Sliders

You can connect your Slider to a collection to populate slides dynamically with content from your site:

1. Select the Slider on the canvas.

2. From the Design tab on the Right Panel, click the Database icon at the top of the Slider section to open the Dynamic Content panel.

3. Set the Source and Type to define where the content comes from. For example, to fetch a dynamic collection and its fields, set Source to Posts and Type to the Collection you want to connect to.

4. Optionally add Filters and Sorting to control which items appear and in what order.

5. Finally, set the Limit to cap the number of slides and define the Starting index.

Learn more about Dynamic Content.

Turn Your Slider Into a Carousel

By default, a Kirki Slider shows one slide at a time. To display multiple slides side-by-side like a Carousel:

1. From the Layers panel, select a Slider Item inside your Slider.

2. Go to the Design tab on the Right Panel 

3. Under Sizing, adjust the Width:
   • 50% to show 2 slides at once.
   • 33.33% to show 3 slides at once.
   • 25% to show 4 slides at once.
   • And so on, depending on how many items you want visible at once.

4. Repeat the same for all other Slider Items.

Once configured, your slider will act like a carousel, showing multiple items side by side.

Styling Your Slider

You can further style your Slider using the options on the right panel. Learn More about Right Panel.