Graphisme et webdesign à Versailles Yvelines – création site internet

Cards carrousel (with grab)

Cards title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Cards title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Cards title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Cards title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Cards title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Creating a scrollable card carousel by grabbing the carousel with the mouse on Elementor is possible by simply following these few steps.

Step 1: Creation of card design

Before creating the design of the cards, it is necessary to correctly set up the section that will contain them:

  • Create a full-width section
  • Set the distance between the columns to 0
  • In the « Advanced » tab of the section, give it the class « cards »
  • It is now time to design the cards

Step 2: Override Elementor CSS

Natively, Elementor does not allow the content of a section to overflow the screen. To make this possible, it is necessary to override the CSS styles of the theme builder.
To do this, in the custom CSS of the section, copy/paste these few CSS lines and adapt the different values to the needs of the project:

/*Turns the cursor into a grab*/
selector {
    cursor: grab;
}

/*Allows the cards to protrude from the screen*/
selector>.elementor-container {
    flex-wrap: nowrap;
    overflow-x: auto;
}

/*Determines the width of the cards by default*/
selector>.elementor-container .elementor-column {
    min-width: 20%;
}

/*Adds a margin before the first card*/
selector>.elementor-container .elementor-column:first-child {
    margin-left: 10%;
}

/*Adds a margin after the last card*/
selector>.elementor-container .elementor-column:last-child {
    margin-right: 10%;
}

/*Styles for all screens under 1024px wide*/
@media screen and (max-width: 1024px) {
    selector>.elementor-container {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    selector>.elementor-container .elementor-column {
        min-width: 50%;
        scroll-snap-align: center;
    }
    selector>.elementor-container .elementor-column:first-child {
        margin-left: 5%;
    }
    selector>.elementor-container .elementor-column:last-child {
        margin-right: 5%;
    }
}

/*Styles for all screens under 767px wide*/
@media screen and (max-width: 767px) {
    selector>.elementor-container .elementor-column {
        min-width: 80%;
    }
    selector>.elementor-container .elementor-column:first-child {
        margin-left: 1em;
    }
    selector>.elementor-container .elementor-column:last-child {
        margin-right: 1em;
    }
}

/*Hides the scrollbar on the site but not in the editor so that you can still edit cards that stick out of the screen*/
selector .elementor-container::-webkit-scrollbar {
  width: 0;
}
selector .elementor-container::-webkit-scrollbar-track {
  background: transparent;
}
selector .elementor-container::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}
.elementor-edit-mode selector .elementor-container::-webkit-scrollbar {
  width: initial;
}
.elementor-edit-mode selector .elementor-container::-webkit-scrollbar-track {
  background: #FEFEFE;
}
.elementor-edit-mode selector .elementor-container::-webkit-scrollbar-thumb {
  background: #DDD;
  border-radius: 30px;
}

Step 3: Adding the JavaScript

The card carousel is already functional on mobile devices that allow scrolling by touching the screen, but it is not functional on computer screens, which do not natively allow this type of scrolling.
To overcome this problem, you just have to create an HTML block somewhere on the page (below the carousel):

<script>
const slider = document.querySelector('.cards').querySelector('.elementor-container');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX);
  slider.scrollLeft = scrollLeft - walk;
  console.log(walk);
});
</script>