Block Carousel

The <qds-web-bloc-carousel> is the component that enables users to navigate horizontally to view a series of blocks.

Overview

Common usage

When to use Block Carousel?

Use the qds-web-block-carousel component in the following situations:

1. Limited Space: When you need to display multiple pieces of content within a limited space efficiently.

2. Visual Appeal: To create a visually engaging experience, such as showcasing a portfolio, featured products, or image galleries.

3. Highlighting Promotions: To feature rotating promotions, announcements, or Special offers without overwhelming the user.

When not to use Block Carousel?

Avoid using the qds-web-block-carousel component in the following situations:

1. Critical Content: If the content is vital and needs to be immediately visible, a carousel might hide important information.

2. User Engagement: When you require user interaction or engagement with all pieces of content, as users might overlook some slides.

3. Accessibility Concerns: Carousels can be challenging for users with disabilities, especially those relying on screen readers or keyboard navigation.

4. SEO Importance: If SEO is a priority, content within carousels may be less visible to search engines compared to static content.

5. Performance Issues: On low-bandwidth connections or less powerful devices, carousels can impact loading times and performance.

6. Complexity: If the implementation or maintenance of a carousel adds unnecessary complexity to your project.

Usability guidelines

Try to avoid auto-rotation on mobile. It should be placed on the top of the content.

Block Carousel Hero vs. Block Carousel Promo

Find more information about the [block hero][] and [block promo][] components in its documentation page.

Properties

blockType

The blockType property is necessary to indicate the type of block that will be slided and correctly place the indicator.

Note: The carousel should only contain one type of block: [block hero][] or [block promo][]. Do not mix them.

id

The id global attribute defines an identifier (ID) which must be unique in the whole document.

— Definition from the [MDN web docs][]

This global attribute is required and essential to assure multiple

carousels working on the same page :::

indicator

The indicator come in 2 variants:

• manual: switching between pages is activated by clicking on the "next" (>) or "previous" (<) buttons.
• auto: page indicators are changing with smart animation flowing smoothly from one state to another.

manual

Loading...

Live Editor

<qds-web-block-carousel
  aria-roledescription="carousel"
  id="carousel-manual"
  aria-label="hero blocks"
  indicator="manual"
  interval="5000"
  block-type="hero"
>
  <qds-web-block-hero
    importance="standard"
    main-title="Accelerate the digital process"
    title-tag="h1"
    kicker="Kicker"
    description="Stay ahead with innovations for a sustainable world and explore how software and technologies make the digital, electric world a reality."
    image-src="https://energyfutureslab.com/wp-content/uploads/2018/10/blog_mobility_in_a_low_carbon_future.jpg"
  ></qds-web-block-hero>

  <qds-web-block-hero
    importance="standard"
    main-title="Get the latest insights"
    title-tag="h2"
    kicker="2024"
    description="Discover Schneider Electric Insights on Sustainability, Electricity 4.0, and Next-generation automation. These three issues are the core of our brand. Dive deeper into these topics to better understand our actions and motives."
    description-list="false"
    image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
  ></qds-web-block-hero>

  <qds-web-block-hero
    importance="standard"
    main-title="Innovation Summit World Tour"
    subtitle="Subtitle"
    title-tag="h2"
    kicker="Kicker"
    description-list="We discuss the future of sustainability with experts and thought leaders;This event covers topics such as strategy and innovation"
    image-src="https://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
  ></qds-web-block-hero>
</qds-web-block-carousel>

auto

Loading...

Live Editor

<qds-web-block-carousel
  aria-roledescription="carousel"
  id="carousel-auto"
  aria-label="hero blocks"
  indicator="auto"
  interval="6000"
  block-type="hero"
>
  <qds-web-block-promo
    importance="standard"
    main-title="Accelerate the digital process"
    title-tag="h1"
    kicker="Kicker"
    description="Stay ahead with innovations for a sustainable world and explore how software and technologies make the digital, electric world a reality."
    description-list='["Create cases to help from our experts","Manage cases and view case history"]'
    image-src="https://energyfutureslab.com/wp-content/uploads/2018/10/blog_mobility_in_a_low_carbon_future.jpg"
  ></qds-web-block-promo>

  <qds-web-block-promo
    importance="standard"
    main-title="Get the latest insights"
    title-tag="h2"
    kicker="2024"
    description="Discover Schneider Electric Insights on Sustainability, Electricity 4.0, and Next-generation automation. These three issues are the core of our brand. Dive deeper into these topics to better understand our actions and motives."
    description-list="false"
    image-src="https://images.theconversation.com/files/616698/original/file-20240902-16-9evti2.jpg"
  ></qds-web-block-promo>

  <qds-web-block-promo
    importance="standard"
    main-title="Innovation Summit World Tour"
    subtitle="Subtitle"
    title-tag="h2"
    kicker="Kicker"
    description-list="We discuss the future of sustainability with experts and thought leaders;This event covers topics such as strategy and innovation"
    image-src="https://www.graygroupintl.com/hubfs/Gray%20Group%20International/GGI%20-%20Approved%20and%20Converted%20%28WebP%29/Wind%20Energy%20Harnessing%20the%20Power%20of%20Air.webp"
  ></qds-web-block-promo>
</qds-web-block-carousel>

interval

The interval property sets amount of time in miliseconds to delay between automatically cycling an item when the indicator is set to auto. If false, the default value is 5000.

Accessibility guidelines

The qds-web-block-carousel component should always be accessible. Here are some guidelines to follow:

• aria-roledescription needs to be set with the value "carousel".
• aria-label attribute needs to be set depending on the carousel content.

Implementation tips

Slot

The Block Carousel should contain a series of block hero or block promo as a slot.

Slide number

Carrousel indicator allows you to add form to 10 slides for manual, and 2-6 slides for auto.

Do's

• Use carousel within a specific, and relevant context;
• Be sure that the prev/next buttons to be noticed early then content
• Show most important slides always first.
• We recommend to use not more then 5 slides for all carousel types
• Use emphasized carousel when you need to display one slide at a time
• Use standard carousel when you need to see multiple slides at once.
• Maintain a consistent layout and design across all slides to avoid confusing the user.
• If the carousel auto-advancing, ensure the timing is consistent and not too fast. - Time should be defined depends on the context (3 words per second as a guideline)

Dont's

• We are not recommend use auto-advancing carousel in mobile and tablet;
• Avoid using it for essential content that users might miss if they don't interact with the carousel.

Importing

Note: if you're using the lazy loader to load Quartz components, you can ignore this section.

Import

To import this component from the public jsDeliver CDN using a JavaScript import:

import { defineCustomElementQdsWebBlockCarousel } from 'https://cdn.jsdelivr.net/npm/@quartzds/websites@next+esm'
defineCustomElementQdsWebBlockCarousel()

Bundler

To import this component using a bundler:

import { defineCustomElementQdsWebBlockCarousel } from '@quartzds/websites'
defineCustomElementQdsWebBlockCarousel()

Angular

To import this component as an Angular component:

import { QdsWebBlockCarousel } from '@quartzds/websites-angular'

React

To import this component as a React component:

import { QdsWebBlockCarousel } from '@quartzds/websites-react'

Vue

To import this component as a Vue component:

import { QdsWebBlockCarousel } from '@quartzds/websites-vue'

Platforms

The Block Carousel including both types hero and promo components are designed two platforms mobile / desktop and four screen sizes tablet being included in mobile and large desktop in desktop:

• Large desktop: 1280px+
• Desktop: 1024-1279px
• Tablet: 768-1023px
• Mobile: 375-767px

Anatomy

Component reference

Properties

Attribute / PropertyTypeDescriptionDefault

block-type / blockType

"hero" | "promo"

Carousel indicator type.

undefined

indicator

"auto" | "manual" | undefined

Carousel indicator variant.

"manual"

interval

number | undefined

The amount of time to delay between automatically cycling an item.

5000