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>
 

Hi everyone. I try to make work the slider but still is not posible. When i try to run, don't do the slider effect and when i check the console is showing a error with Slider is not defined.

I'm getting the same result, an overflow of paginations and an error.

Hi everyone. I try to make work the slider but still is not posible. When i try to run, don't do the slider effect and when i check the console is showing a error with Slider is not defined.

I'm getting the same result, an overflow of paginations and an error.

You have to add the swiper-bundle.min.js, please have a look below. In my case I have only the pagination.

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script> // add 'swiper' class to .elementor-container jQuery( '.custom-swiper' ).addClass( 'swiper' ); // add 'swiper-wrapper' class to .elementor-container jQuery( '.custom-swiper.swiper > .elementor-container' ).addClass( 'swiper-wrapper' ); // add 'swiper-slide' class to each column jQuery( '.custom-swiper.swiper > .swiper-wrapper > div' ).addClass( 'swiper-slide' ); // pagination jQuery( '.custom-swiper.swiper' ).append( '

' ); var swiper = new Swiper(".custom-swiper", { pagination: { el: ".swiper-pagination", } }); </script>

It seems that if you are using the new "improved assets loading" feature of Elementor, Swiper.js is NOT loaded by default in every Elementor page (and that's good, by the way). So you have to be sure that Swiper.js is included in your page,

For example, you can insert in your page a "sample" carousel with few images and hide it by css or responsive options. Oterwise, try to disable "improved assets loading" and check again.

The code is working when the "improved assets loading" feature is off. Nevertheless is there any way to load the swiper library with the "improved assets loading" being active? I've tried to have a carousel widget loaded but it doesn't make my custom slider work.
https://openmindeddrumming.com/test/

Well, I've made it work with "improved assets loading" enabled and an hidden image carousel widget in my page.
But, be sure to put some images in this hidden carousel (it must be a working carousle) oterwise Elementor Swiper script will not be included in your page (or at least, I guess so). Do you have any error in browser console?

Hey, @IlPizza79 thanks for the reply! Meantime I couldn't sleep cause of that and somehow after some digging, I actually made this code work with improved assets and without the need for a hidden carousel, which in my case didn't want to work even with pictures.
Here's the code I modified. Maybe it will be useful to anyone :)

`<script type="module">
import Swiper from 'https://unpkg.com/swiper@7/swiper-bundle.esm.browser.min.js'

jQuery( function( $ ) {
// add 'swiper-container' class to .elementor-container
$( '.custom-swiper > .elementor-container' ).addClass( 'swiper-container' );

// Insert 'swiper-wrapper' div into .elementor-container div
$( '.custom-swiper .swiper-container' ).append( '<div class="swiper-wrapper"></div>' );

$( '.custom-swiper .swiper-container > .elementor-column' ).appendTo( '.custom-swiper .swiper-container .swiper-wrapper' );

$( '.custom-swiper .elementor-container .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>' );

const swiper = new Swiper('.custom-swiper > .elementor-container', {

    loop: true, 
    parallax: true,
    speed: 1000, 

// Autoplay
autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },

// Navigation arrows
navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

});

});

</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