طراحی اسلایدر خرید بلیت کنسرت!

<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>