Slide 1
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:
|
|
- Line 1 - Bissetii’s carousel needs you to apply
Carousel
class tag and specify the minimal height (min-height
) using thestyle=
inline CSS attributes. Withoutmin-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, andCarousel-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
andCarousel-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:
|
|
- 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):
|
|
Epilogue
That’s all for carousel component in Bissetii. If you have any question, feel free to raise your query in our Issues Section.