Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save webdevs-pro/df6911c5dcb3160ec28a8732bfefb9b4 to your computer and use it in GitHub Desktop.
Save webdevs-pro/df6911c5dcb3160ec28a8732bfefb9b4 to your computer and use it in GitHub Desktop.
CSS and jQuery code used in "Custom Slider in Elementor built with Elementor" video tutorial
/* ---------- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment