Hack Elementor: carousel anything what you want

Elementor is one of best page builder for wordpress at current. Today I have a challenge to responsive a row with 4 columns on PC to a row with carousel slider on mobile as image below:

Row 4 columns on PC to carousel slide on mobile challenge

I have both of Elementor free and Elementor Pro but I don’t look to carousel with text and image responsive as required. So I think to create a new widget but that is take a lot of time. Check Elementor library I discovery swiper is default addon used for carousel. We have to create a new custom javascript to call swiper. In functions.php I enqueue a custom script:

wp_enqueue_script( 'custom', get_theme_file_uri( 'assets/js/custom.js' ), ['jquery', 'swiper'], '', true );

Remember to add jquery and swiper as depends scripts. Custom.js will be loaded after jquery and swiper.js default of Elementor.

Now we have to call swiper with row html. As swiper document, we need to prepare HTML structure as below:

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

Looking HTML on a wordpress page that created with Elementor we see structure as below:

<section class="elementor-element" id="our_projects">
    <div class="elementor-container elementor-column-gap-default">
        <div class="elementor-row">
            <div class="elementor-element elementor-column elementor-col-25 elementor-inner-column">
                <div class="elementor-column-wrap  elementor-element-populated"></div>
                </div>
            </div>
            <div class="elementor-element elementor-column elementor-col-25 elementor-inner-column">
                <div class="elementor-column-wrap  elementor-element-populated"></div>
            </div>
            <div class="elementor-element elementor-column elementor-col-25 elementor-inner-column">
                <div class="elementor-column-wrap  elementor-element-populated"></div>
            </div>
            <div class="elementor-element elementor-column elementor-col-25 elementor-inner-column">
                <div class="elementor-column-wrap  elementor-element-populated"></div>
            </div>
        </div>
    </div>
</section>

Please note we will set ID (our_project) for section to call scope element in javascript to execute swiper. In custom.js, we will add call to swiper as below:

var mySwiper = new Swiper('#our_projects .elementor-container', {
    slidesPerView: 1,
    spaceBetween: 10,
    slideClass: 'elementor-column',
    wrapperClass: 'elementor-row',
    navigation: {
        nextEl: '#our_team_arrows .swiper-button-next',
        prevEl: '#our_team_arrows .swiper-button-prev',
    },
    breakpoints: {
        640: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        768: {
          slidesPerView: 1,
          spaceBetween: 40,
        },
        1024: {
          slidesPerView: 5,
          spaceBetween: 0,
        },
    }
});

CSS:

@media (max-width: 768px) {
   #our_projects .elementor-container, #our_team .elementor-container {
      width: 100%;
       height: 100%;
       margin-left: auto;
       margin-right: auto;
       position: relative;
       overflow: hidden;
       list-style: none;
       padding: 0;
       z-index: 1;
   }
   #our_projects .elementor-container .elementor-row, #our_team .elementor-container .elementor-row {
     position: relative;
     width: 100%;
     height: 100%;
     z-index: 1;
     display: flex;
     transition-property: transform;
     box-sizing: content-box;
     -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
   }
   #our_projects .elementor-container .elementor-column, #our_team .elementor-container .elementor-column {
     flex-shrink: 0;
     width: 100%;
     height: 100%;
     position: relative;
     transition-property: transform;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
   }
}

To show arrow, we have to add widget HTML next to column widget in Elementor and set advanced style: margin-top: -300px. HTML widget content:

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

Refresh page and view result.