Carousels

Contents

1. Get Started
2. Grid
3. Containers
4. Navbars
5. Positioning
6. Responsive
7. Typography
8. Images
9. Tables
10. Buttons
11. Forms
12. Callouts
13. Carousels

Slick

Odin integrates Slick by Ken Wheeler. The example code below can be included without creating custom carousel classes or configuring any JavaScript. If you desire further customization, see the official documentation.

Basic Carousel

Create a single-item carousel by appling the class carousel to a div element. Images or other carousel content should be contained in nested div tags.

  
<div class="carousel">
  <div class="carousel-item"><img src="image_1.jpg" alt=""></div>
  <div class="carousel-item"><img src="image_2.jpg" alt=""></div>
  <div class="carousel-item"><img src="image_3.jpg" alt=""></div>
</div>
  

In addition to the markup above, carousels require JQuery and the odin.js file. Include the following lines at the end of the body element for each page using the slideout navigation:

  
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="path/to/odin.0.11.2.js"></script>
  

Be sure to that the paths and version numbers are correct for your site's file structure. JQuery must be loaded before the odin.js file. In this example, JQuery is being loaded from a CDN.

Customization

Use the data-slick attribute to customize the carousel.

Navigation Dots

  
<div class="carousel" data-slick='{"dots": true}'>
  <div class="carousel-item"><img src="image_1.jpg" alt=""></div>
  <div class="carousel-item"><img src="image_2.jpg" alt=""></div>
  <div class="carousel-item"><img src="image_3.jpg" alt=""></div>
</div>
  

Autoplay

  
<div class="carousel" data-slick='{"autoplay": true, "autoplaySpeed": 3000}'>
  <div class="carousel-item"><img src="image_1.jpg" alt=""></div>
  <div class="carousel-item"><img src="image_2.jpg" alt=""></div>
  <div class="carousel-item"><img src="image_3.jpg" alt=""></div>
</div>
  

Multiple Items

  
<div class="carousel" data-slick='{"slidesToShow": 3, "slidesToScroll": 3}'">
  <div class="carousel-item"><img src="image_1.jpg" alt=""></div>
  <div class="carousel-item"><img src="image_2.jpg" alt=""></div>
  <div class="carousel-item"><img src="image_3.jpg" alt=""></div>
  <div class="carousel-item"><img src="image_4.jpg" alt=""></div>
  <div class="carousel-item"><img src="image_5.jpg" alt=""></div>
  <div class="carousel-item"><img src="image_6.jpg" alt=""></div>
</div>
  

More

Additional usage examples will be posted soon!