A centered swiper slider/owl carousel with variable aspect ratio images

Question

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.

Enter image description here

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.

Answer 1

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>