Overview

Carousel allows you to expose root categories or any loopable items without taking up a lot of space, which is especially useful if you have more than ten main categories to be rendered. Aside from that reason, it makes your KB site more appealing and interactive.

We can easily implement such components by using any third party plugin you want. In this example, we will be using Owl Carousel.

How to do it

1. Insert necessary styles and script references to the Main Layout.

   First step is to get the necessary CSS and JSlinks from the third party carousel site and add those as stylesheet and script tags to the Main Layout (Customize -> Main Layout page)

   CSS:

   <link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">

   <link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">

   JS

   <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>

   <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

   
   
2. Loop through root categories and apply the necessary markup from the carousel plugin

   Go to your Index page, replace the root categories rendering and apply the appropriate code which is patterned from carousel’s documentation. Implement categories looping on the said markup.

   <div class="owl-carousel owl-theme">

       {% for category in root_categories %}

       <div class="category">

           <a href="{{ category.url }}" class="card">

               <span class="icon">{{ category.category_icon_or_image }}</span>

               <h2>{{ category.name }}</h2>

               <p>{{ category.description }}</p>

           </a>

       </div>

       {% endfor %}

   </div>

   
   
3. Initialize the carousel by applying the script to main JS

   In this case, you may just copy paste the setup and configuration code block that you got from the carousel’s documentation.

   $('.owl-carousel').owlCarousel({

       loop:true,

       margin:10,

       nav:true,

       responsive:{

           0:{

               items:1

           },

           600:{

               items:2

           },

           1000:{

               items:3

           }

       }

   })

   
   
4. Style the Carousel based on the customer's preference

   And there you go. You can now apply finishing touches to make it more appealing, and fit to your preference.