US English (US)
BS Bosnian

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Book a Demo
  • Product Updates
  • Contact Us
English (US)
US English (US)
BS Bosnian
  • Home
  • Customization
  • Customization Guides
  • Advanced Customization

Displaying Categories as Carousel

A simple guide on how to turn category list into a more interactive component such as carousel

Written by Alever Selosa

Updated at October 18th, 2021, by Emil Hajric

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Getting Started
    Users Accessibility New to Helpjuice? Start Here Content Management Multiple Languages/Translations & Localization Multilingual Knowledge Bases Analytics Video Tutorials
  • Customization
    Customization Guides
  • API V2
  • API V3 and Webhooks
  • Article Editor
  • Billing / Subscription
  • Authentication
  • Pricing
  • Swifty AI Chatbot
  • Swifty AI Helpbar
  • What's New
+ More

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.

categorized carousel carousel categories

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • How Can I Contextualize The Template?
  • Displaying The Most Popular Questions
  • Integrating Your Knowledge Base With Your Ticketing System
  • How To Fix Duplicated Content For SEO Improvement?

Copyright © 2025 - Helpjuice

Helpjuice, Inc. is a registered US Corporation, EIN # 45-2275731

Download W9
  • Help
  • Features
  • Pricing
  • About
  • Careers
  • Customers
  • Blog
  • Case Studies
  • Resources
  • Knowledge Base Examples
  • Privacy Policy
  • Terms of Service

Why is the knowledge base important?

With a knowledge base, you can allow your customers to self-help themselves, thus reducing your customer support by up to 60%. Furthermore, you can also have your team get instant answers to the questions they need without having to email themselves all using knowledge base software.

What is the purpose of a knowledge base?

The purpose of knowledge base software is to allow you to host your knowledge base/corporate wiki in one centralized 'hub'. Both your customers, and employees can now access information within seconds!

Made with from Miami, Bosnia, Morocco & Brasil

+1 (833) 387 3877 support@helpjuice.com
Expand