Carousels are a set of content panels that users can browse through, either automatically or by manually clicking to navigate.
The carousels are designed to smoothly animate through a series of panels using CSS3 transitions. While the panels usually contain images, they can hold any type of content or components.
When to use the Carousel
Use the carousel when you have a series of content panels that users can navigate through. They are particularly useful for showcasing images, products, or other visual elements in a space-efficient way. Aim for at least three panels in a carousel to make it a functional navigation tool, as a single panel might not fully leverage the carousel's capabilities.
If your content doesn't need to be displayed in a continuous flow, or if users need to interact with each section independently, consider using alternative components like a grid or list layout instead.
The carousel is a great choice when you need to display content in a compact area or when horizontal space is limited, as it allows users to cycle through items without taking up too much room on the page.
Examples in GOSS products
- The Panel template, using metadata to create carousel panels
- The Chill theme Home template
- The Dynamic theme Home template, immediately below the header region
- The background of the header in the Impact theme
- When launching the large image view of the Image Gallery Inline
Accessibility considerations
Carousels can be tricky when it comes to accessibility and user interaction, so this component focuses on making sure it's easy for everyone to use rather than offering lots of extra features. Right now, autoplay isn't an option, but users can still choose to move through the slides at their own pace. The slide transitions are powered by CSS3 animations instead of relying on JavaScript libraries.
If the slides do move automatically, they'll switch every 10 seconds by default, which is better for accessibility. To make sure users know when a new slide is coming, we've added a progress bar that shows the timing.
Basic carousel
A carousel with a the basic setup, cycling through a collection of articles.
The basic carousel will output most of the carousel features with default values applied, but won't feature any particular animation style.
Most implementations in GOSS products have opted for the sliding animation. There's an example further down.
A carousel of three simple items
Item 1 of 3
<section class="gi-carousel" aria-labelledby="c_10308033990892heading" id="c_10308033990892"
data-live-region-text="Item {0} of {1}" data-allow-play="true" data-play-interval="10000" data-animate-fade="false"
data-animate-slide="false" data-is-looping="true" data-slides-to-display="1" data-slides-to-move="1"
data-slides-match-height="false" data-is-swiper="false" data-layout-order="controls-slides-links">
<h2 class="gi-carousel__heading accessibility" id="c_10308033990892heading">A carousel of three simple items</h2>
<div class="gi-carousel__controls">
<div class="gi-carousel__progressbar"></div>
<button class="gi-carousel__play gi-carousel__play--paused" data-action="start">
<span class="gi-carousel__playtext">Play slides</span>
<span class="gi-carousel__pausetext">Pause slides</span>
</button>
<button class="gi-carousel__previous">
<span class="gi-carousel__previoustext">Previous slide</span>
</button>
<button class="gi-carousel__next">
<span class="gi-carousel__nexttext">Next slide</span>
</button>
</div>
<div class="gi-carousel__slides">
<ul class="gi-carousel__list gi-carousel__list--forward" aria-live="polite">
<li class="gi-carousel__slide gi-carousel__slide--selected" id="c_10308033990892slide0">
<h3>First item</h3>
<strong>First item summary text</strong>
<p>First item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--right" id="c_10308033990892slide1" aria-hidden="true">
<h3>Second item</h3>
<strong>Second item summary text</strong>
<p>Second item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--left" id="c_10308033990892slide2" aria-hidden="true">
<h3>Third item</h3>
<strong>Third item summary text</strong>
<p>Third item text content</p>
</li>
</ul>
</div>
<div class="gi-carousel__linkswrapper">
<ul class="gi-carousel__links">
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn gi-carousel__itemlinkbtn--selected"
data-slide="c_10308033990892slide0">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">1</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308033990892slide1">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">2</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308033990892slide2">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">3</span>
</button>
</li>
</ul>
</div>
<div class="gi-carousel__liveregion accessibility" aria-live="polite" aria-atomic="true">Item 1 of 3</div>
</section>
<script>gi.carousel.initialise("c_10308033990892")</script><comp:carousel var="item" items="#{frontEndMocksAction.threeSimpleItems}" accessibleHeading="A carousel of three simple items">
<h3>#{item.title}</h3>
<strong>#{item.summary}</strong>
<p>#{item.content}</p>
</comp:carousel>@helper RenderCarouselSlide(SimpleItem item){
<h3>@item.Title</h3>
<strong>@item.Summary</strong>
<p>@item.Content</p>
}
@{
Html.Carousel(new CarouselSettings<SimpleItem>
{
SlideItems = items,
RenderSlide = (item) => RenderCarouselSlide(item),
AccessibleHeading = "A carousel of three simple items",
});
}
Animate fade
A carousel with the animate fade attribute set to "true" will apply a simple fade effect when switching between panels
data-animate-fade="true"
The fade effect uses the CSS animation to apply a fade-in based on opacity, set by default to 1s.
The following CSS can be overridden with a different animation using site skins:
.gi-carousel[data-animate-fade="true"] .gi-carousel__slide--animate {
animation: giCarouselFadeIn ease 1s;
-webkit-animation: giCarouselFadeIn ease 1s;
-moz-animation: giCarouselFadeIn ease 1s;
-o-animation: giCarouselFadeIn ease 1s;
}
A carousel of three simple items
Item 1 of 3
<section class="gi-carousel" aria-labelledby="c_10308037220991heading" id="c_10308037220991"
data-live-region-text="Item {0} of {1}" data-allow-play="true" data-play-interval="10000" data-animate-fade="true"
data-animate-slide="false" data-is-looping="true" data-slides-to-display="1" data-slides-to-move="1"
data-slides-match-height="false" data-is-swiper="false" data-layout-order="controls-slides-links">
<h2 class="gi-carousel__heading accessibility" id="c_10308037220991heading">A carousel of three simple items</h2>
<div class="gi-carousel__controls">
<div class="gi-carousel__progressbar"></div>
<button class="gi-carousel__play gi-carousel__play--paused" data-action="start">
<span class="gi-carousel__playtext">Play slides</span>
<span class="gi-carousel__pausetext">Pause slides</span>
</button>
<button class="gi-carousel__previous">
<span class="gi-carousel__previoustext">Previous slide</span>
</button>
<button class="gi-carousel__next">
<span class="gi-carousel__nexttext">Next slide</span>
</button>
</div>
<div class="gi-carousel__slides">
<ul class="gi-carousel__list gi-carousel__list--forward" aria-live="polite">
<li class="gi-carousel__slide gi-carousel__slide--selected" id="c_10308037220991slide0">
<h3>First item</h3>
<strong>First item summary text</strong>
<p>First item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--right" id="c_10308037220991slide1" aria-hidden="true">
<h3>Second item</h3>
<strong>Second item summary text</strong>
<p>Second item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--left" id="c_10308037220991slide2" aria-hidden="true">
<h3>Third item</h3>
<strong>Third item summary text</strong>
<p>Third item text content</p>
</li>
</ul>
</div>
<div class="gi-carousel__linkswrapper">
<ul class="gi-carousel__links">
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn gi-carousel__itemlinkbtn--selected"
data-slide="c_10308037220991slide0">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">1</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308037220991slide1">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">2</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308037220991slide2">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">3</span>
</button>
</li>
</ul>
</div>
<div class="gi-carousel__liveregion accessibility" aria-live="polite" aria-atomic="true">Item 1 of 3</div>
</section>
<script>gi.carousel.initialise("c_10308037220991")</script><comp:carousel var="item" items="#{frontEndMocksAction.threeSimpleItems}" accessibleHeading="A carousel of three simple items" animateFade="true">
<h3>#{item.title}</h3>
<strong>#{item.summary}</strong>
<p>#{item.content}</p>
</comp:carousel>@helper RenderCarouselSlide(SimpleItem item){
<h3>@item.Title</h3>
<strong>@item.Summary</strong>
<p>@item.Content</p>
}
@{
Html.Carousel(new CarouselSettings<SimpleItem>
{
SlideItems = items,
RenderSlide = (item) => RenderCarouselSlide(item),
AccessibleHeading = "A carousel of three simple items",
IsAnimateFade = true
});
}
Animate slide
A carousel with the animate slide attribute set to "true".
data-animate-slide="true"
By setting the animate slide attribute to true on the carousel, the slide animation uses CSS (linked through the data-attribute value) to smoothly slide panels in from the direction the carousel is moving, even when jumping over multiple panels.
By using the --forward and --backward modifiers, the animation direction is clearly indicated. This creates a looping effect when using the Previous and Next arrow buttons, and ensures the slides always move forward when autoplay is enabled.
This is the most commonly used style by GOSS products.
A carousel of three simple items
Item 1 of 3
<section class="gi-carousel" aria-labelledby="c_10308039213025heading" id="c_10308039213025"
data-live-region-text="Item {0} of {1}" data-allow-play="true" data-play-interval="10000" data-animate-fade="false"
data-animate-slide="true" data-is-looping="true" data-slides-to-display="1" data-slides-to-move="1"
data-slides-match-height="false" data-is-swiper="false" data-layout-order="controls-slides-links">
<h2 class="gi-carousel__heading accessibility" id="c_10308039213025heading">A carousel of three simple items</h2>
<div class="gi-carousel__controls">
<div class="gi-carousel__progressbar"></div>
<button class="gi-carousel__play gi-carousel__play--paused" data-action="start">
<span class="gi-carousel__playtext">Play slides</span>
<span class="gi-carousel__pausetext">Pause slides</span>
</button>
<button class="gi-carousel__previous">
<span class="gi-carousel__previoustext">Previous slide</span>
</button>
<button class="gi-carousel__next">
<span class="gi-carousel__nexttext">Next slide</span>
</button>
</div>
<div class="gi-carousel__slides">
<ul class="gi-carousel__list gi-carousel__list--forward" aria-live="polite">
<li class="gi-carousel__slide gi-carousel__slide--selected" id="c_10308039213025slide0">
<h3>First item</h3>
<strong>First item summary text</strong>
<p>First item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--right" id="c_10308039213025slide1" aria-hidden="true">
<h3>Second item</h3>
<strong>Second item summary text</strong>
<p>Second item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--left" id="c_10308039213025slide2" aria-hidden="true">
<h3>Third item</h3>
<strong>Third item summary text</strong>
<p>Third item text content</p>
</li>
</ul>
</div>
<div class="gi-carousel__linkswrapper">
<ul class="gi-carousel__links">
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn gi-carousel__itemlinkbtn--selected"
data-slide="c_10308039213025slide0">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">1</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308039213025slide1">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">2</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308039213025slide2">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">3</span>
</button>
</li>
</ul>
</div>
<div class="gi-carousel__liveregion accessibility" aria-live="polite" aria-atomic="true">Item 1 of 3</div>
</section>
<script>gi.carousel.initialise("c_10308039213025")</script><comp:carousel var="item" items="#{frontEndMocksAction.threeSimpleItems}" accessibleHeading="A carousel of three simple items" animateSlide="true">
<h3>#{item.title}</h3>
<strong>#{item.summary}</strong>
<p>#{item.content}</p>
</comp:carousel>@helper RenderCarouselSlide(SimpleItem item){
<h3>@item.Title</h3>
<strong>@item.Summary</strong>
<p>@item.Content</p>
}
@{
Html.Carousel(new CarouselSettings<SimpleItem>
{
SlideItems = items,
RenderSlide = (item) => RenderCarouselSlide(item),
AccessibleHeading = "A carousel of three simple items",
IsAnimateSlide = true
});
}
Allow play
A carousel with the allow play attribute set to "false".
data-allow-play="false"
By setting the allow play attribute to false on the carousel, the carousel will omit the play button, and the carousel should not be able to automatically play through the slides.
By default, carousels are set to "true", but some setups, like the mobile or responsive gallery grid layouts, don't need this feature at all.
When the allowPlay flag is set to false, the play button is removed from the HTML and the related functionality is disabled in the carousel via JavaScript. The idea is that if the play feature is not needed, it should be fully removed, so it can't be reintroduced just by changing the design.
Automatic starting of the play feature is not provided by default as this type of functionality is discouraged for accessibility compliance, and the carousel should only play when the user interacts with the play button. It is however possible to use JavaScript to start the carousel playing.
A carousel of three simple items
Item 1 of 3
<section class="gi-carousel" aria-labelledby="c_10308041714389heading" id="c_10308041714389"
data-live-region-text="Item {0} of {1}" data-allow-play="false" data-play-interval="10000" data-animate-fade="false"
data-animate-slide="false" data-is-looping="true" data-slides-to-display="1" data-slides-to-move="1"
data-slides-match-height="false" data-is-swiper="false" data-layout-order="controls-slides-links">
<h2 class="gi-carousel__heading accessibility" id="c_10308041714389heading">A carousel of three simple items</h2>
<div class="gi-carousel__controls">
<div class="gi-carousel__progressbar"></div>
<button class="gi-carousel__play gi-carousel__play--paused" data-action="start">
<span class="gi-carousel__playtext">Play slides</span>
<span class="gi-carousel__pausetext">Pause slides</span>
</button>
<button class="gi-carousel__previous">
<span class="gi-carousel__previoustext">Previous slide</span>
</button>
<button class="gi-carousel__next">
<span class="gi-carousel__nexttext">Next slide</span>
</button>
</div>
<div class="gi-carousel__slides">
<ul class="gi-carousel__list gi-carousel__list--forward" aria-live="polite">
<li class="gi-carousel__slide gi-carousel__slide--selected" id="c_10308041714389slide0">
<h3>First item</h3>
<strong>First item summary text</strong>
<p>First item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--right" id="c_10308041714389slide1" aria-hidden="true">
<h3>Second item</h3>
<strong>Second item summary text</strong>
<p>Second item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--left" id="c_10308041714389slide2" aria-hidden="true">
<h3>Third item</h3>
<strong>Third item summary text</strong>
<p>Third item text content</p>
</li>
</ul>
</div>
<div class="gi-carousel__linkswrapper">
<ul class="gi-carousel__links">
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn gi-carousel__itemlinkbtn--selected"
data-slide="c_10308041714389slide0">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">1</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308041714389slide1">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">2</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308041714389slide2">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">3</span>
</button>
</li>
</ul>
</div>
<div class="gi-carousel__liveregion accessibility" aria-live="polite" aria-atomic="true">Item 1 of 3</div>
</section>
<script>gi.carousel.initialise("c_10308041714389")</script><comp:carousel var="item" items="#{frontEndMocksAction.threeSimpleItems}" accessibleHeading="A carousel of three simple items" allowPlay="false">
<h3>#{item.title}</h3>
<strong>#{item.summary}</strong>
<p>#{item.content}</p>
</comp:carousel>@helper RenderCarouselSlide(SimpleItem item){
<h3>@item.Title</h3>
<strong>@item.Summary</strong>
<p>@item.Content</p>
}
@{
Html.Carousel(new CarouselSettings<SimpleItem>
{
SlideItems = items,
RenderSlide = (item) => RenderCarouselSlide(item),
AccessibleHeading = "A carousel of three simple items",
ShowStartStopButton = false
});
}
Play interval
A carousel with the playInterval attribute set to "5000".
data-play-interval="5000"
The play interval attribute is the interval in milliseconds between the carousel items when the carousel is playing.
The default value is 10000 and should be an appropriate delay for most circumstances.
Values less than 2000 will prevent the "loading" bar from appearing.
A carousel of three simple items
Item 1 of 3
<section class="gi-carousel" aria-labelledby="c_10308043185768heading" id="c_10308043185768"
data-live-region-text="Item {0} of {1}" data-allow-play="true" data-play-interval="5000" data-animate-fade="false"
data-animate-slide="false" data-is-looping="true" data-slides-to-display="1" data-slides-to-move="1"
data-slides-match-height="false" data-is-swiper="false" data-layout-order="controls-slides-links">
<h2 class="gi-carousel__heading accessibility" id="c_10308043185768heading">A carousel of three simple items</h2>
<div class="gi-carousel__controls">
<div class="gi-carousel__progressbar"></div>
<button class="gi-carousel__play gi-carousel__play--paused" data-action="start">
<span class="gi-carousel__playtext">Play slides</span>
<span class="gi-carousel__pausetext">Pause slides</span>
</button>
<button class="gi-carousel__previous">
<span class="gi-carousel__previoustext">Previous slide</span>
</button>
<button class="gi-carousel__next">
<span class="gi-carousel__nexttext">Next slide</span>
</button>
</div>
<div class="gi-carousel__slides">
<ul class="gi-carousel__list gi-carousel__list--forward" aria-live="polite">
<li class="gi-carousel__slide gi-carousel__slide--selected" id="c_10308043185768slide0">
<h3>First item</h3>
<strong>First item summary text</strong>
<p>First item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--right" id="c_10308043185768slide1" aria-hidden="true">
<h3>Second item</h3>
<strong>Second item summary text</strong>
<p>Second item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--left" id="c_10308043185768slide2" aria-hidden="true">
<h3>Third item</h3>
<strong>Third item summary text</strong>
<p>Third item text content</p>
</li>
</ul>
</div>
<div class="gi-carousel__linkswrapper">
<ul class="gi-carousel__links">
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn gi-carousel__itemlinkbtn--selected"
data-slide="c_10308043185768slide0">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">1</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308043185768slide1">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">2</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308043185768slide2">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">3</span>
</button>
</li>
</ul>
</div>
<div class="gi-carousel__liveregion accessibility" aria-live="polite" aria-atomic="true">Item 1 of 3</div>
</section>
<script>gi.carousel.initialise("c_10308043185768")</script><comp:carousel var="item" items="#{frontEndMocksAction.threeSimpleItems}" accessibleHeading="A carousel of three simple items" playInterval="5000">
<h3>#{item.title}</h3>
<strong>#{item.summary}</strong>
<p>#{item.content}</p>
</comp:carousel>@helper RenderCarouselSlide(SimpleItem item){
<h3>@item.Title</h3>
<strong>@item.Summary</strong>
<p>@item.Content</p>
}
@{
Html.Carousel(new CarouselSettings<SimpleItem>
{
SlideItems = items,
RenderSlide = (item) => RenderCarouselSlide(item),
AccessibleHeading = "A carousel of three simple items",
IntervalBetweenSlides = 5000
});
}
Is looping
A carousel with the is looping attribute set to "false".
data-is-looping="false"
By default the is looping attribute is set to "true" on the carousel, and this will loop back to the first item after reaching the last one, or to the last item after reaching the first.
This creates a continuous, smooth experience for users. It's especially useful when you want the carousel to feel like a cycle of content.
By setting the is looping attribute to "false", the carousel directional arrow buttons will no longer progress beyond the first and last slides in the carousel, and the play feature will stop once it reaches the last slide.
A carousel with isLooping flag set to false
Item 1 of 5
<section class="gi-carousel" aria-labelledby="c_10308058692616heading" id="c_10308058692616"
data-live-region-text="Item {0} of {1}" data-allow-play="true" data-play-interval="10000" data-animate-fade="false"
data-animate-slide="true" data-is-looping="false" data-slides-to-display="1" data-slides-to-move="1"
data-slides-match-height="false" data-is-swiper="false" data-layout-order="controls-slides-links">
<h3 class="gi-carousel__heading accessibility" id="c_10308058692616heading">A carousel with isLooping flag set to false</h3>
<div class="gi-carousel__controls">
<div class="gi-carousel__progressbar"></div>
<button class="gi-carousel__play gi-carousel__play--paused" data-action="start">
<span class="gi-carousel__playtext">Play slides</span>
<span class="gi-carousel__pausetext">Pause slides</span>
</button>
<button class="gi-carousel__previous" disabled="disabled">
<span class="gi-carousel__previoustext">Previous slide</span>
</button>
<button class="gi-carousel__next">
<span class="gi-carousel__nexttext">Next slide</span>
</button>
</div>
<div class="gi-carousel__slides">
<ul class="gi-carousel__list gi-carousel__list--forward" aria-live="polite">
<li class="gi-carousel__slide gi-carousel__slide--selected" id="c_10308058692616slide0">
<h3>First item</h3>
<strong>First item summary text</strong>
<p>First item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--right" id="c_10308058692616slide1" aria-hidden="true">
<h3>Second item</h3>
<strong>Second item summary text</strong>
<p>Second item text content</p>
</li>
<li class="gi-carousel__slide" id="c_10308058692616slide2" aria-hidden="true">
<h3>Third item</h3>
<strong>Third item summary text</strong>
<p>Third item text content</p>
</li>
<li class="gi-carousel__slide" id="c_10308058692616slide3" aria-hidden="true">
<h3>Fourth item</h3>
<strong>Fourth item summary text</strong>
<p>Fourth item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--left" id="c_10308058692616slide4" aria-hidden="true">
<h3>Fifth item</h3>
<strong>Fifth item summary text</strong>
<p>Fifth item text content</p>
</li>
</ul>
</div>
<div class="gi-carousel__linkswrapper">
<ul class="gi-carousel__links">
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn gi-carousel__itemlinkbtn--selected"
data-slide="c_10308058692616slide0">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">1</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308058692616slide1">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">2</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308058692616slide2">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">3</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308058692616slide3">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">4</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308058692616slide4">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">5</span>
</button>
</li>
</ul>
</div>
<div class="gi-carousel__liveregion accessibility" aria-live="polite" aria-atomic="true">Item 1 of 5</div>
</section>
<script>gi.carousel.initialise("c_10308058692616")</script><comp:carousel var="item" items="#{frontEndMocksAction.threeSimpleItems}" accessibleHeading="A carousel with isLooping flag set to false" isLooping="false">
<h3>#{item.title}</h3>
<strong>#{item.summary}</strong>
<p>#{item.content}</p>
</comp:carousel>@helper RenderCarouselSlide(SimpleItem item){
<h3>@item.Title</h3>
<strong>@item.Summary</strong>
<p>@item.Content</p>
}
@{
Html.Carousel(new CarouselSettings<SimpleItem>
{
SlideItems = items,
RenderSlide = (item) => RenderCarouselSlide(item),
AccessibleHeading = "A carousel with IsLooping flag set to false",
IsLooping = false
});
}Is swiper
A carousel with the is swiper to move attribute set to "true".
data-is-swiper="true"
Setting the is swiper attribute to "true" on the carousel, enables touch and swipe functionality, allowing users to navigate through the slides by swiping on touch devices.
This enhances the user experience, particularly on mobile devices, by providing a more intuitive way to browse through content.
A swiper layout carousel displaying 1 slide at a time
<section class="gi-carousel gi-carousel--nojs" aria-labelledby="c_29730296444256heading" id="c_29730296444256" data-live-region-text="Item {0} of {1}" data-allow-play="true" data-play-interval="10000" data-animate-fade="false" data-animate-slide="false" data-is-looping="true" data-slides-to-display="1" data-slides-to-move="1" data-slides-match-height="false" data-is-swiper="true" data-layout-order="controls-slides-links"><h2 class="gi-carousel__heading accessibility" id="c_29730296444256heading">A swiper layout carousel displaying 1 slide at a time</h2>
<div class="gi-carousel__controls">
<div class="gi-carousel__progressbar"></div>
<button class="gi-carousel__play gi-carousel__play--paused" hidden="" data-action="start">
<span class="gi-carousel__playtext">Play slides</span>
<span class="gi-carousel__pausetext">Pause slides</span>
</button>
<button class="gi-carousel__previous" hidden="">
<span class="gi-carousel__previoustext">Previous slide</span>
</button>
<button class="gi-carousel__next" hidden="">
<span class="gi-carousel__nexttext">Next slide</span>
</button>
</div>
<div class="gi-carousel__slides">
<ul class="gi-carousel__list">
<li class="gi-carousel__slide" id="c_29730296444256slide0">
<h3>First item</h3>
<strong>First item summary text</strong>
<p>First item text content</p>
</li>
<li class="gi-carousel__slide" id="c_29730296444256slide1">
<h3>Second item</h3>
<strong>Second item summary text</strong>
<p>Second item text content</p>
</li>
<li class="gi-carousel__slide" id="c_29730296444256slide2">
<h3>Third item</h3>
<strong>Third item summary text</strong>
<p>Third item text content</p>
</li>
</ul>
</div>
<div class="gi-carousel__linkswrapper">
<ul class="gi-carousel__links">
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_29730296444256slide0" hidden="">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">1</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_29730296444256slide1" hidden="">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">2</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_29730296444256slide2" hidden="">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">3</span>
</button>
</li>
</ul>
</div>
<div class="gi-carousel__liveregion accessibility" hidden="">
</div>
</section>
<script>gi.carousel.initialise("c_29730296444256")</script><comp:carousel var="item" items="#{frontEndMocksAction.threeSimpleItems}" accessibleHeading="A swiper layout carousel displaying 1 slide at a time" isSwiper="true">
<h3>#{item.title}</h3>
<strong>#{item.summary}</strong>
<p>#{item.content}</p>
</comp:carousel>@helper RenderCarouselSlide(SimpleItem item){
<h3>@item.Title</h3>
<strong>@item.Summary</strong>
<p>@item.Content</p>
}
@{
Html.Carousel(new CarouselSettings<SimpleItem>
{
SlideItems = items,
RenderSlide = (item) => RenderCarouselSlide(item),
AccessibleHeading = "A swiper layout carousel displaying 1 slide at a time",
IsSwiper = true
});
}
Slides to display
A carousel with the slides to display attribute set to "2".
data-slides-to-display="2"
Setting the slides to display attribute on the carousel controls how many slides are shown at once in the carousel. This allows you to adjust the display to fit the content and layout, whether you want to show a single slide or multiple slides at a time.
A carousel displaying 2 slides
Item 1, 2 of 5
<section class="gi-carousel" aria-labelledby="c_10308063161172heading" id="c_10308063161172" data-live-region-text="Item {0} of {1}" data-allow-play="true" data-play-interval="10000" data-animate-fade="false" data-animate-slide="false" data-is-looping="false" data-slides-to-display="2" data-slides-to-move="1" data-slides-match-height="false" data-is-swiper="false" data-layout-order="controls-slides-links">
<h2 class="gi-carousel__heading accessibility" id="c_10308063161172heading">A carousel displaying 2 slides</h2>
<div class="gi-carousel__controls">
<div class="gi-carousel__progressbar"></div>
<button class="gi-carousel__play gi-carousel__play--paused" data-action="start">
<span class="gi-carousel__playtext">Play slides</span>
<span class="gi-carousel__pausetext">Pause slides</span>
</button>
<button class="gi-carousel__previous">
<span class="gi-carousel__previoustext">Previous slide</span>
</button>
<button class="gi-carousel__next">
<span class="gi-carousel__nexttext">Next slide</span>
</button>
</div>
<div class="gi-carousel__slides">
<ul class="gi-carousel__list gi-carousel__list--forward" aria-live="polite">
<li class="gi-carousel__slide gi-carousel__slide--selected" id="c_10308063161172slide0">
<h3>First item</h3>
<strong>First item summary text</strong>
<p>First item text content</p>
</li>
<li class="gi-carousel__slide" id="c_10308063161172slide1">
<h3>Second item</h3>
<strong>Second item summary text</strong>
<p>Second item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--right" id="c_10308063161172slide2" aria-hidden="true">
<h3>Third item</h3>
<strong>Third item summary text</strong>
<p>Third item text content</p>
</li>
<li class="gi-carousel__slide" id="c_10308063161172slide3" aria-hidden="true">
<h3>Fourth item</h3>
<strong>Fourth item summary text</strong>
<p>Fourth item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--left" id="c_10308063161172slide4" aria-hidden="true">
<h3>Fifth item</h3>
<strong>Fifth item summary text</strong>
<p>Fifth item text content</p>
</li>
</ul>
</div>
<div class="gi-carousel__linkswrapper">
<ul class="gi-carousel__links">
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn gi-carousel__itemlinkbtn--selected" data-slide="c_10308063161172slide0">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">1</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308063161172slide1">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">2</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308063161172slide2">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">3</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308063161172slide3">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">4</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_10308063161172slide4">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">5</span>
</button>
</li>
</ul>
</div>
<div class="gi-carousel__liveregion accessibility" aria-live="polite" aria-atomic="true">Item 1, 2 of 5</div>
</section>
<script>gi.carousel.initialise("c_10308063161172")</script>
<comp:carousel var="item" items="#{frontEndMocksAction.fiveSimpleItems}" accessibleHeading="A carousel displaying 2 slides" slidesToDisplay="2">
<h3>#{item.title}</h3>
<strong>#{item.summary}</strong>
<p>#{item.content}</p>
</comp:carousel>@helper RenderCarouselSlide(SimpleItem item){
<h3>@item.Title</h3>
<strong>@item.Summary</strong>
<p>@item.Content</p>
}
@{
Html.Carousel(new CarouselSettings<SimpleItem>
{
SlideItems = items,
RenderSlide = (item) => RenderCarouselSlide(item),
AccessibleHeading = "A carousel displaying 2 slides",
SlidesToDisplay = 2
});
}Slides to move
A carousel with the slides to move attribute set to "2".
data-slides-to-move="2"
Setting the slides to move attribute on the carousel controls how many slides move at once when users navigate through the carousel. Whether you want to move one slide at a time or a few, this setting gives you the flexibility to adjust the pace.
A carousel displaying 2 slides
Item 1, 2 of 5
<section class="gi-carousel" aria-labelledby="c_13174888953167heading" id="c_13174888953167"
data-live-region-text="Item {0} of {1}" data-allow-play="true" data-play-interval="10000" data-animate-fade="false"
data-animate-slide="false" data-is-looping="true" data-slides-to-display="2" data-slides-to-move="2"
data-slides-match-height="false" data-is-swiper="false" data-layout-order="controls-slides-links">
<h2 class="gi-carousel__heading accessibility" id="c_13174888953167heading">A carousel displaying 2 slides</h2>
<div class="gi-carousel__controls">
<div class="gi-carousel__progressbar"></div>
<button class="gi-carousel__play gi-carousel__play--paused" data-action="start">
<span class="gi-carousel__playtext">Play slides</span>
<span class="gi-carousel__pausetext">Pause slides</span>
</button>
<button class="gi-carousel__previous">
<span class="gi-carousel__previoustext">Previous slide</span>
</button>
<button class="gi-carousel__next">
<span class="gi-carousel__nexttext">Next slide</span>
</button>
</div>
<div class="gi-carousel__slides">
<ul class="gi-carousel__list gi-carousel__list--forward" aria-live="polite">
<li class="gi-carousel__slide gi-carousel__slide--selected" id="c_13174888953167slide0">
<h3>First item</h3>
<strong>First item summary text</strong>
<p>First item text content</p>
</li>
<li class="gi-carousel__slide" id="c_13174888953167slide1">
<h3>Second item</h3>
<strong>Second item summary text</strong>
<p>Second item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--right" id="c_13174888953167slide2" aria-hidden="true">
<h3>Third item</h3>
<strong>Third item summary text</strong>
<p>Third item text content</p>
</li>
<li class="gi-carousel__slide" id="c_13174888953167slide3" aria-hidden="true">
<h3>Fourth item</h3>
<strong>Fourth item summary text</strong>
<p>Fourth item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--left" id="c_13174888953167slide4" aria-hidden="true">
<h3>Fifth item</h3>
<strong>Fifth item summary text</strong>
<p>Fifth item text content</p>
</li>
</ul>
</div>
<div class="gi-carousel__linkswrapper">
<ul class="gi-carousel__links">
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn gi-carousel__itemlinkbtn--selected"
data-slide="c_13174888953167slide0">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">1</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_13174888953167slide1">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">2</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_13174888953167slide2">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">3</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_13174888953167slide3">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">4</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="c_13174888953167slide4">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">5</span>
</button>
</li>
</ul>
</div>
<div class="gi-carousel__liveregion accessibility" aria-live="polite" aria-atomic="true">Item 1, 2 of 5</div>
</section>
<script>gi.carousel.initialise("c_13174888953167")</script><comp:carousel var="item" items="#{frontEndMocksAction.fiveSimpleItems}" accessibleHeading="A carousel displaying 2 slides" slidesToDisplay="2" slidesToMove="2">
<h3>#{item.title}</h3>
<strong>#{item.summary}</strong>
<p>#{item.content}</p>
</comp:carousel>@helper RenderCarouselSlide(SimpleItem item){
<h3>@item.Title</h3>
<strong>@item.Summary</strong>
<p>@item.Content</p>
}
@{
Html.Carousel(new CarouselSettings<SimpleItem>
{
SlideItems = items,
RenderSlide = (item) => RenderCarouselSlide(item),
AccessibleHeading = "A carousel displaying 2 slides",
SlidesToDisplay = 2,
SlidesToMove = 2
});
}Slides match height
A carousel with the slides match height to move attribute set to "true".
data-slides-match-height="true"
Setting the slides match height attribute to "true" on a carousel will ensure that all the slides in the carousel maintain the same height, providing a consistent and uniform appearance. This helps to keep the layout clean and aligned, even when the content within each slide varies.
A carousel with matched heights
Item 1 of 8
<section class="gi-carousel" aria-labelledby="match_heightheading" id="match_height"
data-live-region-text="Item {0} of {1}" data-allow-play="false" data-play-interval="10000" data-animate-fade="false"
data-animate-slide="false" data-is-looping="true" data-slides-to-display="1" data-slides-to-move="1"
data-slides-match-height="true" data-is-swiper="false" data-layout-order="controls-slides-links">
<h2 class="gi-carousel__heading accessibility" id="match_heightheading">A carousel with matched heights</h2>
<div class="gi-carousel__controls">
<div class="gi-carousel__progressbar"></div>
<button class="gi-carousel__play gi-carousel__play--paused" data-action="start">
<span class="gi-carousel__playtext">Play slides</span>
<span class="gi-carousel__pausetext">Pause slides</span>
</button>
<button class="gi-carousel__previous">
<span class="gi-carousel__previoustext">Previous slide</span>
</button>
<button class="gi-carousel__next">
<span class="gi-carousel__nexttext">Next slide</span>
</button>
</div>
<div class="gi-carousel__slides">
<ul class="gi-carousel__list gi-carousel__list--forward" aria-live="polite" style="">
<li class="gi-carousel__slide gi-carousel__slide--selected" id="match_heightslide0"
style="min-height: 238px;">
<h3>First item</h3>
<strong>First item summary text</strong>
<p>First item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--right" id="match_heightslide1" aria-hidden="true"
style="min-height: 238px;">
<h3>Second item</h3>
<strong>Second item summary text</strong>
<p>Second item text content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget dapibus metus, at tempor sapien. </p>
</li>
<li class="gi-carousel__slide" id="match_heightslide2" aria-hidden="true" style="min-height: 238px;">
<h3>Third item</h3>
<strong>Third item summary text</strong>
<p>Third item text content</p>
</li>
<li class="gi-carousel__slide" id="match_heightslide3" aria-hidden="true" style="min-height: 238px;">
<h3>Fourth item</h3>
<strong>Fourth item summary text</strong>
<p>Fourth item text content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget dapibus metus, at tempor sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget dapibus metus, at tempor sapien. </p>
</li>
<li class="gi-carousel__slide" id="match_heightslide4" aria-hidden="true" style="min-height: 238px;">
<h3>Fifth item</h3>
<strong>Fifth item summary text</strong>
<p>Fifth item text content</p>
</li>
<li class="gi-carousel__slide" id="match_heightslide5" aria-hidden="true" style="min-height: 238px;">
<h3>Sixth item</h3>
<strong>Sixth item summary text</strong>
<p>Sixth item text content</p>
</li>
<li class="gi-carousel__slide" id="match_heightslide6" aria-hidden="true" style="min-height: 238px;">
<h3>Seventh item</h3>
<strong>Seventh item summary text</strong>
<p>Seventh item text content</p>
</li>
<li class="gi-carousel__slide gi-carousel__slide--left" id="match_heightslide7" aria-hidden="true"
style="min-height: 238px;">
<h3>Eighth item</h3>
<strong>Eighth item summary text</strong>
<p>Eighth item text content</p>
</li>
</ul>
</div>
<div class="gi-carousel__linkswrapper">
<ul class="gi-carousel__links">
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn gi-carousel__itemlinkbtn--selected"
data-slide="match_heightslide0">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">1</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="match_heightslide1">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">2</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="match_heightslide2">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">3</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="match_heightslide3">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">4</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="match_heightslide4">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">5</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="match_heightslide5">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">6</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="match_heightslide6">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">7</span>
</button>
</li>
<li class="gi-carousel__itemlink">
<button class="gi-carousel__itemlinkbtn" data-slide="match_heightslide7">
<span class="accessibility">Show content</span>
<span class="gi-carousel__itemnumber">8</span>
</button>
</li>
</ul>
</div>
<div class="gi-carousel__liveregion accessibility" aria-live="polite" aria-atomic="true">Item 1 of 8</div>
</section>
<script>gi.carousel.initialise("match_height")</script>
<style>
#match_height .gi-carousel__slide {
background: #f1f1f1;
border: solid 5px #fff;
border-radius: 20px;
}
</style><comp:carousel var="item" items="#{frontEndMocksAction.eightSimpleItems}"
accessibleHeading="A carousel with matched heights"
allowPlay="false"
slidesMatchHeight="true"
id="match_height">
<h2>#{item.title}</h2>
<strong>#{item.summary}</strong>
<p>#{item.content}</p>
</comp:carousel>
<style>
#match_height .gi-carousel__slide {
background: #f1f1f1;
border: solid 5px #fff;
border-radius: 20px;
}
</style>@helper RenderCarouselSlide(SimpleItem item){
<h3>@item.Title</h3>
<strong>@item.Summary</strong>
<p>@item.Content</p>
}
@{
Html.Carousel(new CarouselSettings<SimpleItem>
{
SlideItems = items,
RenderSlide = (item) => RenderCarouselSlide(item),
AccessibleHeading = "A carousel displaying 2 slides",
ShowStartStopButton = false,
SlidesMatchHeight = true,
HtmlId = "match_heigh"
});
<style>
#match_height .gi-carousel__slide {
background: #f1f1f1;
border: solid 5px #fff;
border-radius: 20px;
}
</style>
}Share this page
