How to Create a Divi Carousel Without a Plugin

by | Nov 9, 2021 | Divi Tutorials | 27 comments

We are back with another awesome Divi tutorial! And in today’s tutorial, we’re showing you how to create a Divi Carousel WITHOUT using a plugin! 😍

Not only do you not need to purchase a plugin, but this carousel tutorial is also EXTREMELY lightweight. All the carousel resources are 100% contained to the page you place it on, and it won’t slow down your website!

BONUS: You can get a FREE Divi Carousel Layout when you subscribe to the Divi Life Email List 🥳

(keep reading to see the free carousel layout and to download the freebie)

Carousels are super popular right now in web design, however they can be rather resource intensive. And most of the Carousel plugins/modules that are available today will load ALL the plugin’s resources on ALL pages of your website no matter what.

We discovered this the hard way when we were building our new Divi Popup demo site for Divi Overlays. So we ditched the plugin we were originally using and built the carousels manually using the Slick.JS Slider Carousel Framework. It’s worth noting that just about every Carousel module or plugin on the market uses either Slick or Swiper to power the carousels. So with the method in today’s tutorial (adding the carousel framework to just one self-contained page), you’re getting the same functionality but without the full site bloat!

After we built the testimonial carousels shown above, we decided to release a pack of Divi Carousel Layouts (19 total). If you like the sound of simply importing layouts to the Divi Library and then customizing the layouts with Divi, then definitely check out the carousel layouts! Okay, let’s take a look at what we’ll be creating today! (And if you want to skip the tutorial and download the Divi carousel layout for FREE, click here)

The Divi Carousel Layout We’ll Be Creating

Social Media Management

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut

Audience Analytics

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut

SEO

Lorem ipsum dolor sit amet,  adipiscing elit, sed do eiusmod tempor incididunt ut

Copywriting

Lorem ipsum dolor sit amet,  adipiscing elit, sed do eiusmod tempor incididunt ut

Team Training

Lorem ipsum dolor sit amet,  adipiscing elit, sed do eiusmod tempor incididunt ut

Website Development

Lorem ipsum dolor sit amet,  adipiscing elit, sed do eiusmod tempor incididunt ut

Brand Design & Strategy

Lorem ipsum dolor sit amet,  adipiscing elit, sed do eiusmod tempor incididunt ut

Email Marketing

Lorem ipsum dolor sit amet,  adipiscing elit, sed do eiusmod tempor incididunt ut
Pretty slick, huh? 😉 Okay let’s dive into the tutorial now. There’s really only three main steps to achieving the carousel:

  1. Create a one-column row with desired carousel items (modules)
  2. Add the CSS class to the column & modules (to define the carousel & carousel items)
  3. Add the carousel CSS/JS code to the page in a code module

Not so bad right? Let’s get started!

Step One: Create a One-Column Row with Desired Carousel Items (Modules)

We’ll be creating the carousel within the Digital Marketing Layout by Elegant Themes, and using the gorgeous service blurbs as carousel items.

But whether you’re following along exactly using the same layout, or if you’re creating the row and modules from scratch, make sure to keep the following things in mind:

  1. The row must only have one column
  2. All the modules that you want in the carousel must be within the same column

For the Digital Marketing Layout, we created a new row and moved all the service blurbs into a new one column row, so now they look like this:

(this is what the carousel layout should look like when you have set up properly within a one-column row)
If you’re creating your own carousel, just add your desired modules to the one-column row just like above.

Step Two: Add the CSS Classes to the Column & Modules

This step has two parts:

  1. Adding a CSS class to the column (only done once to define where our carousel is).
  2. Adding a CSS class to each module in the carousel (needs to be done for each module in the column).

Simply copy the CSS class below, and add it to the CSS class field within the Advanced Tab of the column (not to be mistaken with the row):

divilife-3-col-feature-blurb-slider

It should look like this:

Now, add the below CSS class to every module within your column that will become a carousel item:

