Creating Auto Sliding Card Carousel Effect With Elementor

Facebook
Email
WhatsApp

Custom CSS COODE #1

				
					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 snippet

				
					<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>
				
			
Hostinger domain & hosting ireland