Elementor 3D Image Carousel/Slider with Text

 

 

CSS code snippet on Media Carousel:

selector .swiper-container {
    padding-top: 5px;
    padding-bottom: 50px;
}

@media (max-width: 767px){
selector .swiper-container {
    padding-left: 45px;
    padding-right: 45px;
}
}

 

CSS code snippet on 2nd Section:

selector .elementor-inner-section{
    position: absolute;
    opacity: 0;
    width: 100%;
    left: 0;
    transition: all 0.3s ease-in-out;
}
selector .elementor-inner-section.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').removeClass('active')
    $('.slider-text .elementor-inner-section').eq(index).addClass('active')
},100)
}

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

setInterval(sliderText, 500)
})

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

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

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

</script>