Make this Team Member Slider/Carousel with Reveal Animation in Elementor

Elementor, WordPress / By

 

Want to get this as ready made template with just 1 CLICK INSTALL?

I want it as Ready Template

 

Code Snippet for Team Member Slider:

<style>
.mdw-team-member-slider .mdw-team-member-slider-back .elementor-widget-heading{
    --speed: 5;
}
.mdw-team-member-slider:not(.init) .mdw-team-member-slider-back .e-con.prev-active,
.mdw-team-member-slider:not(.init) .mdw-team-member-slider-back .e-container.prev-active,
.mdw-team-member-slider:not(.init) .mdw-team-member-slider-back .e-con.active,
.mdw-team-member-slider:not(.init) .mdw-team-member-slider-back .e-container.active,
.mdw-team-member-slider:not(.init) .mdw-team-member-slider-front .e-con.prev-active .elementor-widget-image,
.mdw-team-member-slider:not(.init) .mdw-team-member-slider-front .e-container.prev-active .elementor-widget-image,
.mdw-team-member-slider:not(.init) .mdw-team-member-slider-front .e-con.active .elementor-widget-image,
.mdw-team-member-slider:not(.init) .mdw-team-member-slider-front .e-container.active .elementor-widget-image{
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.mdw-team-member-slider .mdw-team-member-slider-back .e-con,
.mdw-team-member-slider .mdw-team-member-slider-back .e-container,
.mdw-team-member-slider .mdw-team-member-slider-front .elementor-widget-image{
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.mdw-team-member-slider.up .mdw-team-member-slider-back .e-con,
.mdw-team-member-slider.up .mdw-team-member-slider-back .e-container,
.mdw-team-member-slider.up .mdw-team-member-slider-front .elementor-widget-image{
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
.mdw-team-member-slider .mdw-team-member-slider-front .e-con,
.mdw-team-member-slider .mdw-team-member-slider-front .e-container{
    z-index: -1;
}
.mdw-team-member-slider .mdw-team-member-slider-back .e-con.prev-active,
.mdw-team-member-slider .mdw-team-member-slider-back .e-container.prev-active{
    z-index: 5;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.mdw-team-member-slider .mdw-team-member-slider-front .e-con.prev-active,
.mdw-team-member-slider .mdw-team-member-slider-front .e-container.prev-active{
    z-index: 5;
}
.mdw-team-member-slider .mdw-team-member-slider-front .e-con.prev-active .elementor-widget-image,
.mdw-team-member-slider .mdw-team-member-slider-front .e-container.prev-active .elementor-widget-image{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.mdw-team-member-slider .mdw-team-member-slider-back .e-con.active,
.mdw-team-member-slider .mdw-team-member-slider-back .e-container.active{
    z-index: 10;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: all 1s ease-in-out 0.2s;
}
.mdw-team-member-slider .mdw-team-member-slider-front .e-con.active,
.mdw-team-member-slider .mdw-team-member-slider-front .e-container.active{
    z-index: 10;
}
.mdw-team-member-slider .mdw-team-member-slider-front .e-con.active .elementor-widget-image,
.mdw-team-member-slider .mdw-team-member-slider-front .e-container.active .elementor-widget-image{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: all 1s ease-in-out;
}
.mdw-team-member-slider .mdw-team-member-slider-front .e-con:not(.active) .elementor-widget-text-editor,
.mdw-team-member-slider .mdw-team-member-slider-front .e-container:not(.active) .elementor-widget-text-editor,
.mdw-team-member-slider:not(.init) .mdw-team-member-slider-front .e-con .elementor-widget-text-editor,
.mdw-team-member-slider:not(.init) .mdw-team-member-slider-front .e-container .elementor-widget-text-editor{
    opacity: 0;
    pointer-events: none;
}
.mdw-team-member-slider .mdw-team-member-slider-front .e-con-inner{
    flex-grow: 0;
    height: auto;
}
.mdw-team-member-slider p{
    margin: 0;
}
.mdw-team-member-slider .mdw-team-member-slider-back .elementor-widget-heading{
    overflow: hidden;
}
.mdw-team-member-slider .mdw-team-member-slider-back .elementor-widget-heading .elementor-widget-container{
    display: flex;
    animation: sliding100 calc(var(--i-speed)/(var(--speed,5)/5)) linear infinite;
}
.mdw-team-member-slider .mdw-team-member-slider-back .e-con:nth-of-type(even) .elementor-widget-heading .elementor-widget-container,
.mdw-team-member-slider .mdw-team-member-slider-back .e-container:nth-of-type(even) .elementor-widget-heading .elementor-widget-container{
    position: relative;
    left: calc(-1*var(--i-width));
    --direction: -1;
}
.mdw-team-member-slider .mdw-team-member-slider-back .elementor-widget-heading .elementor-heading-title{
    white-space: nowrap;
}
.mdw-team-member-slider .mdw-team-member-slider-left .elementor-icon-wrapper,
.mdw-team-member-slider .mdw-team-member-slider-right .elementor-icon-wrapper{
    display: flex;
}

/* Left, right arrows */

.mdw-team-member-slider .elementor-widget-icon .elementor-icon{
    width: 0.6em;
    height: 0.6em;
}
.mdw-team-member-slider .elementor-widget-icon.mdw-team-member-slider-right .elementor-icon{
    transform: scaleX(-1);
}
.mdw-team-member-slider .elementor-widget-icon .elementor-icon i{
    width: 100%;
    height: 0.03em;
    background: currentColor;
    position: relative;
    transform: translateY(0.3em);
}
.mdw-team-member-slider .elementor-widget-icon .elementor-icon i:before,
.mdw-team-member-slider .elementor-widget-icon .elementor-icon i:after{
    content: "";
    position: absolute;
    width: 70%;
    transform: rotate(45deg) translateX(-0.012em);
    transform-origin: left center;
    height: 0.03em;
    background: currentColor;
    left: 0;
}
.mdw-team-member-slider .elementor-widget-icon .elementor-icon i:after{
    transform: rotate(-45deg) translateX(-0.012em);
}
@media (min-width: 768px){
.mdw-team-member-slider .mdw-team-member-slider-left,
.mdw-team-member-slider .mdw-team-member-slider-right{
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s linear, transform 0.1s linear;
    right: unset !important;
}
.mdw-team-member-slider .mdw-team-member-slider-left.active,
.mdw-team-member-slider .mdw-team-member-slider-right.active{
    opacity: 1;
}
.mdw-team-member-slider .mdw-team-member-slider-left .elementor-icon-wrapper,
.mdw-team-member-slider .mdw-team-member-slider-right .elementor-icon-wrapper{
    transform: translate(30%,30%);
}
.mdw-team-member-slider .mdw-team-member-slider-left .elementor-widget-container,
.mdw-team-member-slider .mdw-team-member-slider-right .elementor-widget-container{
    background: none !important;
}
}
@media (max-width: 767px){
.mdw-team-member-slider .mdw-team-member-slider-left,
.mdw-team-member-slider .mdw-team-member-slider-right{
    transform: translateY(-50%) !important;
    cursor: pointer;
    transition: opacity 0.5s linear 0.2s;
}
.mdw-team-member-slider:not(.init) .mdw-team-member-slider-left,
.mdw-team-member-slider:not(.init) .mdw-team-member-slider-right{
    opacity: 0;
}
.mdw-team-member-slider .mdw-team-member-slider-left .elementor-widget-container,
.mdw-team-member-slider .mdw-team-member-slider-right .elementor-widget-container{
    backdrop-filter: blur(15px);
    overflow: hidden;
}
}
@keyframe sliding100{
0%{ transform: translateX(0); }
100%{ transform: translateX(calc(-1*var(--direction,1)*100%/var(--amount,2))); }
}
@-webkit-keyframes sliding100 {
0%{ transform: translateX(0); }
100%{ transform: translateX(calc(-1*var(--direction,1)*100%/var(--amount,2))); }
}
@-moz-keyframes sliding100 {
0%{ transform: translateX(0); }
100%{ transform: translateX(calc(-1*var(--direction,1)*100%/var(--amount,2))); }
}
@-o-keyframes sliding100 {
0%{ transform: translateX(0); }
100%{ transform: translateX(calc(-1*var(--direction,1)*100%/var(--amount,2))); }
}
@keyframes sliding100 {
0%{ transform: translateX(0); }
100%{ transform: translateX(calc(-1*var(--direction,1)*100%/var(--amount,2))); }
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
if(!MDWNonce106){
var MDWNonce106 = true
var $ = jQuery
$(document).ready(function(){

var current = [],
    prev = [],
    clickLock = [],
    next = [],
    x = [], y = [],
    scrollAmount,
    arrows = [],
    arrowLeft = [],
    arrowRight = [],
    backs = [],
    fronts = []
    
function slideText(){
$('.mdw-team-member-slider .mdw-team-member-slider-back .elementor-widget-heading').each(function(i){
    var $this = $(this),
        container = $this.find('.elementor-widget-container'),
        headings =  $this.find('.elementor-heading-title'), 
        heading = headings.eq(0),
        width, amount, headingText
        
    headingText = heading.html().endsWith('&nbsp;') ? heading.html().slice(0, -6) : heading.html()
    heading.html(headingText + '&nbsp;')
    width = heading.width()
    if(width){
        amount = Math.ceil($(window).width()/width)
        container.width((amount+1)*width)
        $this.css('--i-width', width + 'px')
        $this.css('--amount', amount+1)
        $this.css('--i-speed', (width/100) + 's')
        headings.not(':eq(0)').remove()
        for(var i = 0; i < amount; i++){
            container.append(heading[0].outerHTML)
        }
    }
})  
}
    
function setHeight(){
$('.mdw-team-member-slider').each(function(i){
    var maxHeight = 0,
        headingFound = false,
        headingIndex, headingHeight
        
    fronts[i].each(function(j){
        if($(this).find('.e-con-inner').outerHeight() > maxHeight){
            maxHeight = $(this).find('.e-con-inner').outerHeight()
        }
        if($(this).find('.elementor-widget-heading').length){
            headingIndex = j
            headingFound = true
            headingHeight = $(this).find('.elementor-widget-heading').outerHeight()
        }
    })
    fronts[i].each(function(j){
        if( j !== headingIndex ){
            $(this).find('.elementor-widget-image').css('margin-top', headingHeight)
        }
    })
    console.log(maxHeight)
    backs[i].css('height', maxHeight)
    fronts[i].css('height', maxHeight)
    $(this).find('.mdw-team-member-slider-back, .mdw-team-member-slider-front').css('height', maxHeight)
})
}

function initialAnimation(el){
    if(el.offset().top < $(window).scrollTop() + $(window).height() - 200){ el.addClass('init') }
}

function init(){
slideText()
$('.mdw-team-member-slider').each(function(i){
    
    current[i] = 0
    prev[i] = current[i]
    clickLock[i] = false
    next[i] = true
    
    backs[i] = $(this).find('.mdw-team-member-slider-back').find('.e-con, .e-container')
    fronts[i] = $(this).find('.mdw-team-member-slider-front').find('.e-con, .e-container')
    
    backs[i].eq(current[i]).addClass('active')
    fronts[i].eq(current[i]).addClass('active')
    
    /* DOM Initialization */
    arrows[i] = $(this).find('.mdw-team-member-slider-left, .mdw-team-member-slider-right')
    arrowLeft[i] = $(this).find('.mdw-team-member-slider-left')
    arrowRight[i] = $(this).find('.mdw-team-member-slider-right')
})
setHeight()
$('.mdw-team-member-slider').each(function(i){
    var initalX = $(this).outerWidth()/2,
        initalY = $(this).outerHeight()/2
    arrows[i].css('transform', 'translate(' + initalX + 'px,' + initalY + 'px)')
    initialAnimation($(this))
})
}
init()

$(window).on('resize', function(){
    slideText()
    setHeight()
    $('.mdw-team-member-slider').each(function(){ initialAnimation($(this)) })
})

function getIndex(selector, $this){
    var index
    selector.each(function(i, el){
        if( $this.is(el) ) index = i
    })
    return index
}

$('.mdw-team-member-slider').on('click', function(e){

var i = getIndex($('.mdw-team-member-slider'), $(this))

if(clickLock[i]) return
clickLock[i] = true

var containerLeft = $(this).offset().left,
    imageLeft = $(this).find('.elementor-widget-image').offset().left - containerLeft,
    imageRight = imageLeft + $(this).find('.elementor-widget-image').width(),
    len = $(this).find('.mdw-team-member-slider-back').find('.e-con, .e-container').length,
    arrowClick = $(e.target).closest('.mdw-team-member-slider-left, .mdw-team-member-slider-right').length

if(arrowClick){
    if($(e.target).closest('.mdw-team-member-slider-left').length){
        next[i] = false
        $(this).addClass('up')
    }else{
        next[i] = true
        $(this).removeClass('up')
    }
}else{
    x[i] = e.pageX - $(this).offset().left
    if(x[i] < imageLeft){
        next[i] = false
        $(this).addClass('up')
    }else if(x[i] > imageRight){
        next[i] = true
        $(this).removeClass('up')
    }else{
        clickLock[i] = false
        return
    }
}


if(next[i]){
    current[i] = (current[i] == len - 1) ? 0 : current[i] + 1
}else{
    current[i] = (current[i] == 0) ? len - 1 : current[i] - 1
}

setTimeout(function(){
    backs[i].eq(prev[i]).removeClass('active')
    fronts[i].eq(prev[i]).removeClass('active')
    backs[i].eq(current[i]).addClass('active')
    fronts[i].eq(current[i]).addClass('active')
    backs[i].eq(prev[i]).addClass('prev-active')
    fronts[i].eq(prev[i]).addClass('prev-active')
    setTimeout(function(){
        backs[i].eq(prev[i]).removeClass('prev-active')
        fronts[i].eq(prev[i]).removeClass('prev-active')
        prev[i] = current[i]
        clickLock[i] = false
    },1000+200)
},10)
})

function showArrow(i, imageLeft, imageRight, y){
    arrows[i].css('transform', 'translate(' + x[i] + 'px,' + y + 'px)')
    arrows[i].addClass('active')
    if(x[i] < imageLeft){
        arrowRight[i].removeClass('active')
    }else if(x[i] > imageRight){
        arrowLeft[i].removeClass('active')
    }else{
        arrows[i].removeClass('active')
    }
}

$(window).on('mousemove', function(e){
$('.mdw-team-member-slider').each(function(i){
    
    var $this = $(this),
        containerLeft = $(this).offset().left,
        imageLeft = $(this).find('.elementor-widget-image').offset().left - containerLeft,
        imageRight = imageLeft + $(this).find('.elementor-widget-image').width()
    
    x[i] = e.pageX - $(this).offset().left
    y[i] = e.pageY - $(this).offset().top
    scrollAmount = $(window).scrollTop()
    showArrow(i, imageLeft, imageRight, y[i])
})
})


$(window).on('scroll', function(e){
$('.mdw-team-member-slider').each(function(i){
    
    var containerLeft = $(this).offset().left,
        imageLeft = $(this).find('.elementor-widget-image').offset().left - containerLeft,
        imageRight = imageLeft + $(this).find('.elementor-widget-image').width(),
        scrollDiff = $(window).scrollTop() - scrollAmount,
        yOnScroll
    
    if(y[i] !== undefined){
        yOnScroll = y[i] + scrollDiff
        if(yOnScroll <= 0 || yOnScroll >= $(this).height() ){
            arrows[i].removeClass('active')
        }else{
            showArrow(i, imageLeft, imageRight, yOnScroll)
        }
    }
    initialAnimation($(this))
})
})
$('.mdw-team-member-slider').on('mouseleave', function(e){
    var i = getIndex($('.mdw-team-member-slider'), $(this))
    arrows[i].removeClass('active')
})

$(document).on('mouseleave', function(){
    for(var i = 0; i < arrows.length; i++){ arrows[i].removeClass('active') }
})

})
}
</script>