Elementor Creative Vertical Card Carousel/Slider

 

 

CSS code snippet for Auto Sliding Carousel:

selector{
    --change-duration: 0.75s;
    height: 320px;
}
selector .elementor-inner-section{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
selector .elementor-container{
    opacity: 0;
    transform: translateY(-100%) scale(0.5);
}
.anim selector .elementor-container{
    transition: all var(--change-duration) ease-in-out;
}
selector .after .elementor-container{
    opacity: 0.4;
    transform: translateY(100%) scale(0.7);
}
.anim selector .after .elementor-container{
    animation: enter var(--change-duration) ease-in-out;
}
selector .before .elementor-container{
    opacity: 0.4;
    transform: translateY(-100%) scale(0.7);
}
selector .current .elementor-container{
    opacity: 1;
    transform: none;
}
selector .before,
selector .after{
    z-index: 1;
}
selector .current{
    z-index: 2;
}

@keyframes enter {
  0%{
    opacity: 0;
    transform: translateY(100%) scale(0.5);
  }
  100%{
    opacity: 0.4;
    transform: translateY(100%) scale(0.7);
  }
}

 

 

JavaScript code snippet for Auto Sliding Carousel:

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

$(document).ready(function(){
    
var slide = $('.sliding .elementor-inner-section'),
    index = 0,
    before, after,
    slidePause = false
    
function sliding(call = null){
    
    if(!call){
        if(slidePause) return
        $('body').addClass('anim')
    }
    
    before = index == 0 ? slide.length - 1 : index - 1
    after = index == slide.length - 1 ? 0 : index + 1
    
    slide.removeClass('current before after')
    slide.eq(index).addClass('current')
    slide.eq(before).addClass('before')
    slide.eq(after).addClass('after')

    
    if( slide.length - 1 == index ){
        index = 0
    }else{
        index++
    }
}

sliding('load')
setInterval(sliding, intervalDuration*1000)

$('.sliding').on('mouseover', function(){
    slidePause = true
})
$('.sliding').on('mouseout', function(){
    slidePause = false
})
    
})

</script>