CSS and jQuery code used in "Custom Slider in Elementor built with Elementor" video tutorial

gistfile1.txt

/* ---------- CSS 
 - should be "attached" to the master Section */

/* make 100% wide columns possible for Desktop devices in Elementor */
.custom-swiper .elementor-container .elementor-row {
    /*flex-wrap: wrap;*/
}
/* make all the colums-slides 100% wide and full screen tall */
.custom-swiper > .elementor-container > .elementor-row > .elementor-element.elementor-column {
    width: 100%;
    height: 100vh;
}
/* fix Elementor's Button widget bug when rendered in slider */
.custom-swiper .swiper-slide a.elementor-button {
    display: inline-block;
}
/* make slider fully responsive */
@media (min-width: 320px) and (max-width: 1024px) {
    .custom-swiper .elementor-container .elementor-row {
        flex-wrap: nowrap;
    }
}

/* Prev & Next buttons styles */
.custom-swiper .swiper-button-prev, 
.custom-swiper .swiper-button-next {
    width: 45px;
    height: 45px;
    background-color: rgba(0,0,0,0.7);
    background-size: 30%;
    padding: 5px;
}
/* Hover effect for Prev & Next buttons */
.custom-swiper .swiper-button-prev:hover, 
.custom-swiper .swiper-button-next:hover {
    opacity: 0.5;
}
/* Color and position of the Next button */
.custom-swiper .swiper-button-next, 
.swiper-container-rtl .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    left: unset;
    right: 0;
}
/* Color and position of the Prev button */
.custom-swiper .swiper-button-prev, 
.swiper-container-rtl .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22L22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    left: unset;
    /* cancel the line to stick the Prev button to left-hand side*/
    right: 46px;
}


/* ---------- jQuery 
 - should be "attached" to the HTML widget */
 
 <script>
jQuery( function( $ ) {
    // it's good idea to Update & Refresh the page every time jQuery code is modified. 
    // this is due to rebuild the cache
    
    // add 'swiper-container' class to .elementor-container
    $( '.custom-swiper > .elementor-container' ).addClass( 'swiper-container' );
    // add 'swiper-wrapper' class to .elementor-row
    $( '.custom-swiper .swiper-container > .elementor-row' ).addClass( 'swiper-wrapper' );
    // add 'swiper-slide' class to each column
    $( '.custom-swiper .swiper-wrapper > div' ).addClass( 'swiper-slide' );
    // previous & next 
    $( '.custom-swiper .swiper-container' ).append( '<div class="swiper-button-next"></div>' ).append( '<div class="swiper-button-prev"></div>' );
    // pagination 
    $( '.custom-swiper .swiper-container' ).append( '<div class="swiper-pagination"></div>' );
    
    // init Swiper instance
    var swiper = new Swiper( '.custom-swiper .swiper-container', {
      loop: true, 
      parallax: true, 
      pagination: {
        el: '.custom-swiper .swiper-pagination', 
        type: 'bullets', 
        clickable: true, 
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    
} );
</script>