AirBnB-like Carousel showing part of the next slide in Elementor

Create user-friendly mobile carousel or slider with Elementor where part of the next slide is already visible.

No plugin required. You can use this with any native widget in Elementor, JetEngine carousel or Ele Custom Skin Carousel.

See full tutorial in this video:

Place the following code to Elementor > custom code section or use a plugin that allows you add custom code. Make sure it is being loaded in the end of the body!

Code for Elementor native carousel widgets (Swiper JS)

Don’t forget to add the class mobileslider (without the dot) to your widget in Elementor.

<script>

document.addEventListener('DOMContentLoaded', function() {
 jQuery(function($){

  var interval = setInterval(function () {

    if (typeof Swiper == "undefined") return;

    clearInterval(interval);
    const imageCarousel = jQuery ( '.mobileslider .swiper-container' ),
    swiperInstance = imageCarousel.data( 'swiper' );
          
    swiperInstance.params.breakpoints[0].slidesPerView = 1.2;
    swiperInstance.params.breakpoints[0].centeredSlides = true;
    swiperInstance.params.isBeginning = true;
    swiperInstance.currentBreakpoint = false;
    swiperInstance.update();
    swiperInstance.updateSlides();
    swiperInstance.destroy(false, false);
    swiperInstance.init();

  }, 100);

 }); 
}); 
</script>

Code for JetEngine carousel (Slick carousel)

Don’t forget to add the class classes_carousel (without the dot) to your widget in Elementor.

<script>
 // To fire after content is loaded
document.addEventListener('DOMContentLoaded', function() {
 jQuery(function($){

    jQuery('.classes_carousel  .slick-slider').slick('slickSetOption', {
        slidesToShow: 3,
        centerMode: false,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 2.5,
                    centerMode: false
                },
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1.05,
                    centerMode: true
                },
            },
        ]
   }, true);
  
 });
}); 
</script>

Code for Ele Custom Skin Pro loop carousel

Don’t forget to add the class mobileslider (without the dot) to your widget in Elementor.

<script>

document.addEventListener('DOMContentLoaded', function() {
 jQuery(function($){

  var interval = setInterval(function () {

    if (typeof Swiper == "undefined") return;

    clearInterval(interval);
    
       const imageCarousel = jQuery ( '.mobileslider .swiper-container' ),
          swiperInstance = imageCarousel.data( 'swiper' );
          
          swiperInstance.then(function(val) {
           
               val.params.breakpoints[0].slidesPerView = 1.2;
               val.params.breakpoints[0].centeredSlides = true;
               val.currentBreakpoint = false;
               val.params.isBeginning = true;
               val.update();
               val.updateSlides();
               val.destroy(false, false);
               val.init();
          });

  }, 100);

 });
}); 
</script>