Government logo | to homepage
Bootstrap Rijkhuisstijl Style Guide
  • Overview
  • 1 atoms
    • 1.1 Buttons
    • 1.2 Form elements
    • 1.3 HTML5 Elements; Grouping content
    • 1.3.1 Block quotes
    • 1.3.2 atoms.grouping.lists
    • 1.4 Icons
    • 1.5 Pagination
    • 1.6 Tables
  • 2 molecules
    • 2.1 Breadcrumb
    • 2.2 Cards
    • 2.2.1 Card horizontal image placement
    • 2.2.2 Header and Footer
    • 2.3 Carousel
    • 2.4 Comments styling
    • 2.5 List group
    • 2.6 Branded tabs menu
    • 2.7 Vertical navigation
    • 2.8 Payoff
    • 2.9 Skipnav
  • 3 organisms
    • 3.1 Header
    • 3.1.1 Header with background image
    • 3.2 Card Deck, vertical cards
    • 3.2.1 Card Deck, horizontal cards with image left
    • 3.2.2 Card Deck, horizontal cards with image right
    • 3.3 Footer

2.3 molecules.carousel Carousel

Toggle example guides Toggle HTML markup

Carousel code is based on Slick Slider.

Example

Slide 1

Naar het buitenland? Lees eerst het reisadvies voor het land van uw bestemming.

Slide 2

Slide 2 content zin met wat tekst

Slide 3

Slide 3 content zin met wat tekst

Slide 4

Slide 4 content zin met wat tekst
Markup: components/molecules/carousel/carousel.twig
<div id="priority" class="carousel">
    <figure class="carousel-slide ">
  <a href="#kssref-molecules-carousel" class="slide-img-link" title="Slide 1" tabindex="-1">
  <img src="http://placehold.it/1200x300/f7f7f7/000000" />
</a>
<div class="slide-nav-link">
  <button class="sr-only sr-only-focusable">Go to slide: Slide 1</button><h3 class="slide-title">Slide 1</h3>
  <a href="#kssref-molecules-carousel" class="slide-content" title="Slide 1">Naar het buitenland? Lees eerst het reisadvies voor het land van uw bestemming.</a>
</div>

  </figure>
    <figure class="carousel-slide ">
  <a href="#kssref-molecules-carousel" class="slide-img-link" title="Slide 2" tabindex="-1">
  <img src="http://placehold.it/1200x300" />
</a>
<div class="slide-nav-link">
  <button class="sr-only sr-only-focusable">Go to slide: Slide 2</button><h3 class="slide-title">Slide 2</h3>
  <a href="#kssref-molecules-carousel" class="slide-content" title="Slide 2">Slide 2 content zin met wat tekst</a>
</div>

  </figure>
    <figure class="carousel-slide ">
  <a href="#kssref-molecules-carousel" class="slide-img-link" title="Slide 3" tabindex="-1">
  <img src="http://placehold.it/1200x300/f7f7f7/000000" />
</a>
<div class="slide-nav-link">
  <button class="sr-only sr-only-focusable">Go to slide: Slide 3</button><h3 class="slide-title">Slide 3</h3>
  <a href="#kssref-molecules-carousel" class="slide-content" title="Slide 3">Slide 3 content zin met wat tekst</a>
</div>

  </figure>
    <figure class="carousel-slide ">
  <a href="#kssref-molecules-carousel" class="slide-img-link" title="Slide 4" tabindex="-1">
  <img src="http://placehold.it/1200x300" />
</a>
<div class="slide-nav-link">
  <button class="sr-only sr-only-focusable">Go to slide: Slide 4</button><h3 class="slide-title">Slide 4</h3>
  <a href="#kssref-molecules-carousel" class="slide-content" title="Slide 4">Slide 4 content zin met wat tekst</a>
</div>

  </figure>
  </div>
Source: components/molecules/carousel/_carousel.scss, line 1