Select Page

How To Add Carousel Slider In Any CMS Platforms Like WP, Learnworlds

A carousel slider can be the best solution to simplified heavy images or content websites, especially for landing pages. In fact, carousel sliders attract visitors’ attention, and they are very effective in bringing your message in a concise style. 

This blog will teach you how to integrate the carousel slider in different platforms like WordPress, Learnworlds, Kartra, or even an independent HTML website. 

Pros and Cons of Using Carousel Slider

Pros

  • The carousel slider is helpful to showcase your business, product pages, or image gallery without occupying too much space.
  • It helps your website be more visually appealing.

Cons

  • Not recommended if you have little content and images, your website will look too empty. 

Reference And Ingredients For Carousel Slider

ADD in the HEAD section:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Add in the BODY section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:4
}
}
})
</script>

HTML:

<div class="owl-carousel owl-theme"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> <div class="item"><h4>11</h4></div> <div class="item"><h4>12</h4></div> </div>

CSS Style (Optional)

/*slider */
.item {
    height: 400px;
    background: black;
    border-radius: 10px;
}

.item h4 {
    text-align: center;
    color: #fff;
    z-index: 9999;
    top: 50%;
    width: 250px;
    max-width: 80%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    font-family: "Poppins";
    font-size: 1.5rem;
}


.owl-carousel.owl-theme.owl-loaded.owl-drag {
    max-width: 100%;
    margin: 0 auto;
    width: 1140px;
}

Reference:

How To Add Carousel Slider in Learnworlds Platform

  1. Add The CDN To Integrate the OWL Carousel Plugin then put the CDN links in the HEAD section. Check the video from 1:36 to 3:15
  2. The same process on step one but put the scripts in the <body> section. Watch the (3:16 – 4:50) for reference. ( Note: You don’t need to add the jQuery CDN since Learnworlds has already built-in jQuery)
  3. Copy the HTML Code (see the ingredients section) then add a “Embed Code” Widget on your Learnworlds page to paste the HTML. You can always play around with the elements inside Carousel. (5:36 – 7:18)
  4. If you want to overwrite styling on your owl carousel plugin, you can always add a custom CSS located at “Dynamic CSS” section. ( 9:26 – 9:44 )

Want more web developments hacks and how-tos? Check other relevant posts below: