How to make the best Horizontal scroll using Elementor [NEW 2020]

Horizontal Scroll Using Elementor 2020

How to make the best Horizontal scroll using Elementor [NEW 2020]

Hi there, nice to see you here. Today I will show you a simple way to build a horizontal Slider in WordPress using Elementor. You can see the end result here above.

I decided to write a post about this as while doing my research I have noticed that almost ‘worth trying’ options were paid services and in my opinion not very cheap either.

My example shows how to create a horizontal scroll in Elementor for a landing page having only horizontal sliders so I won’t focus on more complex things like a vertical scrolling page with different horizontal sliders on the page. It basically shifts the vertical scrolling to horizontal scrolling using a working, safe way.

You could achieve this with some script, I am sure it will be very easy to adapt to your needs.

Let’s get right to it.

Horizontal scroll using Elementor – Step 1

The first thing we need to do is to create a new page, which I assume you already have and click ‘Edit with Elementor’ to start editing.

Horizontal scrolling using Elementor - Step 1
Horizontal scroll using Elementor – Step 1

Horizontal scroll using Elementor – Step 2

Now we have to create different sections for the horizontal scroll to work. Each section will be a slider, let’s put it that way. Set the height of each slide to ‘Minimum Height’ and 100vh. You can set the one you need, i just want it to be full screen.

For my solution to work, you need to add a section before any other, leave it empty and set the height to 100vh as well.
This particular section doesn’t need a CSS ID and it is just a placeholder. Let it be for now, just add it.
This works because we will give to the other slides :absolute position and a z-index so they will sit on top.

Horizontal scrolling using Elementor - Step 2
Horizontal scroll using Elementor – Step 2

Once we have added a section we will go to the Advanced tab and add a CSS ID (Exclude the placeholder section).
It must be unique on the page, this will be our slider name and we will use this to reference the section in Javascript.

Repeat this process of adding a new section and giving it a unique ID for all your sliders. In my case, I will only add 3 sections and I will give it simple IDs like slide1, slide2 and slide3.

Keep in mind, if you duplicate your first section to save time, the CSS ID will disappear from the duplicated slide (the new one basically) so make sure to give it a new one.

Horizontal scroll using Elementor – Step 3

I would say that we finished setting up the scene for creating a horizontal scroll slider in Elementor.
Now we need to write a script which will do all the heavy lifting for us.

Luckyly for you, I have done that already and I will give you this code for free.

First thing you’ll have to install a plugin called shortcoder. This plugin will allow you to create a snippet of code and add it wherever you want using a shortocode. It is amazing and super useful. I use it all the time.
After installing this plugin, search for it inside the left sidebar of you WordPress dashboard and click on it “[/]Shortcoder”. Now click on Create shortcode.

Horizontal scrolling using Elementor - Step 3
Horizontal scroll using Elementor – Step 3

Horizontal scroll using Elementor – Step 4

Now that we have shortcoder installed, once we click create shortcode we will have a new blank page in front of us. Go ahead and give it a name, you will notice that the plugin automatically uses this name to create a shortcode for your code snippet. The name cannot have spaces, use low dashes or dashes instead.
You will use this shortcode here in your elementor page so when the time will come, come here and click copy, right under the title of your snippet.

The snippets this plugins generates are html snippets, so if we want to use some Javscript in here we will have to enclose the code in <script> tags.

Copy and paste in there this code.

