Как сделать галерею картинок управляемую кнопками?

Question

не смог нагуглить ответ, много вариантов перепробовал поэтому пишу вопрос. Мне нужно сделать галерею с выборов, вот схема, как это должно выглядеть:

Т.е при нажатии на кнопку меняется текст и картинка, находиться все это дело в двух блоках т.к вся структура сайта на flex-box сделана. Еще думал насчёт адаптива, и пока даже ума не приложу, как это адекватно адаптировать. Возможно есть готовые решения на этот счёт? Буду благодарен за любую помощь. Спасибо!

Answer 1

такое можно сделать с помощью библиотеки Swiper.js. такой вариант получился у меня

var swiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  pagination: {
    clickable: true,
    type: 'custom',
    el: document.querySelector('.swiper-custom-pagination'),
    renderCustom: (swiper, current, total) => { // https://swiperjs.com/swiper-api#pagination
      let paginationMarkup = '';
      paginationMarkup += '<ul class="swiper-custom-pagination-list">';
      for (let i = 1; i <= total; i++) {
        if (current === i)
          paginationMarkup += `<li class="swiper-pagination-bullet active">кнопка ${i}</li>`;
        else
          paginationMarkup += `<li class="swiper-pagination-bullet">кнопка ${i}</li>`
      }
      paginationMarkup += '</ul>';

      return paginationMarkup;
    }
  },
});

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-custom-pagination {
  width: 256px !important;
}

.swiper-custom-pagination-list {
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
}

li.swiper-pagination-bullet {
  border: 1px solid #333;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
}

.swiper-custom-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-custom-pagination-title {
  margin-bottom: 1.5em;
}

.swiper-pagination-bullet {
  width: initial !important;
  height: initial !important;
  display: block !important;
  border-radius: initial !important;
  background: initial !important;
  opacity: initial !important;
}

.swiper-container {
  width: 600px;
  height: 460px;
  margin: 0 !important;
}

.swiper-slide {
  background-color: rgb(49, 0, 49);
  display: flex;
  flex-flow: column wrap;
  color: #fff;
  justify-content: center;
  align-items: center;
}

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

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>

<body>
  <div class="swiper-custom-wrapper">
    <div class="swiper-custom-pagination-wrapper">
      <div class="swiper-custom-pagination-title">
        <h2 class="swiper-custom-pagination-header">Заголовок</h2>
        <div class="swiper-custom-pagination-description">Декспришен</div>
      </div>
      <div class="swiper-custom-pagination"></div>
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://picsum.photos/500/300" class="swiper-slide__image" alt="">
          <div class="swiper-slide__text">описание</div>
        </div>
        <div class="swiper-slide"><img src="https://picsum.photos/500/300" class="swiper-slide__image" alt="">
          <div class="swiper-slide__text">описание</div>
        </div>
        <div class="swiper-slide"><img src="https://picsum.photos/500/300" class="swiper-slide__image" alt="">
          <div class="swiper-slide__text">описание</div>
        </div>
        <div class="swiper-slide"><img src="https://picsum.photos/500/300" class="swiper-slide__image" alt="">
          <div class="swiper-slide__text">описание</div>
        </div>
        <div class="swiper-slide"><img src="https://picsum.photos/500/300" class="swiper-slide__image" alt="">
          <div class="swiper-slide__text">описание</div>
        </div>
        <div class="swiper-slide"><img src="https://picsum.photos/500/300" class="swiper-slide__image" alt="">
          <div class="swiper-slide__text">описание</div>
        </div>
        <div class="swiper-slide"><img src="https://picsum.photos/500/300" class="swiper-slide__image" alt="">
          <div class="swiper-slide__text">описание</div>
        </div>
        <div class="swiper-slide"><img src="https://picsum.photos/500/300" class="swiper-slide__image" alt="">
          <div class="swiper-slide__text">описание</div>
        </div>
        <div class="swiper-slide"><img src="https://picsum.photos/500/300" class="swiper-slide__image" alt="">
          <div class="swiper-slide__text">описание</div>
        </div>
        <div class="swiper-slide"><img src="https://picsum.photos/500/300" class="swiper-slide__image" alt="">
          <div class="swiper-slide__text">описание</div>
        </div>
      </div>
    </div>
  </div>
  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>

</html>

p.s. сорямба за !important-ы, в редакторе so специфичность подключаемых файлов выше чем у css в редакторе

БЛОГ НА HUSL

Как сделать галерею картинок управляемую кнопками?

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