Swiper.js Изменить размер слайда слева и справа от центра

Question

Я только изучаю JavaScript и столкнулся с проблемой.

Ниже я попытался описать структуру и как должно отображаться.

Структура слайдера:

На странице отображается 5 слайдов в ряд из общего количества N.
Центральный слайд всегда активен.
По бокам от центрального расположены 4 неактивных слайда (по два с каждой стороны).

Активный слайд (центр):

Размер: 320 × 536 px
Отображается картинка и контент (описание)

Неактивные слайды:

Контент скрыт (видна только картинка).
Ближайшие к центру (2 слайда): Размер: 200 × 200 px
Крайние (2 слайда): Размер: 100 × 100 px

При переключении активный слайд становится меньше, а не активный перемещается в центр и принимает правила активного(становится больше и появляется текст) и все слайды подстраиваются под заданные размеры.

Если я пробую изменить размеры неактивных слайдов через scale, слайдер ломается.

Прикрепляю скриншот, что именно я хочу сделать..

Спасибо заранее. На данном этапе мне все это кажется сложным.

 <div class="container">
     <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="slider__img" src="" alt="">
              <div class="slider__content"></div>
            </div>
            <div class="swiper-slide">
              <img class="slider__img" src="" alt="">
              <div class="slider__content"></div>
            </div>
            <div class="swiper-slide">
              <img class="slider__img" src="" alt="">
              <div class="slider__content"></div>
            </div>
            <div class="swiper-slide">
              <img class="slider__img" src="" alt="">
              <div class="slider__content"></div>
            </div>
            <div class="swiper-slide">
              <img class="slider__img" src="" alt="">
              <div class="slider__content"></div>
            </div>
            <div class="swiper-slide">
              <img class="slider__img" src="" alt="">
              <div class="slider__content"></div>
            </div>
        </div>
    </div>

Answer 1

Для реализации слайдера с таким поведением лучше всего использовать комбинацию CSS-трансформаций и JavaScript (или готовую библиотеку типа Swiper с кастомными модификациями)

Answer 2

Для мобильных разрешений не оптимизировал (не знаю требования), но на desktop - вроде норм:

const slides = [{
    id: 1,
    image: 'https://placehold.co/320x536/EEE/31343C',
    title: 'Слайд 1',
    description: 'Описание слайда 1. Здесь может быть ваш текст.'
  },
  {
    id: 2,
    image: 'https://placehold.co/320x536/EEE/31343C',
    title: 'Слайд 2',
    description: 'Описание слайда 2. Здесь может быть ваш текст.'
  },
  {
    id: 3,
    image: 'https://placehold.co/320x536/EEE/31343C',
    title: 'Слайд 3',
    description: 'Описание слайда 3. Здесь может быть ваш текст.'
  },
  {
    id: 4,
    image: 'https://placehold.co/320x536/EEE/31343C',
    title: 'Слайд 4',
    description: 'Описание слайда 4. Здесь может быть ваш текст.'
  },
  {
    id: 5,
    image: 'https://placehold.co/320x536/EEE/31343C',
    title: 'Слайд 5',
    description: 'Описание слайда 5. Здесь может быть ваш текст.'
  },
  {
    id: 6,
    image: 'https://placehold.co/320x536/EEE/31343C',
    title: 'Слайд 6',
    description: 'Описание слайда 6. Здесь может быть ваш текст.'
  },
  {
    id: 7,
    image: 'https://placehold.co/320x536/EEE/31343C',
    title: 'Слайд 7',
    description: 'Описание слайда 7. Здесь может быть ваш текст.'
  },
  {
    id: 8,
    image: 'https://placehold.co/320x536/EEE/31343C',
    title: 'Слайд 8',
    description: 'Описание слайда 8. Здесь может быть ваш текст.'
  },
];

const swiperWrapper = document.querySelector('.swiper-wrapper');
slides.forEach(slide => {
  const slideElement = document.createElement('div');
  slideElement.className = 'swiper-slide';
  slideElement.innerHTML = `
                <img src="${slide.image}" alt="${slide.title}" class="slide-image">
                <div class="slide-content">
                    <h3>${slide.title}</h3>
                    <p>${slide.description}</p>
                </div>
            `;
  swiperWrapper.appendChild(slideElement);
});

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 5,
  centeredSlides: true,
  initialSlide: 2,
  spaceBetween: 20,
  grabCursor: true,
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    // Когда ширина экрана <= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 10
    },
    // Когда ширина экрана <= 767px
    767: {
      slidesPerView: 3,
      spaceBetween: 15
    },
    // Когда ширина экрана <= 1024px
    1024: {
      slidesPerView: 5,
      spaceBetween: 15
    }
  },
  touchRatio: 1.5,
  slideToClickedSlide: true,
  keyboard: {
    enabled: true,
  },
});

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #1e1c39;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.swiper-container {
  width: 100%;
  max-width: 1200px;
  padding: 50px 0;
  overflow: visible;
}

.swiper-wrapper {
  align-items: center;
}

.swiper-slide {
  background: #777;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
  overflow: hidden;
}

.swiper-slide-active .slide-content {
  opacity: 1;
  transform: translateY(0);
}

.swiper-slide {
  width: 100px;
  height: 100px;
}

.swiper-slide-prev,
.swiper-slide-next {
  width: 200px;
  height: 200px;
}

.swiper-slide-active {
  width: 320px;
  height: 536px;
}

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

.swiper-pagination-bullet {
  background: white;
}

.swiper-pagination-bullet-active {
  background: #fff;
}

@media (max-width: 1024px) {
  .swiper-slide {
    width: 80px;
    height: 80px;
  }

  .swiper-slide-prev,
  .swiper-slide-next {
    width: 160px;
    height: 160px;
  }

  .swiper-slide-active {
    width: 280px;
    height: 470px;
  }
}

@media (max-width: 767px) {
  .swiper-container {
    padding: 30px 0;
  }

  .swiper-slide {
    width: 60px;
    height: 60px;
  }

  .swiper-slide-prev,
  .swiper-slide-next {
    width: 120px;
    height: 120px;
  }

  .swiper-slide-active {
    width: 200px;
    height: 336px;
  }

  .slide-content {
    padding: 10px;
  }

  .slide-content h3 {
    font-size: 14px;
    margin: 0 0 5px;
  }

  .slide-content p {
    font-size: 12px;
    margin: 0;
  }

  .swiper-button-next,
  .swiper-button-prev {
    transform: scale(0.7);
  }
}

@media (max-width: 480px) {
  .swiper-slide {
    width: 40px;
    height: 40px;
  }

  .swiper-slide-prev,
  .swiper-slide-next {
    width: 80px;
    height: 80px;
  }

  .swiper-slide-active {
    width: 160px;
    height: 270px;
  }
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiper слайдер с разными размерами</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css" />
</head>

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
    </div>
    <div class="swiper-pagination"></div>

    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

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

</html>

БЛОГ НА HUSL

Swiper.js Изменить размер слайда слева и справа от центра

Ответы (2 шт):