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 there!

Just bought the templates, however, I can't get them to work. Error: 'rule is empty' as .custom-swiper doesn't seem to get recognized. Also the 3 columns don't switch from vertical to horizontal as well. Hope you (or some other knowledgeable folks out here) can help me out.

Keep up the good > great work!

Best!

Hi! It would be great if you can place your test page on the remote server and let me know the URL. That’s how I can check for JS errors in the console. As a side note… ...this file has been made BEFORE Elementor 3.0 popped up and it does require “Optimized DOM Output” setting to be disabled. You can check that in WP Admin, under : Elementor > Settings :: Advanced (tab), “Optimized DOM Output" Peace and love! OoohBoi

…

On 7 Jan 2021, at 16:50, rfgdeleeuw ***@***.***> wrote: @rfgdeleeuw commented on this gist. Hi there! Just bought the templates, however, I can't get them to work. Error: 'rule is empty' as .custom-swiper doesn't seem to get recognized. Also the 3 columns don't switch from vertical to horizontal as well. Hope you (or some other knowledgeable folks out here) can help me out. Keep up the good > great work! Best! <https://user-images.githubusercontent.com/74461599/103912951-412d2d00-5108-11eb-9223-aa1d86981a35.png> <https://user-images.githubusercontent.com/74461599/103912988-4e4a1c00-5108-11eb-84fd-6a10c5a16f41.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/3e3fbb773ebbd647b92de8880aa4c5ef#gistcomment-3585774>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMH5XG7F6VDE6K4LRLCOIMDSYXJ23ANCNFSM4VZFCR4Q>.

Hi there!

Thanks for getting back to me. Much appreciated!

Disabling the setting definitely did something (the element is literally moving/changing after I add it). However, the element still doesn't work and ends up looking rather glitchy (see screenshot).

The page I'm constructing can be found here: https://www.humanpotentialcoaching.com/testwhite/

Again, many thanks and hope this helps to further increase the quality of the work you're doing.

Peace and love indeed!

Best,
Roderick

Hi, I’m afraid that the cube 3d effect doesn’t work any more. I just spent almost 2 hours on trying to figure out what’s wrong but no success. Can’t claim for sure but it looks like that after Elementor's major upgrade to 3.0, certain CSS classes (css properties) were updated and which affects functionality of Swiper’s 3D effect. I can’t afford to waste more time on hunting the troublemaker and if you wish to raise the refund - please let me know! Peace and love! OoohBoi

…

On 8 Jan 2021, at 10:24, rfgdeleeuw ***@***.***> wrote: @rfgdeleeuw commented on this gist. Hi there! Thanks for getting back to me. Much appreciated! Disabling the setting definitely did something (the element is literally moving/changing after I add it). However, the element still doesn't work and ends up looking rather glitchy (see screenshot). The page I'm constructing can be found here: https://www.humanpotentialcoaching.com/testwhite/ <https://www.humanpotentialcoaching.com/testwhite/> Again, many thanks and hope this helps to further increase the quality of the work you're doing. Peace and love indeed! Best, Roderick <https://user-images.githubusercontent.com/74461599/103997396-4edfc280-519b-11eb-9bb9-1ac5f5dfa0a1.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/3e3fbb773ebbd647b92de8880aa4c5ef#gistcomment-3586667>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMH5XG2XEBCP7W66HJDDTSLSY3FM7ANCNFSM4VZFCR4Q>.

Thanks for checking what's wrong. Sorry to hear this external factor impacted your work. Perhaps a practical question for a concrete solution to my challenge: - Are there ways to make the other effects work or are the also done for? - If they don't work, do you perhaps have a suggestion for me to get a similar effect (it is my goal to show my testimonials through a pretty carousel like yours). Don't worry about the refund. Small contribution to your amazing work, despite the fact that it didn't work out this time around. Best, Roderick

…

On Fri, 8 Jan 2021 at 14:03, Oooh Boi ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Hi, I’m afraid that the cube 3d effect doesn’t work any more. I just spent almost 2 hours on trying to figure out what’s wrong but no success. Can’t claim for sure but it looks like that after Elementor's major upgrade to 3.0, certain CSS classes (css properties) were updated and which affects functionality of Swiper’s 3D effect. I can’t afford to waste more time on hunting the troublemaker and if you wish to raise the refund - please let me know! Peace and love! OoohBoi > On 8 Jan 2021, at 10:24, rfgdeleeuw ***@***.***> wrote: > > @rfgdeleeuw commented on this gist. > Hi there! > > Thanks for getting back to me. Much appreciated! > > Disabling the setting definitely did something (the element is literally moving/changing after I add it). However, the element still doesn't work and ends up looking rather glitchy (see screenshot). > > The page I'm constructing can be found here: https://www.humanpotentialcoaching.com/testwhite/ < https://www.humanpotentialcoaching.com/testwhite/> > Again, many thanks and hope this helps to further increase the quality of the work you're doing. > > Peace and love indeed! > > Best, > Roderick > > < https://user-images.githubusercontent.com/74461599/103997396-4edfc280-519b-11eb-9bb9-1ac5f5dfa0a1.png > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub < https://gist.github.com/3e3fbb773ebbd647b92de8880aa4c5ef#gistcomment-3586667>, or unsubscribe < https://github.com/notifications/unsubscribe-auth/AMH5XG2XEBCP7W66HJDDTSLSY3FM7ANCNFSM4VZFCR4Q >. > — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/3e3fbb773ebbd647b92de8880aa4c5ef#gistcomment-3586834>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARYDDH3RAJUOPGC5ETGVP6DSY37BXANCNFSM4VZFCR4Q> .

