Carousel:

A slideshow component for cycling through elements—images or slides of text—like a carousel.The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Available Options:

• Carousel with background image only.
• Carousel with title, content and button.

Carousel with background image only:

Output:

Code:

<div class="darkout-section">
{% include do-carousel.html tag="sample" id="one" %}
</div>

How to add content:

• Step1: Navigate to the data file for carousel in _data > do-carousel.yml
• Step2: Add content to the data file as shown in the below example.

- title:  # Use carousel title name here
  image: /assets/images/carousel/sample.jpg  # Use carousel image here
  description:  # Use carousel description here
  button-text:  # Use button text here
  href:  # Use carousel href here
  tags: sample  # Use carousel tag name here

• Step3: In the data file tags is a mandatory value. Without using tags carousel will not be displayed.

How to add in page:

• Step1: Add carousel to the page using the include statement.
• Step2: On the page use

<div class="darkout-section">{% include do-carousel.html tag="sample" id="one" %}</div>

• Attributes:
  • Tag:
    • Tag is a mandatory attribute without using tag Carousel will not be displayed. (Mandatory)
  • Id:
    • Id is a mandatory attribute for using multiple carousel on same page. Without using id carousel will not be displayed. (Mandatory)
  • Class:
    • Use additional class here as include variable.

Carousel with title, content and button:

Output:

Code:

<div class="darkout-section">
{% include do-carousel.html tag="modules" id="two" %}
</div>

How to add content:

• Step1: Navigate to the data file for carousel in _data > do-carousel.yml
• Step2: Add content to the data file as shown in the below example.

- title: Title 1  # Use carousel title name here
  image: /assets/images/carousel/sample.jpg  # Use carousel image here
  description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  # Use carousel description here
  button-text: Read More  # Use button text here
  href: "#"  # Use carousel href here
  tags: modules  # Use carousel tag name here

• Step3: In the data file tags is a mandatory value. Without using tags carousel will not be displayed.

How to add in page:

• Step1: Add carousel to the page using the include statement.
• Step2: On the page use

<div class="darkout-section">{% include do-carousel.html tag="modules" id="two" %}</div>

• Attributes:
  • Tag:
    • Tag is a mandatory attribute without using tag Carousel will not be displayed. (Mandatory)
  • Id:
    • Id is a mandatory attribute for using multiple carousel on same page. Without using id carousel will not be displayed. (Mandatory)
  • Class:
    • Use additional class here as include variable.