Brands Carousel

Documentation: Brands Carousel Component

This documentation covers the Brands Carousel Component, a Vue.js component designed to display a list of brand logos in a responsive carousel format. The component allows for dynamic styling and layout based on the provided model.

Overview

The Brands Carousel Component displays a carousel of brand logos. The carousel adapts to different screen sizes and configurations, showcasing brand images or names.

Model Documentation

The Brands Carousel Component relies on a model object that defines its behavior and appearance. Here's a detailed look at the model properties:

Model Structure

The model object contains the following properties:

id: String
The unique identifier for the component, used for styling and referencing the component.

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

header: String
Optional header text to display above the carousel. This is rendered as an <h2> element.

alignment: Number
Defines the alignment of the header text. Possible values are:

1: Left aligned (justify-content-start)

2: Center aligned (justify-content-center)

3: Right aligned (justify-content-end)

brandIds: Array
An array of brand IDs used to fetch the brand data.

Example Model

Here is an example of what the model object might look like:

{
  "id": "brands-carousel-1",
  "cssClass": "custom-carousel",
  "header": "Our Trusted Brands",
  "alignment": 2,
  "brandIds": ["brand1", "brand2", "brand3", "brand4", "brand5"]
}

Component Structure

The component is defined in Vue.js with the following features:

HTML Template: Defines the structure and layout of the carousel and brand items.

JavaScript Logic: Manages data, methods, and lifecycle hooks.

HTML Template

Here is the HTML structure for the Brands Carousel Component:

JavaScript

The JavaScript file manages the component's data, methods, and lifecycle hooks:

Steps to Create Your Own Brands Carousel Component

Set Up the Vue Component:

Define the component using Vue.component() or app.component().

Specify the HTML template using the template option.

Create the Template:

Structure your HTML to include the carousel layout and brand items.

Use Vue.js directives (v-if, v-for, :class, etc.) to bind data and control rendering.

Implement the JavaScript Logic:

Define props to receive the model data from parent components.

Use data() to initialize component state.

Implement mounted() to fetch brand data based on brandIds.

Write methods to initialize the carousel and handle dynamic alignment classes.

Integrate External Libraries:

Ensure you have included any required libraries for carousel functionality and styling.

Testing and Debugging:

Test the component in various scenarios to ensure proper functionality and responsiveness.

Debug any issues related to data binding, component rendering, or styling.

Deploy the Component:

Once tested, deploy the component as part of your Vue.js application.

This guide provides a template for creating a custom Brands Carousel component in Vue.js. Customize the HTML and JavaScript according to your specific requirements and integrate any additional features as needed.

Documentation: Brands Carousel Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Steps to Create Your Own Brands Carousel Component#