> ## 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). # How to Transform Your Gallery into a Slider in Mobile devices # How to Transform Your Gallery into a Mobile Slider This guide walks you through converting your existing **Essential Grid Gallery** into a smooth, swipeable slider optimized for mobile devices — complete with navigation arrows, autoplay, and slide animations. --- ## Prerequisites Before you begin, make sure you have: * An existing gallery already created in the Essential Grid Gallery app * If you haven't created a gallery yet, follow our [Add Essential Grid Gallery Images](https://essential-grid.crisp.help/en/article/how-to-create-a-hand-picked-image-grid-yr32ic/?bust=1786013565682) tutorial first --- ## Part 1 — Enable Pagination & Set Mobile Row ### Step 1: Open the Essential Grid Gallery Dashboard From your **Shopify Admin**, open the **Essential Grid Gallery** app to access your gallery dashboard. --- ### Step 2: Go to the Grid Settings Tab Click the **Settings** tab at the top of the gallery editor. --- ### Step 3: Enable Pagination Scroll down in the Grid Settings panel and locate the **Pagination** option. Toggle or select the **Enable** option to turn on pagination for your gallery. > [!IMPORTANT] > Pagination must be enabled for the slider functionality to work on mobile devices. --- ### Step 4: Enable Max Row Mobile Locate the **Max Row Mobile** option (just below Pagination) and enable it. Set the **maximum visible row value** from `3` to `1`. This ensures only **one image is displayed per row** on mobile, which is the key setting that turns your gallery into a slider. --- ### Step 5: Save Your Gallery Click the **Save Gallery** button to save your changes. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1fidoih.png =800x485) --- ### Step 6: Check the Live Preview Open the **Live Preview** to see your changes. At this point, you'll notice that only one image is displayed, but the slider may not be fully functional yet — this is expected. We'll fix it in the next steps. --- ## Part 2 — Add Slider Navigation Arrows ### Step 7: Go to the Nav-Filter-Sort Tab Navigate to the **Nav-Filter-Sort** tab in the gallery editor. --- ### Step 8: Add Left and Right Arrows Locate the **Left Arrow** and **Right Arrow** controls. **Drag and drop** them into their designated **Left** and **Right Drop Zones** to add navigation arrows to your slider. > [!TIP] > The navigation arrows allow users to manually swipe through images on mobile. Without them, the slider won't have visible controls. --- ### Step 9: Save Your Gallery Click the **Save Gallery** button to save your changes. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_iv62pw.png =500x581) --- ### Step 10: Check the Live Preview Open the **Live Preview** again. The slider should now be working, and the left/right control arrows should be visible on mobile devices. --- ## Part 3 — Configure Autoplay & Swipe Settings ### Step 11: Go Back to Settings Navigate back to the **Settings** tab. --- ### Step 12: Enable Autoplay Scroll down and locate the **Autoplay** option. Toggle it to **Enable** so the slider automatically cycles through images. --- ### Step 13: Adjust Autoplay Timing Set the **autoplay timing** (in milliseconds) to control how long each slide is displayed before transitioning to the next one. > [!TIP] > A value of **3000–5000 ms** (3–5 seconds) works well for most galleries. Shorter intervals may feel rushed, while longer intervals keep viewers engaged. --- ### Step 14: Enable Swipe Enable the **Swipe** option to allow mobile users to swipe through images with touch gestures. There are several swipe options available — feel free to experiment with them to find the style that fits your store best. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_o6rf2e.png =450x939) --- ### Step 15: Save Your Gallery Click the **Save Gallery** button to save your changes. --- ## Part 4 — Choose a Slider Animation ### Step 16: Go to the Animation Tab Navigate to the **Animation** tab in the gallery editor. You'll find a variety of slider animation effects to choose from. --- ### Step 17: Select an Animation Effect Browse the available animation options and select one. For example, choose **Horizontal Slide** for a classic left-to-right sliding effect. Other animation effects are available for you to explore and try out. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_h8qd22.png =500x349) --- ### Step 18: Save and Preview Click the **Save Gallery** button one final time, then open the **Live Preview** to verify everything is working. Your gallery should now display as a fully functional slider on mobile devices with: * ✅ Single-image view per row * ✅ Left/right navigation arrows * ✅ Autoplay with custom timing * ✅ Touch swipe support * ✅ Smooth slide animation --- ## Troubleshooting | Issue | Solution | | ---- | | Slider not working after enabling pagination | Make sure **Max Row Mobile** is set to `1` and the gallery is saved. | | No navigation arrows visible | Go to the **Nav-Filter-Sort** tab and drag the left/right arrows into their Drop Zones. | | Autoplay not starting | Ensure autoplay is enabled in **Grid Settings** and that you have navigation arrows added first. | | Swipe not responding on mobile | Verify the **Swipe** option is enabled in Grid Settings and test on an actual mobile device (not just browser resize). | | Animation not applying | Confirm you selected an animation in the **Animation** tab and clicked **Save Gallery**. | --- ## Summary With just a few configuration changes across **Grid Settings**, **Nav-Filter-Sort**, and **Animation** tabs, you've transformed your standard gallery into a sleek, mobile-friendly slider. Explore more features and animation options to make your content stand out! --- ## Need Help? If you run into any issues, please contact our support team and include: * Your store URL * The Gallery ID you're using * A screenshot or screen recording of the issue