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

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

Vertical Scroll Snapping In Elementor with CSS

In todays tutorial we are going to through how you can add vertical scroll snapping to your Elementor site with just CSS. Here is a preview how it should function. For this to work you don’t need any kind of…

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile menu seen on Elementor website. See the image below to see what I am referring to. My working environment Theme: Hello Theme Elementor Version: Pro…

How To Wrap Text In Elementor

Greetings All. This brief tutorial will touch on a subject I was asked about this week concerning a simple way of wrapping text around an image. So after some experimenting and trying multiple methods this is the solution I found…

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 *

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?