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>

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>

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

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):

 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.