Carousels - CGU Brand

.carousel

Carousels are implemented with the Slick Slides library.

Use the .carousel class and the data-slick attribute to render a carousel of the element’s child nodes. Pass your custom options to the data-slick attribute in JSON format:

<div class="carousel" data-slick='{ "arrows":false, "autoplaySpeed": 2000 }'>

<!-- if you want the default options, just include the data-slick attribute with no value -->
<div class="carousel" data-slick>

<div class="carousel" data-slick>
  <div class="carousel__slide">
    <div class="carousel__media">
      <img src="//unsplash.it/1000/560/?image=941" width="1000" height="560" alt="placeholder"/>
    </div>
  </div>
  <div class="carousel__slide">
    <div class="carousel__media">
      <img src="//unsplash.it/1000/560/?image=949" width="1000" height="560" alt="placeholder"/>
    </div>
  </div>
  <div class="carousel__slide">
    <div class="carousel__media">
      <img src="//unsplash.it/1000/560/?image=909" width="1000" height="560" alt="placeholder"/>
    </div>
  </div>
</div>