Elementor Awesome Custom Slider Template & Tutorial
Get Premium

Elementor Awesome Custom Slider Template & Tutorial

Element.How also offers premium tutorials! Check them here:

Elementor Awesome Custom Slider Template & Tutorial

Table of Contents

In this tutorial, you will learn how to create an awesome custom slider, with Elementor.

Elementor Pro is required for this one as we will be using CTA elements.

Here is what we will be creating:

Here is what it looks like on mobile:

You can also visit the demo page directly.

Credits: I got the design idea here.

Features:

  • Amazing: get a truly original slider and impress your visitors or clients
  • Fully responsive: the layout is responsive and works well on tablet and mobile too
  • Easy to replicate: simply copy paste the template
  • Make it your own: swap to your content, edit the CSS to customize the fonts and colors easily

Also note that the slider is entirely custom (i.e. it's not using any JS slider library), and as such has a limitation: you can't swipe to navigate through the slides. You have to click the arrows, or click on one of the cards.

Another limitation is that it's not dynamic. It can't come from a custom post type. The slides' content is static. It could come from an ACF options page (or equivalent) though.

The Container feature needs to be activated for this tutorial to work.

Here is an alternate version that shows fewer cards on desktop (tablet and mobile stay the same) that's also provided in the tutorial.

Let's get started!

First, import the template on your page

This is a premium tutorial. Purchase access to unlock the full tutorial and access the template.

Elementor Awesome Custom Slider Template & Tutorial

Access tutorial

$29/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor Awesome Custom Slider Template & Tutorial
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 6 months money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Support not needed!Due to personal circumstances, I no longer offer support. The vast majority of customers never needed support to start with, so chances are you will be just fine, the tutorials and templates provided are complete.

    I also extended the refund window from 1 to 6 months, during which you can get a full refund for any reason.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

16 Responses

  1. I I try to copy and paste the template but it not work ....can you post the json file or can you send me a json by mail ... Thanks!

    1. Greetings,

      To copy the template, you need to Right click > Paste from another site. You need to right click at the bottom of your page where you have the little folder and + icon.

      Then when you have the screen where it says "press CTRL V", you click CTRL V.

      Let me know if that works!

  4. How to reduce the size of the template cards in bottom?

    I want only 1 and half card in the bottom. and also can I have less than 7 slides?

      1. Yess, this is what I wanted to achieve, thank youu. Can you please email me the same?

  5. Is there a way to get rid of the button? I tride to make it transparent but it did not work for the box in the "normal" mode (in the hoover mode it did)

  6. Hi!

    I Liked to custume the tamplate in the code, but unfortunately it didn't work.
    don't want the round edges and the glow on the cards.
    (I edit the code, all border-radius and box-glow 0 and none, but didn't do anything)

    cheers!

    1. Greetings Kimberley,

      Please open the CSS, and find the part that says:

      /*
      *
      * Modify the CSS below only
      *
      */

      And then, you will find several instances of:

      .fancySliderCard .elementor-cta__bg.elementor-bg {
      border-radius: 2vw; /* border radius on the cards background */
      box-shadow: 0.3vw 0.3vw 1.1vw 0.7vw #ffffff77; /* box shadow on the cards background */
      transition: all 0.9s cubic-bezier(1, 0, 0, 1); /* transition on the cards background */
      }

      .fancySliderCard .elementor-cta__bg-overlay {
      border-radius: 2vw; /* border radius on the cards gradient overlay */
      transition: all 0.9s; /* transition on the cards gradient overlay */
      background-image: linear-gradient(to bottom, transparent 60%, #000000 100%); /* gradient overlay on the cards */
      }

      There will be also similar for tablet, and for mobile, lower in the CSS.

      Set them to 0:

      .fancySliderCard .elementor-cta__bg.elementor-bg {
      border-radius: 0vw; /* border radius on the cards background */
      box-shadow: 0vw 0vw 0vw 0vw #ffffff77; /* box shadow on the cards background */
      transition: all 0.9s cubic-bezier(1, 0, 0, 1); /* transition on the cards background */
      }

      .fancySliderCard .elementor-cta__bg-overlay {
      border-radius: 0vw; /* border radius on the cards gradient overlay */
      transition: all 0.9s; /* transition on the cards gradient overlay */
      background-image: linear-gradient(to bottom, transparent 60%, #000000 100%); /* gradient overlay on the cards */
      }

      Let me know how it goes!

      Cheers!

  7. Hello,

    I really like this slider! I was wondering if it’s possible to adjust the template so that the selected square image is placed within a container rather than being used as the full background—similar to this example: https://www.loom.com/i/284de76bbcc640dd85d8fe55e8d30712.

    I’d like to achieve an effect where the information and presentation update as you slide through. Specifically, is there a way to trigger the post from one slide to populate the larger slider, potentially rotating content this way? Additionally, would it be possible to apply different styling for the first panel versus the third?

    Thank you!

    1. Greetings!

      Sorry the example you sent is a very different design from the current tutorial... it would require hours of work and fine tuning to get it just right, on all viewports.

      I suggest you find a dev to help you with this.

      Cheers!

  8. Hi,

    I want to change the order of the slides, but moving them around in Navigator doesn't change the order they load on the site. How can we just rearrange the order of the slides?

    Thanks.

Leave a Reply