<style>
  	body,html{
  		overflow:hidden;
  }
  .slider {
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transition: all 1s !important;
  }
  
  .slider-1 {
    left: 0 !important;
    transition: all 1s;
  }
  .slider-2 {
    left: 100vw !important;
    transition: all 1s;
  }
  .slider-3 {
    left: 200vw !important;
    transition: all 1s;
  }


  .slide-1-left {
    transform: translateX(-100%) !important;
    transition: all 1s;
  }
  .slide-2-left {
    transform: translateX(-200%) !important;
    transition: all 1s s;
  }
  .slide-3-left {
    transform: translateX(-300%) !important;
    transition: all 1s;
  }

  
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
  $('document').ready(() => {
    try{
    if (!$('body').hasClass('elementor-editor-active')) {
      	onDocReadyFn();
        }
    }catch{
    console.log('Error occured in the homepage-slider script');
    }
  });

  function onDocReadyFn() {
    /* All this stuff is homepage slides related */
    let waitingTimeForSliderChange = 0; /* When changing this change the out animation times to match - If you have out animations done in gsap or other you can set this time to match those animatinos, otherwise it can be 0 */
    let sliderIndex = 0;
    let previousIndex = 0;

    $slider1 = $('#slide1');
    $slider2 = $('#slide2');
    $slider3 = $('#slide3');


    slidersArray = new Array(
      $slider1,
      $slider2,
      $slider3
    );

    $slider1.addClass('slider slider-1');
    $slider2.addClass('slider slider-2');
    $slider3.addClass('slider slider-3'); 

    let canScroll = true;

    document.addEventListener('touchstart', handleTouchStart, false);
    document.addEventListener('touchmove', handleTouchMove, false);

    let xDown = null;
    let yDown = null;

    function getTouches(evt) {
      return (
        evt.touches || evt.originalEvent.touches // browser API
      );
    }

    function handleTouchStart(evt) {
      const firstTouch = getTouches(evt)[0];
      xDown = firstTouch.clientX;
      yDown = firstTouch.clientY;
    }

    function handleTouchMove(evt) {
      if (!xDown || !yDown) {
        return;
      }

      let xUp = evt.touches[0].clientX;
      let yUp = evt.touches[0].clientY;

      let xDiff = xDown - xUp;
      let yDiff = yDown - yUp;

      if (Math.abs(xDiff) > Math.abs(yDiff)) {
        /*most significant*/
        if (xDiff > 0) {
          /* left swipe */
          mouseWheelDown();
        } else {
          /* right swipe */
          mouseWheelUp();
        }
      } else {
        if (yDiff > 0) {
          /* up swipe */
        } else {
          /* down swipe */
        }
      }
      /* reset values */
      xDown = null;
      yDown = null;
    }
    /* We weill use a timer to limit how much the scroll can go. This is due to the fact that the touchpad scrolls so much faster than normal mouse so we need to allow the 'scroll' only once quarter of second*/
    $(window).bind('mousewheel DOMMouseScroll', function (event) {
      if (
        event.originalEvent.wheelDelta > 0 ||
        event.originalEvent.detail < 0
      ) {
        // scroll up

        if (canScroll) {
          canScroll = false;
          mouseWheelUp();
          setTimeout(function () {
            canScroll = true;
          }, 250);
        } else {
          return;
        }
      } else {
        // scroll down

        if (canScroll) {
          canScroll = false;
          mouseWheelDown();
          setTimeout(function () {
            canScroll = true;
          }, 250);
        } else {
          return;
        }
      }
    });

    function mouseWheelUp() {
      subtractToIndex(sliderIndex);
    }
    function mouseWheelDown() {
      addToIndex(sliderIndex);
    }

    function addToIndex() {
      if (sliderIndex === 2) {
        previousIndex = sliderIndex;
        sliderIndex = 0;
        checkIndex(sliderIndex);
      } else {
        previousIndex = sliderIndex;
        ++sliderIndex;
        checkIndex(sliderIndex);
      }
    }
    function subtractToIndex() {
      if (sliderIndex === 0) {
        previousIndex = sliderIndex;
        sliderIndex = 2;
        checkIndex(sliderIndex);
      } else {
        previousIndex = sliderIndex;
        --sliderIndex;
        checkIndex(sliderIndex);
      }
    }
    function checkIndex(index) {
      let tempTime = 0; /* This is normally 0. If the waitingTimeForSliderChange is different than 0, we use this to set it to zero in certain cases. For example when moving from slide 0 to 1 if there are no animations going on */
      
      switch (index) {
        case 0:
          putInSequence(waitingTimeForSliderChange, 'none');
          break;
        case 1:
          if (previousIndex === 0) {
            tempTime = 0;
          } else {
            tempTime = waitingTimeForSliderChange;
          }
          putInSequence(tempTime, 'slide-1-left');
          break;
        case 2:
          putInSequence(waitingTimeForSliderChange, 'slide-2-left');
          break;
       
        default:
          putInSequence(0, 'none');
          break;
      }
    }

    function addClassToSlide(theClass) {
      slidersArray.forEach((slide) => {
        $(slide).addClass(theClass);
      });
    }
    function removeClassToSlide(theClass) {
      slidersArray.forEach((slide) => {
        $(slide).removeClass(theClass);
      });
    }
    

    function putInSequence(waitingTime, theClassToAdd) {
      setTimeout(() => {
        removeClassToSlide(
          'slide-1-left slide-2-left slide-3-left hidden'
        );
        addClassToSlide(theClassToAdd);
      }, waitingTime);
    }

  }
</script>

Horizontal scroll using Elementor – Step 5

Be careful to change the IDs of your sections in the code you copied at step 4.
You need to scroll until line 60 and change the text after the #.
Then scroll more until line 166 and make sure to chang the 2 in th number you need. The same applies for line 179.

Those last 2 changes is based on the number of slides you have. Thinking that the arrays in js start from 0 you will change the numbers following this formula:

Number of slides – 1 = the number you need insteal of the 2 from my code.

If you have 3 slides, 2 is ok, if you have 4 it will be 3 and so on.

This should be the only changes you need to make in the code, it should work like a charm.

Horizontal scroll using Elementor – Step 6

With the changes from the previous point done we will copy the shortcode at the top clicking on the ‘Copy’ button and hop back into Elementor.

Horizontal scrolling using Elementor - Step 6
Horizontal scroll using Elementor – Step 6

Let’s add a new shortcode element somewhere on the page and copy our shortcode in it then update the page. Everything should be working perfectly.

If you have any issues, please let me know in the comments, I will make sure to help you out you can message me on our Facebook page as well. If you wish to learn more interesting things, click here and check our blog’s latest news or if you need a website or you want to do business click here to check our homepage. Otherwise, contact us using the button below.

Take care,
Marius

Share on facebook
Share on twitter
Share on whatsapp
Share on email
Marius
Marius

Hello, my name is Marius and I am the founder and web designer at Debu Web Dev. I love creating websites and writing interesting things which people love.

If you need a new website or just want to drop a line use the following button to contact us.

Contact Us

Related Posts

About Me

Hello, my name is Marius and I am the founder and web designer at Debu Web Dev. I love creating websites and writing interesting things which people love.

Newsletter

Subscribe to our newsletter and stay updated to our offers and deals!

We are committed to protecting your privacy

Popular Post