<!DOCTYPE html>
<html>
    <head>
        <meta name="vieport" content="width=device-width, initial-scale=1.0">
        <title>Swiper Card Slider</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="imgBx">
            <img src="1.png" />
          </div>
          <div class="content">
            <h2><span>Raksha Bandhan</span></h2>
          </div>
        </div>
        <div class="swiper-slide">
            <div class="imgBx">
            <img src="2.png" />
          </div>
          <div class="content">
            <h2><span>Raksha Bandhan</span></h2>
          </div>
        </div>
        <div class="swiper-slide">
            <div class="imgBx">
            <img src="3.png" />
          </div>
          <div class="content">
            <h2><span>Raksha Bandhan</span></h2>
          </div>
        </div>
        <div class="swiper-slide">
            <div class="imgBx">
            <img src="4.png" />
          </div>
          <div class="content">
            <h2><span>Raksha Bandhan</span></h2>
          </div>
        </div>
      </div>
        <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
        <script type="text/javascript">
        var swiper = new Swiper(".mySwiper", {
            effect: "cube",
            grabCursor: true,
            cubeEffect: {
              shadow: true,
              slideShadows: true,
              shadowOffset: 20,
              shadowScale: 0.94,
            },
          });
        </script>
    </body>
</html>



*
{

    margin: 0;
    padding: 0;
}
body
{
    background: #323232;
    min-height: 100vh;
}
.swiper
{
    width: 300px;
    height: 380px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
  }

  .swiper-slide
   {
    background-position: center;
    background-size: cover;
    background: #fff4f4;
  }
  .swiper .swiper-slide .imgBx img
  {
    position: absolute;
    height: 300px;
    height: 300px;
  }
  .swiper .swiper-slide .imgBx
  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .swiper .swiper-slide .content
  {
    position: absolute;
    bottom: 0;
    height: 80px;
    width: 100%;
    background: rgb(224, 219, 219);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper .swiper-slide .content h2
  {
    font-size: 20px;
  }
  .swiper .swiper-slide .content h2 span
  {
    font-size: 16px;
    color: #ff0000;
  }