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:

scroll-plus

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.

The CSS

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;
}
}

Voila.

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.😀