<div class="slider-container">
  <div class="sliders">
    <div class="slide" tabindex="0" style="background-image: url(https://courses.goapp.co.il/wp-content/uploads/2024/08/MG_0677-copy-scaled.jpg)"></div>
    <div class="slide" tabindex="0" style="background-image: url(https://courses.goapp.co.il/wp-content/uploads/2024/08/יש-להמשיך-copy-scaled.jpg)"></div>
    <div class="slide" tabindex="0" style="background-image: url(https://courses.goapp.co.il/wp-content/uploads/2024/08/MG_0694-copy-2-scaled.jpg)"></div>
    <div class="slide" tabindex="0" style="background-image: url(https://courses.goapp.co.il/wp-content/uploads/2024/08/MG_0684-copy-scaled.jpg)"></div>
    <div class="slide" tabindex="0" style="background-image: url(https://courses.goapp.co.il/wp-content/uploads/2024/08/MG_0700-copy-scaled.jpg)"></div>
    <div class="slide" tabindex="0" style="background-image: url(https://courses.goapp.co.il/wp-content/uploads/2024/08/MG_0654-copy-scaled.jpg)"></div>
    <div class="slide" tabindex="0" style="background-image: url(https://courses.goapp.co.il/wp-content/uploads/2024/08/MG_0703-copy-scaled.jpg)"></div>
    <div class="slide" tabindex="0" style="background-image: url(https://courses.goapp.co.il/wp-content/uploads/2024/08/MG_0629-copy-scaled.jpg)"></div>
    <div class="slide" tabindex="0" style="background-image: url(https://courses.goapp.co.il/wp-content/uploads/2024/08/MG_0608-copy-scaled.jpg)"></div>
    <div class="slide" tabindex="0" style="background-image: url(https://courses.goapp.co.il/wp-content/uploads/2024/08/MG_0597-copy-scaled.jpg)"></div>
    <div class="slide" tabindex="0" style="background-image: url(https://courses.goapp.co.il/wp-content/uploads/2024/08/MG_0576-copy-scaled.jpg)"></div>
    <div class="slide" tabindex="0" style="background-image: url(https://courses.goapp.co.il/wp-content/uploads/2024/08/MG_1091-scaled.jpg)"></div>
    </div>      
</div>
<style>
:root{
    --index: calc(1vw + 1vh);
    --transition: cubic-bezier(.1, .7, 0, 1);
}

.slider-container{
    display: flex;
    align-sliders: center;
    justify-content: center;
}

.sliders{
    display: flex;
    gap: 0.4rem;
    perspective: calc(var(--index) * 35);
}

.slide{
    width: calc(var(--index) * 3);
    height: calc(var(--index) * 12);
    background-color: #222;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    filter: grayscale(1) brightness(.5);
    transition: transform 1.25s var(--transition), filter 3s var(--transition), width 1.25s var(--transition);
    will-change: transform, filter, rotateY, width;
}

.slide::before, .slide::after{
    content: '';
    position: absolute;
    height: 100%;
    width: 20px;
    right: calc(var(--index) * -1);
}

.slide::after{
    left: calc(var(--index) * -1);
}

.sliders .slide:hover{
    filter: inherit;
    transform: translateZ(calc(var(--index) * 10));
}

.sliders .slide:hover + *{
    filter: inherit;
    transform: translateZ(calc(var(--index) * 8.5)) rotateY(35deg);
    z-index: -1;
}

.sliders .slide:hover + * + *{
    filter: inherit;
    transform: translateZ(calc(var(--index) * 5.6)) rotateY(40deg);
    z-index: -2;
}

.sliders .slide:hover + * + * + *{
    filter: inherit;
    transform: translateZ(calc(var(--index) * 2.5)) rotateY(30deg);
    z-index: -3;
}

.sliders .slide:hover + * + * + * + *{
    filter: inherit;
    transform: translateZ(calc(var(--index) * .6)) rotateY(15deg);
    z-index: -4;
}

.sliders .slide:has( + :hover){
    filter: inherit;
    transform: translateZ(calc(var(--index) * 8.5)) rotateY(-35deg);
}

.sliders .slide:has( + * + :hover){
    filter: inherit;
    transform: translateZ(calc(var(--index) * 5.6)) rotateY(-40deg);
}

.sliders .slide:has( + * + * + :hover){
    filter: inherit;
    transform: translateZ(calc(var(--index) * 2.5)) rotateY(-30deg);
}

.sliders .slide:has( + * + * + * + :hover){
    filter: inherit;
    transform: translateZ(calc(var(--index) * .6)) rotateY(-15deg);
}

.sliders .slide:active, .sliders .slide:focus {
	width: 28vw;
	filter: inherit;
	z-index: 100;
	transform: translateZ(calc(var(--index) * 10));
    margin: 0 .45vw;
}
</style>