<!DOCTYPE html>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

  <!-- Demo styles -->
  <style>

    /*.swiper {*/
    /*  width: 100%;*/
    /*  height: 100%;*/
    /*}*/

    /*.swiper-slide {*/
    /*  text-align: center;*/
    /*  font-size: 18px;*/
    /*  display: flex;*/
    /*  justify-content: center;*/
    /*  align-items: center;*/
    /*}*/

    /*  .swiper-slide.  {*/
    /*      width:50%;*/
    /*  } */
   
   .imgresizer {
    text-align: center;
    /*height: 650px;*/
    width: 100%;
}

.imgresizer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-wrapper {
    align-items: center;
}

@media screen and (max-width: 767px) {
    .imgresizer {
        height: 400px !important;
    }
}

@media screen and (min-width: 768px) {
    .imgresizer {
        height: 600px !important;
    }
}
  </style> 

<section class="pb-5"> 
    <div class="container"> 
        <div class="row">
            <div class="col-12 text-center">
       <div class="swiper mySwiper " >
       <div class="swiper-wrapper">
      <div class="swiper-slide  "><div class="imgresizer">
          <img src="assets/images/slide/1.jpg"class="img-fluid  ">
      </div></div>
      <div class="swiper-slide "><div class="imgresizer"><img src="assets/images/slide/2.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide  "><div class="imgresizer"><img src="assets/images/slide/3.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide "><div class="imgresizer"><img src="assets/images/slide/4.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide "><div class="imgresizer"><img src="assets/images/slide/5.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide "><div class="imgresizer"><img src="assets/images/slide/6.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide "><div class="imgresizer"><img src="assets/images/slide/7.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide  "><div class="imgresizer"><img src="assets/images/slide/8.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide   "><div class="imgresizer"><img src="assets/images/slide/9.jpg"class="img-fluid"></div></div>
       <div class="swiper-slide   "><div class="imgresizer"><img src="assets/images/slide/10.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide   "><div class="imgresizer"><img src="assets/images/slide/11.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide  "><div class="imgresizer"><img src="assets/images/slide/12.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide  "><div class="imgresizer"><img src="assets/images/slide/13.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide   "><div class="imgresizer"><img src="assets/images/slide/14.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide   "><div class="imgresizer"><img src="assets/images/slide/15.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide   "><div class="imgresizer"><img src="assets/images/slide/16.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide  "><div class="imgresizer"><img src="assets/images/slide/17.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide   "><div class="imgresizer"><img src="assets/images/slide/18.jpg"class="img-fluid"></div></div>
       <div class="swiper-slide  "><div class="imgresizer"><img src="assets/images/slide/19.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide  "><div class="imgresizer"><img src="assets/images/slide/20.jpg"class="img-fluid"></div></div>
      
       <div class="swiper-slide"><div class="imgresizer"><img src="assets/images/slide/22.jpg"class="img-fluid"></div></div>
       <div class="swiper-slide"><div class="imgresizer"><img src="assets/images/slide/23.jpg"class="img-fluid"></div></div>
      <div class="swiper-slide"><div class="imgresizer"><img src="assets/images/slide/24.jpg"class="img-fluid"></div></div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>  
            </div>
        </div>
    </div>
</section>

  <!-- Swiper -->
  

  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
        loop: true,
       autoplay: {
        delay: 1000,},
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  </script>


