Carousel Section

Overview

The Carousel Section displays multiple slides that customers can navigate through using arrows, dots, or automatic rotation. Each slide functions as an independent promotional banner with its own image, text, and call-to-action.

This section helps:

• Showcase multiple promotions without cluttering the homepage
• Highlight seasonal offers and limited-time deals
• Promote new arrivals and featured collections
• Announce special events and sales
• Keep the homepage dynamic and visually engaging

Design Layouts

The Carousel Section provides multiple professionally designed layouts. Each layout changes how slides are displayed and transitioned.

Available layout options include:

• Design 1 — Full-width banner carousel with fade transition
• Design 2 — Split carousel with image and text side by side
• Design 3 — Card-style carousel with rounded corners and shadows
• Design 4 — Minimal carousel with large images and subtle text overlay
• Design 5 — Multi-slide visible carousel showing partial next/prev slides

Figure 1: Carousel Section displaying multiple promotional slides

Color & Style Options

The Carousel Section inherits colours from your global Color & Style configuration. You can customize specific elements for each slide.

Customizable elements include:

• Overlay Colour — Semi-transparent overlay on banner images
• Text Colour — Headline, sub-headline, and body text per slide
• Button Colours — CTA button background and text per slide
• Navigation Arrows — Arrow colour, size, and style
• Dot Indicators — Active and inactive dot colours
• Slide Background — Fallback background colour when images load

Carousel Items

Each carousel item is an independent slide with its own content. You can add, remove, and reorder slides to match your current marketing priorities.

Each carousel item includes:

• Banner Image — The visual background of the slide
• Heading — Main promotional headline
• Sub Heading — Supporting text or offer details
• Description — Optional additional text
• Call-to-Action Button — Link to a product, category, or page

// Example carousel slide
Slide 1:
  Image:    "summer-sale-banner.jpg"
  Heading:  "Summer Sale"
  Sub:      "Up to 50% Off"
  Desc:     "Discover amazing deals on summer essentials"
  CTA:      "Shop Now" → /collections/summer-sale

Slide 2:
  Image:    "new-arrivals-banner.jpg"
  Heading:  "New Arrivals"
  Sub:      "Fresh Styles Just Dropped"
  Desc:     "Be the first to shop our latest collection"
  CTA:      "Explore" → /collections/new-arrivals

Banner Images

Each carousel slide requires a banner image. These images should be visually compelling and optimized for the carousel display.

Image Guidelines:

• Use high-resolution images (recommended 1920x600 pixels or higher)
• Ensure consistent dimensions across all carousel slides
• Leave space for text overlay — avoid busy center areas
• Optimize file sizes for smooth carousel transitions
• Use relevant, seasonally appropriate imagery
• Consider using the same visual style across all slides for consistency

Headings & Text

Configure the text content for each carousel slide. Keep messaging clear, concise, and aligned with your promotional goals.

Available text fields per slide:

• Main Heading — Primary promotional message (keep under 6 words)
• Sub Heading — Supporting offer or context
• Description — Brief additional details (optional)
• CTA Button Text — Action-oriented button label

Carousel Settings

Control the behavior and appearance of the carousel component.

Configurable settings include:

• Auto-play — Enable or disable automatic slide rotation
• Auto-play Speed — Time between automatic transitions (in seconds)
• Transition Effect — Slide, fade, or zoom transition style
• Loop — Continuously loop through slides or stop at the end
• Navigation Arrows — Show or hide previous/next arrows
• Dot Indicators — Show or hide slide position dots
• Pause on Hover — Stop auto-play when customer hovers over the carousel

Best Practices

• Limit to 3-5 slides — too many can overwhelm and reduce engagement
• Place the most important message in the first slide
• Keep text short and scannable — customers spend seconds per slide
• Use high-contrast text that is readable over banner images
• Ensure each slide has a clear, single call-to-action
• Update carousel content regularly for seasonal campaigns
• Test carousel performance on mobile — swipe navigation should work smoothly
• Avoid auto-play on mobile if it causes performance issues
• Link CTA buttons to relevant pages, not just the homepage
• Use consistent image dimensions to prevent layout shifts