Make a 3D Cube Slider Effects with Text in WordPress/Elementor

 

 

CSS code snippet for Media Carousel Widget:

/* Bottom gap */

selector .swiper-container {
    padding-bottom: 60px;
}

/* Left, right arrows */

selector .elementor-swiper-button{
    width: 2em;
    transform: translateX(1em) translateY(-1em);
    height: 2em;
}
selector .elementor-swiper-button.elementor-swiper-button-next{
    transform: scaleX(-1) translateX(1em) translateY(-1em);
}
selector .elementor-swiper-button i{
    width: 100%;
    height: 0.1em;
    background: currentColor;
    position: relative;
    transform: translateY(1em);
}

selector .elementor-swiper-button i:before,
selector .elementor-swiper-button i:after{
    content: "";
    position: absolute;
    width: 50%;
    transform: rotate(45deg) translateX(-0.04em);
    transform-origin: left center;
    height: 0.1em;
    background: currentColor;
}
selector .elementor-swiper-button i:after{
    transform: rotate(-45deg) translateX(-0.04em);
}

@media (max-width: 767px){
selector .elementor-swiper-button{
    font-size: 15px !important;
}
}

 

CSS code for Parent Container of the slides:

selector .e-container,
selector .e-con{
    position: absolute;
    opacity: 0;
    width: 100%;
    left: 0;
    transition: all 0.3s ease-in-out;
}
selector .e-container:first-child,
selector .e-con:first-child,
selector .elementor-shape-bottom + .e-container,
selector .elementor-shape-bottom + .e-con{
    position: relative;
}
selector .e-container.active,
selector .e-con.active{
    opacity: 1;
}

 

JavaScript code snippet for Changing Text:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
     
var $ = jQuery

$(document).ready(function(){
    
function sliderText(el){
    
setTimeout(function(){
    
    var index = el.find('.swiper-slide-active').attr('data-swiper-slide-index')
    
    el.find('.slider-text .e-container, .slider-text .e-con').removeClass('active')
    el.find('.slider-text .e-container, .slider-text .e-con').eq(index).addClass('active')
},100)
}
    
$('.slider-container').each(function(){
    
var $this = $(this)

$this.find('.slider-text .e-container, .slider-text .e-con').removeClass('active')
$this.find('.slider-text .e-container, .slider-text .e-con').eq(0).addClass('active')

$this.find('.elementor-widget-media-carousel').on('mouseup', function(){
    sliderText($this)
})
setInterval(function(){sliderText($this)}, 500)
    
})
})
</script>