Как сделать такой слайдер, как в макете?

Question

Как сделать такой слайдер, как в макете?

Рейтинг: 0Ответов: 1Опубликовано: 25.08.2023

В макете такой слайдер: ссылка на этот слайдер: https://xd.adobe.com/view/3831e990-1d2a-4aa1-9b83-f0ad445abd5d-6d62/screen/412772a8-93d7-425c-a81d-e3e3329ce836/

Чтобы можно было листать и тянуть с помощью мышки. И можно было с помощью стрелки листать. Макет из Adobe. Вот сам блок:

<div class="scroll_div_2">

<p> <!-- <span class="color_span"></span><span class="color_span"></span><span class="color_span"></span><span class="color_span"></span><span class="color_span"></span><span class="color_span"></span><span class="color_span"></span><span class="color_span"></span><span class="color_span"></span> --> ' . $colors_str_step_4 . '</p>

</div>

css javascript html slider

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Подключаете Swiper, добавляете нужные цвета и вешаете в параметры Swiper'а модуль Free Mode:

new Swiper('.slider-color', {
  slidesPerView: 'auto',
  spaceBetween: 5,
  freemode: true,
  navigation: {
    prevEl: '.slider-color__control-prev',
    nextEl: '.slider-color__control-next',
    disabledClass: 'slider-color__control--disabled'
  },
  on: {
    click: function(swiper) {
      var clickSlide = swiper.clickedSlide;
      if(clickSlide.classList.contains('slider-color__item--rainbow')) {
        console.log('вызвать палитру цветов');
      } else {
        console.log(clickSlide.style.backgroundColor); // Цвет можно задать через инлайн стили и сразу их получать через style.backgroundColor. А можно и что-то другое использовать
      }
    }
  }
})

@import url('https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css');

.slider-color {
  max-width: 200px;
  box-shadow: 0 0 0 1px red; /* Чтобы видно было границу слайдера */
}

.slider-color__item {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
}

.slider-color__item--rainbow {
  background: linear-gradient(to bottom, red, orange, yellow, green, aqua, blue, violet);
}

.slider-color__control {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 100%;
  font-family: monospace;
  font-size: 14px;
  transition: opacity .3s ease;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  user-select: none;
  cursor: pointer;
}

.slider-color__control-prev {
  background: linear-gradient(to right, #fff 10%, rgba(255,255,255,0));
  left: 0;
}

.slider-color__control-next {
  background: linear-gradient(to left, #fff 10%, rgba(255,255,255,0));
  right: 0;
}

.slider-color__control--disabled {
  opacity: 0;
  pointer-events: none;
}

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

<div class="swiper slider-color">
  <div class="swiper-wrapper">
    <div class="swiper-slide slider-color__item slider-color__item--rainbow"></div>
    <div class="swiper-slide slider-color__item" style="background-color: lightgray;"></div>
    <div class="swiper-slide slider-color__item" style="background-color: gray;"></div>
    <div class="swiper-slide slider-color__item" style="background-color: orange;"></div>
    <div class="swiper-slide slider-color__item" style="background-color: blue;"></div>
    <div class="swiper-slide slider-color__item" style="background-color: red;"></div>
    <div class="swiper-slide slider-color__item" style="background-color: green;"></div>
    <div class="swiper-slide slider-color__item" style="background-color: yellow;"></div>
    <div class="swiper-slide slider-color__item" style="background-color: black;"></div>
  </div>
  <div class="slider-color__control slider-color__control-prev">←</div>
  <div class="slider-color__control slider-color__control-next">→</div>
</div>

Как сделать такой слайдер, как в макете?

Ответы