JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="swiper  lookslide">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="https://source.unsplash.com/user/pacificofficeinteriors"></div>
    <div class="swiper-slide"><img src="https://source.unsplash.com/user/pacificofficeinteriors"></div>
    <div class="swiper-slide"><img src="https://source.unsplash.com/user/pacificofficeinteriors"></div>
    <div class="swiper-slide"><img src="https://source.unsplash.com/user/pacificofficeinteriors"></div>
  </div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

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

CSS

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

.swiper .lookslide {}

.swiper-slide {}

.swiper-button-prev,
.swiper-button-next {
  color: #000;
}

img {
  max-width: 100%;
  height: auto;
}

JavaScript

var swiper = new Swiper('.lookslide', {
  // Optional parameters
  // direction: 'vertical',
  loop: true,
  speed: 900,
  // centeredSlides: true,
  slidesPerView: 2,
  spaceBetween: 0,
  effect: "slide",
  // fadeEffect: {
  //   crossFade: true // クロスフェードさせる
  // },
  // autoplay:{
  //   delay: 3000,
  //   disableOnInteraction: false,
  // },

  // If we need pagination
  // pagination: {
  //   el: '.swiper-pagination',
  //   clickable: true
  // },

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

  breakpoints: {
    767: {
      slidesPerView: 1,
      spaceBetween: 10
    }
  }

});