Slider Block

The Slider Block is a versatile component used to display a collection of items in a dynamic, horizontally scrolling carousel. It offers multiple visual styles, making it suitable for showcasing anything from team members and locations to featured products or articles.

Content Editor Fields

General Content

• Title:

  • Description: The main heading displayed above the slider.
  • Usage: Enter a title for the entire section (e.g., "Meet Our Animals," "Explore Our Locations").
  • Requirement: Optional.

• Intro:

  • Description: A smaller subheading or introductory text displayed below the main title.
  • Usage: Provide brief context for the slider content.
  • Requirement: Optional.

Style Options

• Slides Style:
  • Description: Defines the visual appearance and layout of the individual slides.
  • Options:
    • Rectangular: A simple style with a rectangular image, a title, and a "distance" field.
    • Oval: A creative style where the image is clipped into a unique, organic oval shape.
    • Cards: A content-focused style that presents each slide as a card with an image, title, excerpt, and a call-to-action button.
  • Usage: Select the style that best fits the content you are displaying.
  • Requirement: Required.

Slides (Repeater)

• Description: A list of individual items that will be displayed in the slider.

• Usage: Click "Add Slide" to create a new item. You can add multiple items.

• Requirement: At least one slide is required for the block to render.

• Fields (per slide):

  • Image:
    • Description: The primary image for the slide.
    • Requirement: Required for the slide to be visually complete.
  • Shape (Conditional):
    • Description: Appears when Slides Style is set to Oval. Defines the specific organic shape of the image.
    • Options: oval-left, oval-center, oval-right.
    • Usage: Choose a shape to create visual variety between slides.
  • Title:
    • Description: The heading for the individual slide.
    • Requirement: Optional, but highly recommended.
  • Distance (Conditional):
    • Description: Appears when Slides Style is set to Rectangular. A short text field, often used for location distance (e.g., "5 miles away").
    • Requirement: Optional.
  • Excerpt (Conditional):
    • Description: Appears when Slides Style is set to Cards. A short paragraph of text describing the slide's content.
    • Requirement: Optional.
  • CTA (Call-to-Action):
    • Description: A link field for the slide.
    • Usage:
      • For Rectangular and Oval styles, adding a CTA makes the entire slide a clickable link.
      • For the Cards style, this adds a visible button to the card.
    • Requirement: Optional.

Example Usage (Cards Style)

Steps:

1. Add the block: Insert the Slider Block into your page.
2. Add General Content:
   • Title: "Our Conservation Projects"
   • Intro: "Learn how we're making a difference."
3. Choose Style:
   • Set Slides Style to Cards.
4. Add Slides:
   • Click "Add Slide" for the first item:
     • Image: Upload a photo of a sea turtle.
     • Title: "What’s on at Blue Planet"
     • Excerpt: "Congue vel a quisque vestibulum dictum. Habitant porttitor amet aenean nisl amet sed nulla. Lectus mi vestibulum ut orci eu."
     • CTA: Add a link with the title "Book Now".
   • Click "Add Slide" for a second item:
     • Image: Upload a photo of a coral reef.
     • Title: "Lectus amet netus proin"
     • Excerpt: "Ipsum malesuada amet netus quis massa et mi sagittis pellentesque. Leo eu pulvinar purus quis nunc lectus pulvinar at. Turpis."
     • CTA: Add a link with the title "Book Now".
5. Save the Page: The block will now display a heading and a carousel of cards that users can scroll through.

Result:

The Slider Block renders a clean, interactive carousel complete with navigation arrows. The appearance of the slides will vary based on the selected Slides Style, providing a tailored look for different types of content. The slider is fully responsive and easy for users to navigate on any device.

Preview with image:

Editor preview:

Benefits:

• Multiple Visual Styles: Adapt the slider's look to match your content, from simple images to detailed content cards.
• Space-Efficient: Display a large number of items in a compact, horizontal layout.
• Interactive and Engaging: Encourages user interaction through scrolling and clicking.
• Clear Navigation: Includes prominent previous/next arrows for easy browsing.

Conclusion:

The Slider Block is a flexible and powerful tool for showcasing collections of content. Its multiple style options and easy-to-use interface make it an excellent choice for creating visually appealing and interactive sections on any page.