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
Sass Styling Parts
The Sass module responsible for styling carousel is located in:
_Base.scss is the fallback horizontal carousel version.
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.
To create vanilla HTML carousel, the HTML code pattern is as follows:
- Line 1 - Bissetii’s carousel needs you to apply
Carouselclass 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-viewportwhich is responsible for displaying the content, and
Carousel-nav-panelthat 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
- 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.
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
- Line 6 - Set
autoplaysince Bissetii also enables auto-play by default.
- Line 7 - Set
delayfor 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
Rendering Carousel Examples
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):
That’s all for carousel component in Bissetii. If you have any question, feel free to raise your query in our Issues Section.