I want to be able to use images of any dimensions in my slider which have a big centered image and not-active slides are like thumbnails.
If you look at this you will understand what I want.
var mySwiper = new Swiper(".swiper-container", {
spaceBetween: 20,
autoHeight:false,
slidesPerView: 9,
centeredSlides: true,
roundLengths: false,
loop: true,
autoplay:true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});.swiperTitle{text-align:center; margin-block:3rem; font-size:2rem;}
.swiper-container {
width:80vw;
margin-top:3rem;
}
.swiper-container .swiper-wrapper{align-items: flex-end !important;}
.swiper-container .swiper-wrapper .swiper-slide {
width:100px;
}
.swiper-container .swiper-wrapper .swiper-slide img{
/* max-width:100%; */
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-slide.swiper-slide-active {
width:auto;
}
.swiper-slide.swiper-slide-active img{
height:400px !important;
width:auto;
}
.swiper-slide.swiper-slide-next {
}
.swiper-slide.swiper-slide-next img{
}
.swiper-slide.swiper-slide-prev {
}
.swiper-slide.swiper-slide-prev img{
}
.swiper-slide.swiper-slide-active {
width: auto !important;
}<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiperTitle "><h1>I'm Center</h1></div>
<div class="swiper-container ">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846190/slides/gm1aj021pqkvgwxmqh2m.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846167/slides/hrxfcjedxuqjxu1vlmnk.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846133/slides/cpvj6m4vskamatcb6cyx.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846133/slides/krypp2ay6jfy3s7cacxz.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846133/slides/x6wdikxysfxnhuxbuq6x.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846132/slides/womfztcdbqm7cktnrgw6.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846166/slides/aned0mhlxw6oejphkxhr.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846132/slides/vh3xdynitltekz5oaxht.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699350937/slide6_kvs1ak.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699350948/slide2_fnns1s.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699350937/slide4_lmx2jc.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699350952/slide8_im3qdf.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699350937/slide4_lmx2jc.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699350937/slide4_lmx2jc.webp">
</div>
<div class="swiper-slide"><img src="https://res.cloudinary.com/dmgwjncsj/image/upload/v1699846166/slides/mumlvyxkrallvxc90j3i.webp">
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>It's not working perfectly.
I have created something in Owl Carousel and hope it will be helpful for your scenario. Check it:
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: true,
dots: false,
autoWidth: false,
items: 7,
margin: 20
});.my-slider {
width: 1670px;
margin: auto;
}
img {
max-width: 100%;
}
.owl-stage {
display: flex;
align-items: flex-end;
height: 90vh;
}
.owl-carousel .owl-item img {
border-radius: 8px;
}
.owl-item.active {
transition: all 0.5s ease-in-out;
width: 150px !important;
}
.owl-item.active.center {
width: 650px !important;
}
.owl-item.active > div {
display: flex;
justify-content: center;
}
.owl-item.active.center img {
max-height: 800px !important;
width: auto;
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
padding: 10px !important;
background: #ddd;
border-radius: 50px;
height: 40px;
width: 40px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2//2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme my-slider">
<div><img src="https://via.placeholder.com/1300x1000/936/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/800x1000/693/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/1300x1150/369/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/1500x1050/f63/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/900x1150/936/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/1300x1150/693/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/1000x1150/369/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/600x600/f6f/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/1300x1150/e63/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/1000x1150/6f3/fff/" alt=""></div>
</div>