How to Create Divi Carousel without Plugin?

Team DiviFlash

Updated: March 31, 2024
Table of Contents

In this day and age, carousels are a common component of a website that improves user experience and lets you creatively display a lot of information. However, creating a carousel requires a plugin that can be expensive sometimes.

That’s why in this post we will show you how to create a Divi carousel without a plugin in 4 steps.   

Step One: Add a New Section, Row, and Modules

Choose where you want to create the carousel and add a new section and a single row.

Now, add multiple modules in this single row, the number of modules should be the same as the number of carousel items. You can add any module you want, here we chose the blurb module and added six of them.

This would look better in the wireframe view.

Step Two: Add CSS Class to Row and Modules

In this step, we will add a CSS class to the row and all the blurb modules.

First, go to row settings > column settings > advanced.

Then copy the following text in the CSS Class field: diviflash-carousel-slider

Then go to blurb settings > advanced and paste the following text in the CSS Class field: diviflash-carousel.

We need to extend this CSS Class to all the modules. 

Step Three: Create a Separate One-Column Row and Paste the CSS Code

Now, we need to create another one-column row and use the code module.

Then, you need to paste the following CSS code into the code module.

<style>

.slick-slider {

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  -webkit-touch-callout: none;

  -khtml-user-select: none;

  ms-touch-action: pan-y;

  touch-action: pan-y;

  -webkit-tap-highlight-color: transparent;

}

.slick-list {

  position: relative;

  display: block;

  overflow-x: hidden;

  margin: 0;

  padding: 0 0 0px;

}

.slick-track:before, .slick-track:after {

  display: table;

  content: '';

}

.slick-slide {

  position: relative;

  float: left;

  height: 100%;

  min-height: 1px;

}

.diviflash-carousel-slider .slick-arrow, .diviflash-carousel-slider .slick-arrow:hover, .diviflash-carousel-slider .slick-arrow:focus {

position: absolute;

font-size: 0;

line-height: 0;

padding: 0;

color: transparent;

outline: none;

background: rgba(122,105,230,0.3);

border: none;

cursor: pointer;

top: 50%;

transform: translateY(-50%);

z-index: 100;

height: 50px;

vertical-align: middle;

border-radius: 50%;

width: 50px;

}

.diviflash-carousel-slider .slick-prev { left: -50px; }

.diviflash-carousel-slider .slick-next { right: -50px; }

.diviflash-carousel-slider .slick-arrow:before {

font-family: ETmodules;

color: #000;

background: transparent;

opacity: 1;

font-size: 46px;

vertical-align: middle;

color: #7a69e6;

text-align: center;

}

.diviflash-carousel-slider .slick-arrow:hover:before { opacity: 0.8; }

.diviflash-carousel-slider .slick-prev:before { content: '\34'; }

.diviflash-carousel-slider .slick-next:before { content: '\35'; } 

.entry-content ul.slick-dots {

  position: absolute;

  bottom: 0;

  display: block;

  width: 100%;

  padding: 0;

  margin: 0;

  list-style: none;

  text-align: center;

}

.slick-dots li {

  position: relative;

  display: inline-block;

  margin: 0 5px;

  padding: 0;

  cursor: pointer;

}

.slick-dots li button {

font-size: 0;

line-height: 0;

display: block;

width: 10px;

height: 10px;

padding: 0;

cursor: pointer;

color: transparent;

border: 0;

outline: none;

background-color: #B7B7B7;

  border-radius: 10px;

}

.slick-dots li.slick-active button { background-color: #f7828e; }

@media(max-width: 980px) {

.diviflash-carousel-slider .slick-prev { left: -32px; }

.diviflash-carousel-slider .slick-next { right: -30px; }

}

@media(max-width: 499px) {

.diviflash-carousel-slider .slick-prev { left: -26px; }

.diviflash-carousel-slider .slick-next { right: -24px; }

}

</style>

<script src="https://diviflash.com/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS8=ajax/libs/slick-carousel/1.6.0/slick.js"></script>

<script>

jQuery(document).ready(function() {

jQuery('.diviflash-carousel-slider').slick({

    dots: true,

    slidesToShow: 3,

    slidesToScroll: 1,

    responsive: [

      {

        breakpoint: 980,

        settings: {

          slidesToShow: 2

        }

      },

      {

        breakpoint: 767,

        settings: {

          slidesToShow: 1

        }

      }

    ]

  }); 

});

</script>

After pasting the code, this should appear on your webpage.

Step Four: Customize the Carousel

Now that you have created the basic carousel, all that’s left is to customize the carousel items. Each of the blurb modules you have added is one of the carousel items. So, adding content to the blurb module means adding content to the carousel items. Also, you need to add some spacing between each carousel item.

Limits of Creating Divi Carousel Without Plugin

Although creating a Divi carousel without a plugin is fairly simple, it has a lot of limitations. For instance, you only get to have the slider carousel and you don’t get many customization options. 

Unless you have advanced coding knowledge or have enough budget to hire a developer. Even so, you will have to spend a lot of time to get the carousel that you want. 

That’s why if you want a carousel that enhances your website, we recommend you use a carousel plugin.

Create the Best Carousel With DiviFlash

After reading this article, you should know how to create a Divi carousel without a plugin. This process is only suitable if you want a plain-looking slider carousel.

However, with DiviFlash’s Advanced Carousel Module, you get all the best features you need to create the most amazing carousels with ease. 

Team DiviFlash

At DiviFlash, we are more than just a team – we are a collective of Dev Experts, Word Artists, Design Virtuosos, and Marketing Maestros, all united by our profound expertise in Divi and WordPress. Our mission is to provide you with accurate, insightful, and in-depth content aimed at enriching your understanding of Divi, WordPress, and the art of web design.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *