> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://essential-grid.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Transform a Grid Gallery into a Slider in Essential Grid Gallery

# **Step 1: Convert the Gallery into a Slider**
1. Return to the app dashboard.
2. Open the **Settings** tab.
3. Enable **Pagination**.
4. Set **Maximum Visible Rows** to **1**.
   * This places all images in a single row, enabling slider functionality.
5. Save your changes.
6. Confirm the gallery now appears as a single-row slider.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1b2ppad.png =350x598)


# **Step 2: Add Navigation Arrows**
1. Open the **Nav-Filter-Sort** tab.
2. Drag the **Right Arrow** into the right navigation drop zone.
3. Drag the **Left Arrow** into the left navigation drop zone.
4. Save the gallery.
5. Refresh the live preview to verify the navigation arrows are working.


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1ikfidf.png =900x451)


# **Step 3: Enable Autoplay and Touch Swipe**
1. Return to the **Pagination** settings.
2. Enable **Autoplay** to automatically cycle through slides.
3. Enable **Touch Swipe** to allow swipe gestures on touch devices.
4. Save the gallery.
5. Refresh the storefront to confirm autoplay is functioning.


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1ok6pwi.png =350x771)


# **Step 4: Change the Slider Animation**
1. Open the **Animation** tab.
2. Choose an animation effect.
3. Select **Horizontal Slide** (or any preferred animation).
4. Save the gallery.
5. Refresh the live preview to verify the new animation.

Choose the animation that best matches your store’s design.


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1qw9rk4.png =900x382)


# **Optional Step 5: Adjust Image Spacing**
1. Return to **Settings** tab.
2. Set **Item Spacing** to approximately **10–15 pixels**.
3. Save the gallery.
4. Refresh the live preview.
This adds spacing between images for a cleaner appearance.


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1nf7aot.png =350x529)


# **Optional Step 6: Make the Slider Full Width**
1. In **Grid Settings**, change **Layout Box** to **Full Width**.
2. Save the gallery.
3. Refresh the storefront.
Your slider will now span the full width of the page.


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_thtyuf.png =350x151)