JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<div class="allblock">
  <div class="block-left">
    Левая колонка
  </div>

  <div class="block-right">
  <h2>Куртка зимняя, на меху ноуминус</h2>
    Выберите цветов товара
    <br /><br />

    <div class="swiperc">
      <div class="swiper">
        <div class="swiper-wrapper">
          <a class="swiper-slide" href=""><img src="https://i.pinimg.com/736x/1b/43/da/1b43da7e99f74011ce4b8c53b00a015f--pop-art-portraits-portrait-art.jpg" /></a>
          <a class="swiper-slide" href=""><img src="https://i.pinimg.com/736x/1b/43/da/1b43da7e99f74011ce4b8c53b00a015f--pop-art-portraits-portrait-art.jpg" /></a>
          <a class="swiper-slide" href=""><img src="https://i.pinimg.com/736x/1b/43/da/1b43da7e99f74011ce4b8c53b00a015f--pop-art-portraits-portrait-art.jpg" /></a>
          <a class="swiper-slide" href=""><img src="https://i.pinimg.com/736x/1b/43/da/1b43da7e99f74011ce4b8c53b00a015f--pop-art-portraits-portrait-art.jpg" /></a>
          <a class="swiper-slide" href=""><img src="https://i.pinimg.com/736x/1b/43/da/1b43da7e99f74011ce4b8c53b00a015f--pop-art-portraits-portrait-art.jpg" /></a>
          <a class="swiper-slide" href=""><img src="https://i.pinimg.com/736x/1b/43/da/1b43da7e99f74011ce4b8c53b00a015f--pop-art-portraits-portrait-art.jpg" /></a>
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </div>

CSS

.allblock{
  max-width: 900px;
  min-width: 300px;
  margin: 0 auto;
  padding: 50px;
}
.block-left{
  width:60%;
  background: #ddd;
  padding: 20px;
  margin-right: 20px;
}
.block-right{
  width:40%;
  margin-left: 20px;
}
.block-right h2{
  font-size:20px;
  margin-bottom:20px;
}


.swiperc{
position: relative;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.swiper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  order:2;
}

.swiper-vertical>.swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-pointer-events {
  touch-action: pan-y;
}

.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left:...

JavaScript

var swiper = new Swiper('.swiper', {
   slidesPerView: 4,
   spaceBetween: 15, //отступы между слайдами
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev',
   },
   breakpoints: {
      800: {
       slidesPerView: 4,
     },
     700: {
       slidesPerView: 3,
     },
     500: {
       slidesPerView: 2,
     },
     350: {
       slidesPerView: 1,
     }
   }
 });