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>
/* we have to be sure that both jQuery Library and Swiper are loaded BEFORE we run our code */
( function() {
  var the_timer = setInterval( function() {
      if( typeof Swiper && typeof jQuery ) {
          runTheCode();
          clearInterval( the_timer );
      }
  }, 100 );
} )();
function runTheCode() {
    // add 'swiper-container' class to .elementor-container
    jQuery( '.custom-swiper > .elementor-container' ).addClass( 'swiper-container' );
    // add 'swiper-wrapper' class to .elementor-row
    jQuery( '.custom-swiper .swiper-container > .elementor-row' ).addClass( 'swiper-wrapper' );
    // add 'swiper-slide' class to each column
    jQuery( '.custom-swiper .swiper-wrapper > div' ).addClass( 'swiper-slide' );
    // previous & next 
    jQuery( '.custom-swiper .swiper-container' ).append( '<div class="swiper-button-next"></div>' ).append( '<div class="swiper-button-prev"></div>' );
    // pagination
    jQuery( '.custom-swiper .swiper-container' ).append( '<div class="swiper-pagination"></div>' );
    
    var swiper = new Swiper('.custom-swiper > .elementor-container', {
      loop: true, 
      parallax: true,
      speed: 500, 
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      /*
      pagination: {
        el: '.custom-swiper .swiper-pagination', 
        type: 'bullets', 
        clickable: true, 
      },
      */
    });
};
</script>
 

@IlPizza79 Is it readable now?

Thank you for your deep insight! I have followed your blog & created a slider please checkout.
https://ediify.com/digital-marketing-courses-in-thane/
https://ediify.com/digital-marketing-courses-in-vashi-navi-mumbai-3/
Sudhir From India