BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Carousel

Overview

Carousels are built to display a revolving selection of content and can be set to automatically revolve or be controlled by the user (or both). They typically appear near the tops of pages, "above the fold."

  • • Number of dots = number of content items ("slides") to be displayed.
  • • Largest dot indicates to the user where they are in the series.
  • • Slides can consist of images or small amounts of text with links out to other pages.
  • • When used for promotional purposes, number of slides should be limited to 5 or less, as it is unlikely users will engage with more than that.

Carousel - 1

 

  • Download Associated Javascript:.js
  • Download Associated Jquery Files:Zip
  • Download Associated CSS Files:Zip


Hide Show CSS
                         
<link rel="stylesheet" href="../assets/patterns/css/carousel/slick.css">
<link rel="stylesheet" href="../assets/patterns/css/carousel/slick-theme.css">
<link rel="stylesheet" href="../assets/patterns/css/carousel/ml-carousel.css">
<style> .ml-slide { width: 100%; background: #cccccc; height: 320px; text-align: center; line-height: 320px; margin: auto auto; color: #9C9C9C; font-size: 25px; } .id-card { background: #fff; border-radius: 5px; height: 210px; line-height: 210px; } </style>
HideShow HTML


<div class="carousel-container">
<div class="ml-carousel slider" id="ml-slider1">
<div class="ml-slide"> Slide 1 </div>
<div class="ml-slide"> Slide 2 </div>
<div class="ml-slide"> Slide 3 </div>
<div class="ml-slide"> slide 4 </div>
<div class="ml-slide"> Slide 5 </div>
</div>
<div class="ml-carousel-control">
<button class="slick-prev" aria-label="Previous" type="button">Previous</button>
<span class="ml-dots"></span>
<button class="slick-next" aria-label="Next" type="button">Next</button>
</div>
</div>

Carousel - 2

 

  • Download Associated Javascript:.js
  • Download Associated Jquery Files:Zip
  • Download Associated CSS Files:Zip


Hide Show CSS
                         
<link rel="stylesheet" href="../assets/patterns/css/carousel/slick.css">
<link rel="stylesheet" href="../assets/patterns/css/carousel/slick-theme.css">
<link rel="stylesheet" href="../assets/patterns/css/carousel/ml-carousel.css">
<style> .ml-slide { width: 100%; background: #cccccc; height: 320px; text-align: center; line-height: 320px; margin: auto auto; color: #9C9C9C; font-size: 25px; } .id-card { background: #fff; border-radius: 5px; height: 210px; line-height: 210px; } </style>
HideShow HTML


<div class="carousel-container-dark">
<div class="ml-carousel-dark slider" id="ml-slider2">
<div class="ml-slide id-card"> Slide 1 </div>
<div class="ml-slide id-card"> Slide 2 </div>
<div class="ml-slide id-card"> Slide 3 </div>
</div>
<div class="ml-carousel-control">
<button class="slick-prev-dark" aria-label="Previous" type="button">Previous</button>
<span class="ml-dots-dark"></span>
<button class="slick-next-dark" aria-label="Next" type="button">Next</button>
</div>
</div>

Examples

 

Sample desktop view only. Not to scale.

overlay
overlay