<div id="mySwiper" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="card">
        <img
          src="https://picsum.photos/320/320?random1
      "
          alt=""
          class="card__img"
        />
        <div class="card__body">
          <h3>Lorem ipsum0</h3>
          <span>Web Designer</span>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        <img
          src="https://picsum.photos/320/320?random2
      "
          alt=""
          class="card__img"
        />
        <div class="card__body">
          <h3>Lorem ipsum0</h3>
          <span>Web Designer</span>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        <img
          src="https://picsum.photos/320/320?random3
      "
          alt=""
          class="card__img"
        />
        <div class="card__body">
          <h3>Lorem ipsum0</h3>
          <span>Web Designer</span>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        <img
          src="https://picsum.photos/320/320?random4
      "
          alt=""
          class="card__img"
        />
        <div class="card__body">
          <h3>Lorem ipsum0</h3>
          <span>Web Designer</span>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        <img
          src="https://picsum.photos/320/320?random5
      "
          alt=""
          class="card__img"
        />
        <div class="card__body">
          <h3>Lorem ipsum0</h3>
          <span>Web Designer</span>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        <img
          src="https://picsum.photos/320/320?random6
      "
          alt=""
          class="card__img"
        />
        <div class="card__body">
          <h3>Lorem ipsum0</h3>
          <span>Web Designer</span>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card">
        <img
          src="https://picsum.photos/320/320?random7
      "
          alt=""
          class="card__img"
        />
        <div class="card__body">
          <h3>Lorem ipsum0</h3>
          <span>Web Designer</span>
        </div>
      </div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  background-color: #eee;
}

.swiper-container {
  width: 100%;
}

.swiper-slide {
  width: auto !important;
}

.card {
  width: 240px;
  border-radius: 8px;
  background: white;
  overflow: hidden;
}

.card__img {
  display: block;
  width: 100%;
  height: 240px;
  -o-object-fit: cover;
     object-fit: cover;
}

.card__body {
  padding: 15px 20px;
  font-weight: 600;
  text-align: center;
}

.card__body > h3 {
  font-size: 1.25rem;
  line-height: 1.5;
}

.card__body > span {
  display: block;
  font-size: 1rem;
  color: #f44336;
}

const mySwiper = new Swiper('.swiper-container', {
  effect: 'coverflow',
  slidesPerView: 'auto',
  centeredSlides: true,
  coverflowEffect: {
    slideShadows: true,
    rotate: 20,
    stretch: 0,
    depth: 350,
    modifier: 1,
  },
});