Key Elements

CSS, Elementor

How To Turn A Section Into A Carousel

How To Turn A Section Into A Carousel

Greeting All,

In this tutorial I am going to show you how you can turn a one column section in a carousel slider you can be proud of.

Here is what you will be creating. Responsive and functional carousel.

There is nothing special need for this tutorial so let’s begin.

Let’s Begin

First we need to drag an image widget into a one column section.

Give that section an id of:


Next we need to give the image widget 10px of padding all around and duplicate that image widget about 8 times.

Your navigator should look like this.


Now if you have pro you can add this CSS in the advanced > custom CSS area if not you add it to your customizer or stylesheet.

Copy and paste this in your area of choice.

#scroll-plus .elementor-widget-wrap {
    width: 100%;
    display: flex!important;
    flex-direction: row;
    flex-wrap: nowrap!important;
	  overflow-x: scroll;
#scroll-plus .elementor-widget-container {
    width: 23vw;
.elementor-inner {
    overflow: hidden;

@media (max-width: 800px){
    #scroll-plus .elementor-widget-container {
    width: 50vw;


You have created your very own image carousel. The possibilities are endless have a look at some example below.

Hope you found this useful and informative.😀

4 Responses

    1. Super easy if you don’t want to do it in Elementor. I will experiment and see how to best implement this using elementor. Stay tuned.

  1. Hi author! Thank you for your website!
    Can you make tutorial, how to combine with elementor?

    I need to make responsive vertical scroll of columns on mobile.

    very thanks!
    From Russia with love 🙂

    1. Hi Andrey,
      This tutorial is on my todo list. I can’t give you a date and time it will be published but just know it is in the works.

Leave a Reply