divilife-3-col-feature-blurb

It should look like this:

Step Three: Add the Carousel CSS/JS Code to the Page in a Code Module

So we’ve made this step VERY easy for you by containing ALL the CSS/JS code to just one code module. It’s not only easy to set up, but it’s also easy to maintain. And it’s the best method for performance purposes too. Other similar tutorials I’ve seen will have you add the Slick.js code to Divi Theme Options in the integration tab. The downside to this method is it will load the entire Javascript framework on every page of your website which isn’t ideal or necessary.

There’s essentially three parts to the code below:

  1. The Slick.js Javascript Framework (being pulled from a CDN)
  2. The CSS for our Carousel
  3. The Script that controls the settings for our carousel (slider buttons, pagination dots, number of slides in view, etc)

Now, copy the code below and paste it into a code module in a separate one-column row.

<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;
}
  
.divilife-3-col-feature-blurb-slider .slick-arrow, .divilife-3-col-feature-blurb-slider .slick-arrow:hover, .divilife-3-col-feature-blurb-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;
}
.divilife-3-col-feature-blurb-slider .slick-prev { left: -50px; }
.divilife-3-col-feature-blurb-slider .slick-next { right: -50px; }
  
.divilife-3-col-feature-blurb-slider .slick-arrow:before {
font-family: ETmodules;
color: #000;
background: transparent;
opacity: 1;
font-size: 46px;
vertical-align: middle;
color: #7a69e6;
text-align: center;
}
.divilife-3-col-feature-blurb-slider .slick-arrow:hover:before { opacity: 0.8; }
.divilife-3-col-feature-blurb-slider .slick-prev:before { content: '\34'; }
.divilife-3-col-feature-blurb-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) {
	.divilife-3-col-feature-blurb-slider .slick-prev { left: -32px; }
	.divilife-3-col-feature-blurb-slider .slick-next { right: -30px; }
}
@media(max-width: 499px) {
	.divilife-3-col-feature-blurb-slider .slick-prev { left: -26px; }
	.divilife-3-col-feature-blurb-slider .slick-next { right: -24px; }
}
  
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script>
jQuery(document).ready(function() {
	jQuery('.divilife-3-col-feature-blurb-slider').slick({
    dots: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 980,
        settings: {
          slidesToShow: 2
        }
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1
        }
      }
    ]
  }); 
});
</script>
It should look something like the image below (if you are following along exactly). Don’t worry, we know it’s not pretty. We’re going to make some adjustments to the modules to adjust the spacing and shadows.
Now let’s make some adjustments so it looks prettier. If you’re creating your own carousel items (and not following along exactly), then your adjustments may vary. However, the below adjustments may help you figure out what you need to change and following them may get you close to the desired results.

In the Column Design Settings:

  • Make the Width 90%
  • Make the Max Width 1220px

 

In the Blurb/Module Design Settings:

  • Make the Content Width 100%
  • Make the Margin Top/Bottom 50px
  • Make the Margin Left/Right 25px
  • Reduce the Drop Shadow Blur Strength to 20px and decrease the Shadow Color Opacity to .10

Remember to duplicate the module settings to ALL modules within your column!

We’re done! It should look like the below image or the live carousel at the top of this post (if you followed along exactly).

