5/5

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:

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

Related Articles

Vertical Scroll Snapping In Elementor with CSS

In todays tutorial we are going to through how you can add vertical scroll snapping...

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile...

How To Wrap Text In Elementor

Greetings All. This brief tutorial will touch on a subject I was asked about this...

How to Create A CSS Arrow

Greetings All, For this brief tutorial I will show you how to create a css...

4 Comments

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

  • Hi author! Thank you for your website!
    Can you make tutorial, how to combine flickity.metafizzy.co with elementor?

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

    very thanks!
    From Russia with love 🙂

    Reply
    • 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

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

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?

newsletter

Subscribe to get notified and receive a special invite.