Hero Carousel

Documentation: Hero Carousel Component

The Hero Carousel Component is a dynamic Vue.js component used to display a carousel of slides, each with customizable content and styling. This component is particularly useful for showcasing featured content, promotions, or announcements in a visually appealing way.

Overview

The Hero Carousel Component allows users to create a carousel of slides where each slide can contain an image, text, and a button. The component provides various configuration options such as alignment, slide background settings, and carousel behavior. It leverages the tns (Tiny Slider) library for smooth, responsive carousel functionality.

Model Documentation

The model object configures the Hero Carousel Component, defining its structure, slide data, and other settings.

Model Structure

id: String
A unique identifier for the carousel component, used in the HTML element ID.

cssClass: String
Optional CSS class(es) for additional styling of the carousel container.

header: String
Optional header text displayed above the carousel.

alignment: Number
Determines the alignment of the header text (1 for left, 2 for center, 3 for right).

slides: Array
An array of slide objects, each with:

backgroundImage: Object
Optional background image with properties:

link: String
URL of the background image.

backgroundColor: String
Background color for the slide.

image: Object
Optional image with properties:

link: String
URL of the image.

header: String
Main header text for the slide.

subHeader: String
Subheader text for the slide.

subHeader2: String
Secondary subheader text for the slide.

text: String
Additional text for the slide.

buttonLink: String
URL for the button link.

buttonText: String
Text for the button.

Example Model

{
  "id": "hero-carousel",
  "cssClass": "hero-carousel",
  "header": "Featured Highlights",
  "alignment": 2,
  "slides": [
    {
      "backgroundImage": {
        "link": "https://example.com/image1.jpg"
      },
      "backgroundColor": "#f0f0f0",
      "image": {
        "link": "https://example.com/image1-thumbnail.jpg"
      },
      "header": "Welcome to Our Site",
      "subHeader": "Explore the Latest Trends",
      "subHeader2": "Discover more about our offerings",
      "text": "Join us to experience the best of our products and services.",
      "buttonLink": "https://example.com/signup",
      "buttonText": "Get Started"
    },
    {
      "backgroundImage": {
        "link": "https://example.com/image2.jpg"
      },
      "backgroundColor": "#e0e0e0",
      "image": {
        "link": "https://example.com/image2-thumbnail.jpg"
      },
      "header": "Special Offers",
      "subHeader": "Limited Time Only",
      "subHeader2": "Don't miss out on exclusive deals",
      "text": "Check out our special promotions and discounts available now.",
      "buttonLink": "https://example.com/offers",
      "buttonText": "View Offers"
    }
  ]
}

Component Structure

The Hero Carousel Component consists of the following parts:

Header Section: Displays the header text if provided, aligned based on the configuration.

Carousel Container: Contains the slides and initializes the carousel functionality.

Slides: Each slide includes:

Background image or color.

Main content including text and images.

Button with optional link and text.

HTML Template

The HTML template for the component is structured as follows:

JavaScript

The JavaScript code initializes the carousel and handles configuration:

Explanation

Data Handling: The component uses Vue.js data and props to manage the carousel's state and configuration.

Carousel Initialization: Utilizes Tiny Slider (tns) for carousel functionality, with customizable options for controls, speed, and autoplay.

Slide Rendering: Each slide can have a background image, color, and content, with conditional rendering based on the presence of text or button elements.

Alignment Handling: Provides flexible alignment options for the header text based on configuration.

Usage

To use the Hero Carousel Component in a Vue.js application:

Include the Component:
Ensure that herocarouseldefault is registered in your Vue app.

Provide the Model:
Pass a configuration object to the component to define the carousel slides, header, and other settings.

Initialize the Carousel:
The component automatically initializes the carousel using Tiny Slider on mount.

Style the Component:
Apply custom styles using the cssClass property to match your design requirements.

Documentation: Hero Carousel Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Usage#