Skip to main content
Slideshow block
B
Written by BeyondCart
Updated over 3 months ago

The Slideshow component in BeyondCart allows you to add a carousel of images to your mobile app. This feature is ideal for showcasing seasonal promotions, product launches, or other visual highlights on your app’s homepage. Here’s a detailed breakdown of each setting available for customizing the slideshow:

Settings

  • Boxed: When toggled on, the boxed setting will add padding around the slideshow, creating a "boxed" effect. This is useful if you want the slideshow to have some space from the screen edges or other elements on the page.

    If left off, the slideshow will expand to fit the full width of the screen, offering a more immersive view.

  • Auto Play Swiper: Enabling this option allows the slideshow to automatically cycle through images. This feature is great for drawing user attention, as it provides a dynamic visual experience.

    If this is turned off, users will need to manually swipe through the images.

  • Auto Play Delay (ms): This setting determines how long each image in the slideshow stays visible before switching to the next one (if Auto Play Swiper is enabled).

    Enter a value in milliseconds (e.g., 1000 ms equals 1 second). Setting a shorter delay will make the slideshow move faster, while a longer delay will let each image stay visible longer.

  • Auto Play Interval (ms): This interval controls the time between the transitions of images. For example, setting it to 1800 ms will cause a slight pause before moving to the next image after the delay ends.

    This allows you to adjust the slideshow’s rhythm and pace, creating a smooth experience for users.

  • Indicators: When enabled, small dots appear at the bottom of the slideshow to indicate the number of slides and the current position. These indicators help users navigate through the slideshow and understand that there are multiple images to view.

    Turning indicators off creates a cleaner look but removes visual cues about the slide count.

  • Width: Specifies the width of the slideshow component in pixels. By default, it may be set to fit the screen width, but you can customize it for unique layouts.

    Adjusting the width allows you to create a custom look for the slideshow within the page layout.

  • Height: Specifies the height of the slideshow component in pixels. A taller height will display larger images, while a shorter height will create a slimmer banner-like slideshow.

    Set the height based on your design preference and the content of your images.

  • Slideshow (Add Element): Use this option to add individual images or “slides” to the slideshow. Each slide can include an image, and some may allow you to add overlay text or buttons.

To add elements, click Add Element and upload images. Customize each slide with relevant images that align with your current promotions or products.

For the best experience, ensure all images are consistent in size and style to create a seamless flow within the slideshow.

Layout Options:

  • Basic Layout: The Basic layout presents each slide in a straightforward, full-width format. This style is clean, minimal, and focuses on displaying the entire image without any additional design effects.

    Use the Basic layout if you want a simple, distraction-free slideshow that lets the images speak for themselves. Ideal for highlighting product images or banners with a clear call to action.

  • Creative Layout: The Creative layout offers a more visually dynamic presentation by layering elements or adding visual effects to the slides.

    This layout may include overlays, gradients, or unique positioning of text and images, creating a more engaging and branded experience.

    It’s best used when you want to add visual interest to your slideshow, making it a focal point on your app’s homepage. The Creative layout works well for seasonal promotions, storytelling, or when you want to capture attention with a striking design.

Best Practices for Using the Slideshow Component

  • High-Quality Images: Use high-resolution images to make the slideshow visually appealing. Low-quality images can negatively impact the user experience.

  • Keep Text Minimal: If adding overlay text, keep it short and impactful. Too much text can clutter the image and make it hard to read.

  • Limit Number of Slides: To keep load times quick and user engagement high, limit the number of slides to 3-5. Too many slides can make users lose interest.

  • Optimize for Mobile: Ensure images are optimized for mobile display. Avoid small text or overly detailed images that may not be easily viewable on small screens.

  • Preview Your Changes: Always preview the slideshow on a mobile device or in the app preview to ensure it looks as expected and transitions smoothly.

Contact Us

For queries and feedback, feel free to reach out to us at help@beyondcart.com. We’re here to help and eager to assist you with your concerns.

Did this answer your question?