Want to get this as ready made template with just 1 CLICK INSTALL?
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(' ') ? heading.html().slice(0, -6) : heading.html() heading.html(headingText + ' ') 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>