What I can confirm is that the “regular” slider works normally (slide and fade effects). Carousel version as well. Cover flow and 3d Cube effects are buggy. Another issue relates to the jQuery code tho… This is how the initial function should be fixed (please note changes to the clause): ( function() { var the_timer = setInterval( function() { if( 'undefined' !== typeof Swiper && 'undefined' !== typeof jQuery ) { runTheCode(); clearInterval( the_timer ); } }, 100 ); } )(); …for some reason “runTheCode()” was triggered too soon without comparing it to “undefined”. Not sure why but I’m sure it worked prior to Elementor 3.0. Possibly due to the latest version of jQuery. Unfortunately, there are many factors having an impact on functionality of the custom slider but that’s something I can’t control. As for the question of yours… I guess that the Testimonial Carousel (Elementor PRO) could be a decent solution. Personally, I don’t think that 3d Cube effect is suitable for showcasing testimonials. Other than that, feel free to give a shot to “Glider” (slider) that is a part of my plugin “Steroids for Elementor”. It’s completely free and provides a lot of useful extensions to Elementor. Peace and love! OoohBoi

…

On 8 Jan 2021, at 14:07, rfgdeleeuw ***@***.***> wrote: @rfgdeleeuw commented on this gist. Thanks for checking what's wrong. Sorry to hear this external factor impacted your work. Perhaps a practical question for a concrete solution to my challenge: - Are there ways to make the other effects work or are the also done for? - If they don't work, do you perhaps have a suggestion for me to get a similar effect (it is my goal to show my testimonials through a pretty carousel like yours). Don't worry about the refund. Small contribution to your amazing work, despite the fact that it didn't work out this time around. Best, Roderick On Fri, 8 Jan 2021 at 14:03, Oooh Boi ***@***.***> wrote: > ***@***.**** commented on this gist. > ------------------------------ > Hi, > > I’m afraid that the cube 3d effect doesn’t work any more. I just spent > almost 2 hours on trying to figure out what’s wrong but no success. Can’t > claim for sure but it looks like that after Elementor's major upgrade to > 3.0, certain CSS classes (css properties) were updated and which affects > functionality of Swiper’s 3D effect. > I can’t afford to waste more time on hunting the troublemaker and if you > wish to raise the refund - please let me know! > > > Peace and love! > > OoohBoi > > > > > On 8 Jan 2021, at 10:24, rfgdeleeuw ***@***.***> wrote: > > > > @rfgdeleeuw commented on this gist. > > Hi there! > > > > Thanks for getting back to me. Much appreciated! > > > > Disabling the setting definitely did something (the element is literally > moving/changing after I add it). However, the element still doesn't work > and ends up looking rather glitchy (see screenshot). > > > > The page I'm constructing can be found here: > https://www.humanpotentialcoaching.com/testwhite/ < > https://www.humanpotentialcoaching.com/testwhite/> > > Again, many thanks and hope this helps to further increase the quality > of the work you're doing. > > > > Peace and love indeed! > > > > Best, > > Roderick > > > > < > https://user-images.githubusercontent.com/74461599/103997396-4edfc280-519b-11eb-9bb9-1ac5f5dfa0a1.png > > > > — > > You are receiving this because you authored the thread. > > Reply to this email directly, view it on GitHub < > https://gist.github.com/3e3fbb773ebbd647b92de8880aa4c5ef#gistcomment-3586667>, > or unsubscribe < > https://github.com/notifications/unsubscribe-auth/AMH5XG2XEBCP7W66HJDDTSLSY3FM7ANCNFSM4VZFCR4Q > >. > > > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <https://gist.github.com/3e3fbb773ebbd647b92de8880aa4c5ef#gistcomment-3586834>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ARYDDH3RAJUOPGC5ETGVP6DSY37BXANCNFSM4VZFCR4Q> > . > — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/3e3fbb773ebbd647b92de8880aa4c5ef#gistcomment-3586842>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMH5XG4UOAJIYR3UU3WQ3W3SY37QHANCNFSM4VZFCR4Q>.

Hi! Wondering how to change the color of the previous/next buttons? In your example you are using a background image with a url, but just using color: #xxxxxx does not work, and using background-colour does not colour the buttons but the background. Thank you kindly!

Hello!!
I wanted to ask if its possible to add 2 of these sliders on the same website page. Because when I add them (even when they have different CSS classes names) one of them does not work. What should I do?

Thank you,
Maria

Hello I have the same problem when adding more than one sliders on the page! please help!

@oooh-boi you can replace .custom-swiper with Elementor select keyword in your CSS. The class is still required for the JS.

This can solve the issue mentioned above with more than one slider on your page - just use a different class for the second slider, and make sure you you create a second script the new slider.

Here is my CSS:

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

/* Prev & Next buttons styles */
selector .swiper-button-prev, 
selector .swiper-button-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    background-size: 30%;
    padding: 5px;
    top: 75%;
}
/* Hover effect for Prev & Next buttons */
selector .swiper-button-prev:hover, 
selector .swiper-button-next:hover {
    opacity: 0.5;
}
/* Color and position of the Next button */
selector .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: 6%;
    right: unset;
}
/* Color and position of the Prev button */
selector .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: 95%;
}

This way Elementor will apply the style only on that section.

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.

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