27 Comments

  1. Luis

    Excelent post Tim,
    Greetings from Madrid.

    Reply
  2. hidayath

    awesome Tim, I tried before slick.js now i get what i did mistake in my process, thankyou

    Keep going Tim

    Reply
    • Tim Strifler

      You’re welcome! Yeah it can be tricky, and one little mistake can keep it from working. I’m glad the tutorial was helpful for you 🙂

      Reply
  3. Niklas

    Awesome Layout and Design!
    Is it possible to have two blurb boxes in a vertical row? E.g. two icons / logos one above the other?

    Reply
    • Tim Strifler

      Hi Niklas,

      Yes, it’s possible, but you would have to restructure the carousel. In this tutorial, the column is the carousel container and all the child items within the column (the modules) are the carousel items. To achieve what you’re asking, you would have to make the section the carousel container, and then make the rows the carousel items. So you would have to move the CSS classes to those levels. There will probably be a lot of adjustments to make to control the spacing and sizing to make it look good. But it’s definitely achievable. 🙂

      Reply
  4. Julie Patton

    Can we use a a testimonial module as a single colunm slider?

    Reply
    • Tim Strifler

      Yes, absolutely. We actually have a one-column testimonial carousel as part of our Carousel Layout Pack. You can see the demo of it here.

      You can customize this tutorial to do that by replacing the blurb modules with testimonial modules, then adjusting the code in Step Three (lines 118 and 124) to be slidesToShow:1. You’ll then also want to decrease the row’s max-width to your desired width (~500px or so).

      Reply
  5. Krzychu

    Is automatic start possible?

    Reply
    • Tim Strifler

      Yep! Just add autoplay: true, after slidesToScroll: 1, in the code module in Step Three. 🙂

      Reply
  6. Bego

    I used it for the testimonials. How can I make all columns the same height? That you get something like read more text.
    Now I have them all in different sizes and a lot of blank space.

    Reply
    • Tim Strifler

      I’m not really sure of a way to do this automatically with Divi’s built in testimonial module. Your best option is probably to try and trim them down so they’re all close to the same length. Or, you can trim them and have a “Read More” link like you said that links to either a Divi popup, or another page altogether.

      Reply
  7. Pamela Piquette

    Is it possible to remove the arrows without having the previous and next buttons show up? The dots with autoplay work really well.

    Reply
    • Tim Strifler

      Hi Pamela, yes it’s definitely possible. Add arrows: false, in between lines 118 and 119 of the code in Step Three. 🙂

      Reply
      • Pamela Piquette

        Thank you. One more…what tweak would I need for adjusting the autoplay a bit slower? Sharing this is really a gift!

        Reply
        • Tim Strifler

          I’m glad you like it, Pamela! 🙂

          You can add autoplaySpeed: 3000, to the code after line 117. 3,000 (milliseconds) is the default, so try changing it to 2,000 or less. 🙂

          Reply
  8. Willi Waizenegger

    Can this carousel be done full-width?

    Reply
    • Tim Strifler

      Definitely. You can make it full width by changing the row to full width. You will likely also want to increase the number of slides showing though which can be done by editing the slidesToShow value in line 118 of the code in Step Three.

      Reply
  9. juan Vallejo

    hi Tim, i have import the free layout but it doesnt look like a carrousel this is the website http://www.nunamasajes.com
    I follow the steps, maybe you can point me where i am wrong?

    Reply
    • Tim Strifler

      Do you have Divi’s Performance settings turned on in Theme Options? You may need to turn them off, at least for testing this. For example, the Defer Jquery may break the functionality of the carousel. Let me know!

      Reply
  10. Bego

    I have errors on the website with this layout

    Reply
  11. Oliver Osswald

    This is great, I just (finally) learned about multiselect & efficiency tools…

    FYI: I downloaded your layout example and I modified the script in the code module with the latest download link from slick, plus I made the sample to perform smooth scrolling with autostart, like this:

    jQuery(document).ready(function() {
    jQuery(‘.divilife-3-col-feature-blurb-slider’).slick({
    speed: 9000, autoplay: true,
    autoplaySpeed: 0,
    cssEase: ‘linear’,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
    {
    breakpoint: 980,
    settings: {
    slidesToShow: 2
    }
    },
    {
    breakpoint: 767,
    settings: {
    slidesToShow: 1
    }
    }
    ]
    });
    });

    Reply
    • Tim Strifler

      Awesome, love it! Thanks for sharing! The Slick framework is SUPER powerful. I love that you made changes 🙂

      Reply

Submit a Comment

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

Pin It on Pinterest

Share This