Elementor 3D Image Carousel/Slider with Text

 

 

CSS code snippet on Media Carousel:

selector .has-swiper-wrapper{
    padding-bottom: 50px;
}
selector .swiper-container,
selector .swiper-wrapper{
    padding-top: 5px;
    padding-bottom: 50px;
}
@media (max-width: 767px){
selector .swiper-container,
selector .has-swiper-wrapper{
    padding-left: 45px;
    padding-right: 45px;
}
}

 

CSS code snippet on 2nd Section/Container:

selector .elementor-inner-section,
selector .e-con{
    position: absolute;
    opacity: 0;
    width: 100%;
    left: 0;
    transition: all 0.3s ease-in-out;
}
selector .e-con{
    align-items: center;
}
selector .elementor-inner-section.active,
selector .e-con.active{
    opacity: 1;
}

 

JavaScript code snippet for Carousel Text Change:

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

$(document).ready(function(){
    
function sliderText(){
    
setTimeout(function(){
    var index = $('.swiper-slide-next').attr('data-swiper-slide-index')
    
    if( $(window).width() < 768 ){
        index = $('.swiper-slide-active').attr('data-swiper-slide-index')
    }
    
    $('.slider-text .elementor-inner-section, .slider-text .e-con').removeClass('active')
    $('.slider-text .elementor-inner-section, .slider-text .e-con').eq(index).addClass('active')
},100)
}

$('.slider').on('mouseup', function(){
    sliderText()
})

setInterval(sliderText, 500)
})

$(window).on('load', function(){

$('.slider').each(function(){
    if($(this).find('.swiper-wrapper').length){
        $(this).find('.elementor-main-swiper').addClass('has-swiper-wrapper')
    }
})
var index

if( $(window).width() < 768 ){
    index = 0
}else{
    index = 1
}

$('.slider-text .elementor-inner-section, .slider-text .e-con').removeClass('active')
$('.slider-text .elementor-inner-section, .slider-text .e-con').eq(index).addClass('active')
})

</script>