XWedzMq

index.html

<!-- Slider main container -->
<h1> Curved Carousel </h1>

<div class="carousel-wrapper">
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
       <div class="swiper-slide"><img src="https://images.pexels.com/photos/5137664/pexels-photo-5137664.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /></div>
    <div class="swiper-slide">
      <img src="https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    </div>
    <div class="swiper-slide">
      <img src="https://images.pexels.com/photos/1757363/pexels-photo-1757363.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
    </div>
    <div class="swiper-slide"><img src="https://images.pexels.com/photos/2387418/pexels-photo-2387418.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /></div>
        <div class="swiper-slide"><img src="https://images.pexels.com/photos/2662116/pexels-photo-2662116.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /></div>
    
         
    
            <div class="swiper-slide"><img src="https://images.pexels.com/photos/235621/pexels-photo-235621.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /></div>
    
            <div class="swiper-slide"><img src="https://images.pexels.com/photos/1820563/pexels-photo-1820563.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /></div>

  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev swiper-btn"></div>
  <div class="swiper-button-next swiper-btn"></div>


</div>
</div>

script.js

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  breakpoints: {
        320: {
          slidesPerView: 1,
        },
        520: {
          slidesPerView: 2,
         
        },
        1024: {
          slidesPerView: 3,
        },
       1600: {
          slidesPerView: 4,
        },

      },
  loop: true,
   spaceBetween: 50,
  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.3.2/swiper-bundle.min.js"></script>

style.css

html{
  background : #040303;
  height: 100vh;
}

h1{
  text-align: center;
  margin : 5rem 0 ;
  color: #EDEDED;
  font-size : 3rem;
}

img{ 
width : 30rem;
height: 30rem;
object-fit: cover;
}

.swiper-btn{
  color: white;
}

.swiper::before{
  content: "";
  right : -10px ; 
  left : -10px ;
  top : -5.5rem;
  height : 10rem;
  background : #040303 ;
  position: absolute;
  z-index : 999;
  border-radius: 51% 49% 48% 52% / 49% 50%     50% 51% 
}


.swiper::after{
  content: "";
  right : -20px ; 
  left : -20px ;
  bottom : -6rem;
  height : 10rem;
  background : #040303 ;
  position: absolute ;
  z-index : 999;
  border-radius: 51% 49% 48% 52% / 49% 50%     50% 51% 
}

xwedzmq.markdown

XWedzMq

A Pen by Avinash Muralidharan on CodePen.

License.