I'm trying to create this slider with swiper enter image description here
My JS code:
var Swiper_Leaders = new Swiper('.onx-swiper-leaders', {
speed: 400,
centeredSlides: true,
slidesPerView: 'auto',
effect: 'coverflow',
coverflowEffect: {
rotate: 0,
stretch: 20,
slideShadows: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
My css:
.onx-swiper-leaders .onx-leaders .swiper-slide{
direction: ltr;
width: fit-content !important;
}
.onx-swiper-leaders .onx-leaders .swiper-slide:not(.swiper-slide-active){
filter: blur(3px);
scale: .9;
margin-top: 70px;
position: relative;
}
.onx-swiper-leaders .onx-leaders .swiper-slide-active {
filter: blur(0);
position: relative;
z-index: 6;
}
.onx-swiper-leaders .onx-leaders .swiper-slide-active .onx-leader .onx-leader-info {
display: flex;
}
My HtML:
<div class="swiper onx-swiper-leaders" dir="rtl">
<div class="swiper-wrapper onx-leaders">
<div class="swiper-slide">
<div class="onx-leader">
<div class="onx-leader-img">
<img src="assets/img/leader/leader-1.jpg" alt="Leader Image">
</div>
<div class="onx-leader-info">
<strong>Antonia Moore</strong>
<span>Real Estate Coach</span>
<p>
Realtyna Inc is a reputable company that specializes in providing advanced MLS Theme for wordpress solutions to real estate professionals. Their MLS SYNC system is a great addition to any real estate website looking to integrate MLS data into their website.
<br>
What sets Realtyna Inc apart from other companies is their innovative technology and commitment to customer satisfaction. They offer a wide range of features and customization options to fit the unique needs of each client.
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="onx-leader">
<div class="onx-leader-img">
<img src="assets/img/leader/leader-1.jpg" alt="Leader Image">
</div>
<div class="onx-leader-info">
<strong>Antonia Moore</strong>
<span>Real Estate Coach</span>
<p>
Realtyna Inc is a reputable company that specializes in providing advanced MLS Theme for wordpress solutions to real estate professionals. Their MLS SYNC system is a great addition to any real estate website looking to integrate MLS data into their website.
<br>
What sets Realtyna Inc apart from other companies is their innovative technology and commitment to customer satisfaction. They offer a wide range of features and customization options to fit the unique needs of each client.
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="onx-leader">
<div class="onx-leader-img">
<img src="assets/img/leader/leader-1.jpg" alt="Leader Image">
</div>
<div class="onx-leader-info">
<strong>Antonia Moore</strong>
<span>Real Estate Coach</span>
<p>
Realtyna Inc is a reputable company that specializes in providing advanced MLS Theme for wordpress solutions to real estate professionals. Their MLS SYNC system is a great addition to any real estate website looking to integrate MLS data into their website.
<br>
What sets Realtyna Inc apart from other companies is their innovative technology and commitment to customer satisfaction. They offer a wide range of features and customization options to fit the unique needs of each client.
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="onx-leader">
<div class="onx-leader-img">
<img src="assets/img/leader/leader-1.jpg" alt="Leader Image">
</div>
<div class="onx-leader-info">
<strong>Antonia Moore</strong>
<span>Real Estate Coach</span>
<p>
Realtyna Inc is a reputable company that specializes in providing advanced MLS Theme for wordpress solutions to real estate professionals. Their MLS SYNC system is a great addition to any real estate website looking to integrate MLS data into their website.
<br>
What sets Realtyna Inc apart from other companies is their innovative technology and commitment to customer satisfaction. They offer a wide range of features and customization options to fit the unique needs of each client.
</p>
</div>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
But the result that I'm getting is: enter image description here
But it isn't what I want. I want the active slide to be to the very right part of the container and the 2 previous slides under it in a blur form.
