CSS, Elementor
3/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.😀

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

Related Posts

**Responses and Solutions to comments are handled on Sundays & Mondays.

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.

      0
      0
  1. 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 🙂

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

      0
      0

Leave a Reply

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

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.
Request A Tutorial

Have a request I would love to hear about.