`Carousel` Component

Carousel component is a dynamic display of content over a same view port. A normal deployment would be album carousel, text-ed card carousel, or video carousel. Bissetii supports this component using CSS only.

This carousel design was inspired by Chris Coyier’s article about CSS-Only Carousel where the CSS implementation was introduced by Christian Schaefer. Its HTML codes were cross-checked with W3C Carousel Code Structure before adopt-and-modify into Bissetii.

This component is available starting from v1.12.1.

Sass Styling Parts

The Sass module responsible for styling carousel is located in:

sass/bissetii/modules/carousel

The default _Base.scss is the fallback horizontal carousel version.

Javascript Parts

This component does not depends on any Javascript codes.

HTML Parts

Bissetii supports a common version of HTML codes for multiple outputs.

General Code Structure

Bissetii uses a general code structure to create the carousel component. This structure varies depending on the type of generated output.

Vanilla HTML

To create vanilla HTML carousel, the HTML code pattern is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<section class="Carousel"
	aria-label="My-Gallery"
	style="min-height: 500px; height: 500px; min-width: 100%;">
	<ol class="Carousel-viewport">
		<li id="carousel-slide-3afar1">
			<article>
				<!-- the content to display -->
			</article>
			<nav>
				<a class="Carousel-previous"
					href="#carousel-slide-2fetj4">
					4
				</a>
				<a class="Carousel-next"
					href="#carousel-slide-33ntj2">
					2
				</a>
			</nav>
		</li>
		<li id="carousel-slide-33ntj2">
			...
		</li>
		...
	</ol>
	<nav class="Carousel-nav-panel"><ol>
		<li><a href="#carousel-slide-3afar1">1</a></li>
		<li><a href="#carousel-slide-33ntj2">2</a></li>
		...
	</ol></nav>
</section>

Line 1 - Bissetii’s carousel needs you to apply Carousel class tag and specify the minimal height (min-height) using the style= inline CSS attributes. Without min-height, browser will not know exactly how tall you need it to be.
Line 4, 25 - Bissetii’s carousel has 2 primary elements: Carousel-viewport which is responsible for displaying the content, and Carousel-nav-panel that is responsible to list each contents as navigation.
Line 5 - Each content list item must have an unique id= attribute for scrolling. Otherwise, you can’t navigate across each slides.
Line 6, 9 - Inside each content list item, there are 2 strict HTML tags: <article> tag for containing the display contents, and <nav> tag, an invisible links on each sides of the carousel for switching next or previous slide.
Line 10, 14 - Both previous and next links must be attached with their respective Carousel-previous and Carousel-next for styling.
Line 11, 15 - Use anchor link to anchor against the corresponding next and previous list item ID tag. DO NOT place anything else in it apart for text number.
Line 26, 27 - Use achor link to anachor against its corresponding content list item. This link will be rendered as a circle panel at the bottom of the Carousel. DO NOT place anything else in it apart for text number.

AMP HTML

Before using AMP HTML output type, you need to ensure you had imported the carousel AMP Javascript module as stated in AMP Documentation. Otherwise, the carousel will not work.

To create AMP HTML carousel, the HTML code pattern is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<amp-carousel
	width="1200px"
	height="500px"
	layout="responsive"
	type="slides"
	autoplay
	delay="5000">
	<article>
		<!-- the slide 1 content to display -->
	</article>
	<article>
		<!-- the slide 2 content to display -->
	</article>
	...
</amp-carousel>

Line 1 - Use AMP’s own <amp-carousel> tag instead. The module did a lot of renderings out of the box.
Line 2 - Specify the carousel width.
Line 3 - Specify the carousel height.
Line 4 - Specify the carousel layout responsiveness.
Line 5 - Specify the carousel type. Default to slides.
Line 6 - Set autoplay since Bissetii also enables auto-play by default.
Line 7 - Set delay for the slide duration in milliesecond.
Line 11-13 - Each slides are wrapped around its first level child. The example above uses <article> to wrap each slide into a single component.
Line 15 - remember to close the HTML semantic with </amp-carousel>.

Rendering Carousel Examples

Here are some rendering examples for carousel depending on commonly used use-cases.

Picture Gallery

Carousel is often heavily used for displaying image gallery. Bissetii renders image-only gallery as follows (depending on your viewing output type (e.g. AMPHTML will see AMP HTML codes):

Slide 1
mygallery-slide-3 mygallery-slide-2
Slide 2
mygallery-slide-1 mygallery-slide-3
Slide 3
mygallery-slide-2 mygallery-slide-3

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<section class="Carousel"
	aria-label="MyGallery"
	style="
		min-height:500px;
		height:500px;
		min-width:auto;
		width:auto;">
	<ol class="Carousel-viewport">
		<li id="mygallery-slide-1">
			<article><blockquote>
<p>Slide 1</p>
</blockquote>
</article>
			<nav>
				<a class="Carousel-previous"
					href="#mygallery-slide-3">mygallery-slide-3</a>
				<a class="Carousel-next"
					href="#mygallery-slide-2">mygallery-slide-2</a>
			</nav>
		</li>
		<li id="mygallery-slide-2">
			<article><blockquote>
<p>Slide 2</p>
</blockquote>
</article>
			<nav>
				<a class="Carousel-previous"
					href="#mygallery-slide-1">mygallery-slide-1</a>
				<a class="Carousel-next"
					href="#mygallery-slide-3">mygallery-slide-3</a>
			</nav>
		</li>
		<li id="mygallery-slide-3">
			<article><blockquote>
<p>Slide 3</p>
</blockquote>
</article>
			<nav>
				<a class="Carousel-previous"
					href="#mygallery-slide-2">mygallery-slide-2</a>
				<a class="Carousel-next"
					href="#mygallery-slide-3">mygallery-slide-3</a>
			</nav>
		</li>
	</ol>
<nav class="Carousel-nav-panel"><ol>
	<li><a href="#mygallery-slide-1">mygallery-slide-1</a></li>
	<li><a href="#mygallery-slide-2">mygallery-slide-2</a></li>
	<li><a href="#mygallery-slide-3">mygallery-slide-3</a></li>
</ol></nav>
</section>

Epilogue

That’s all for carousel component in Bissetii. If you have any question, feel free to raise your query in our Issues Section.