Carousels

A carousel is a design element used to display images and videos on your website. It works like a slideshow, showing more than one image or video at a time. The content changes after a few seconds or when the visitor clicks to view the next one.

Variations

Carousel with controls inside Requires GlideJS

copydone

Controls Outside Requires GlideJS

copydone

Carousel with indicator outside Requires GlideJS

copydone

Carousel with indicator inside Requires GlideJS

copydone

Carousel with indicator & controls inside Requires GlideJS

copydone

Carousel with cards Requires GlideJS

copydone

Testimonial CarouselRequires GlideJS

  • Wind-ui, is probably one of the best libraries I've came across. Good looking, easy to use and above all super accessible.

    user name
    Bill GatesCEO, Microsoft
  • Wind-ui components come with proper attributes to ensure full accessibility with the WAI-ARIA standards.

  • You can easily communicate with Wind-ui's team for support through their discord channel. They are responsive and ultra helpful guys!

    user name
    Arnold JonesSoftware Engineer
copydone

Usage

Use the carousel component to view multiple pieces of content that occupies a single coveted space:

  • To enable more than one piece of content to occupy the same piece of real estate on the app interface.
  • To display a group of content on the same level (set of images, users testimonials etc.)

The carousels functionality is implemented using GlideJS. GlideJS CDN is used in all HTML files and the React components are using the @glidejs/glide as a dependency.

Specs

The carousel component consists of the following elements:

  • The list of elements that will slide
  • The navigation arrows (3rem (48px) in width and height) to provide enough space for reliable interaction
  • The slide indicators (2.5rem(40px) touch area with 0.5rem(8px) dots) that displays the total number of slides and the active slide.

Both indicators and navigation arrows can be placed within or outside the slide area.

Accessibility notes

All images should use the alt to be able to be accessible from screen readers.