1

Подскажите пожалуйста готовое решение или пример подобного слайдера со смещенными по отступам картинками введите сюда описание изображения

1
  • Вот например: библиотека bootstrap имеет карусель и приятный дизайн. #безколхоза
    – Vadim
    3 апр 2020 в 22:53

1 ответ 1

4

Вы можете взять практически любой подходящий под ваши дополнительные потребности слайдер и для блоков с картинками (для слайдов) использовать псевдокласс :nth-child, указывая нужные вам свойства. Вот пример:

$(document).ready(function() {

  let slider = $('.slider .items');
  let items = $('.slider .items .item .child')
  const leftButton = $('#left')
  const rightButton = $('#right')

  let scrollPos = 0
  if (scrollPos >= 0) leftButton.hide()

  leftButton.click(function() {
    scrollPos += slider.width();
    if (scrollPos >= 0) {
      leftButton.hide()
      scrollPos = 0
    }
    rightButton.show()
    slider.css('transform', "translate3d(" + scrollPos + "px, 0px, 0px)")
  });

  rightButton.click((e) => {
    scrollPos -= slider.width();
    if (scrollPos <= -(items.innerHeight() - 2) * 15) rightButton.hide()
    leftButton.show()
    slider.css('transform', "translate3d(" + scrollPos + "px, 0px, 0px)")
  });

});
.container {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}

.slider {
  width: 100%;
  position: relative;
  overflow: hidden;
  user-select: none;
  margin: 0 -10px;
  padding: 60px 0;
  background: lightgray;
}

.items {
  display: -webkit-box;
  display: flex;
  width: 100%;
  transform: translate3d(0px, 0px, 0px);
  transition: transform 400ms ease 0s;
}

.item {
  padding: 0 10px;
  width: 25%;
  -webkit-box-flex: 0;
  flex-grow: 0;
  flex-shrink: 0;
}

.item:nth-child(2n+1) {
  transform: translate(0, -30px);
}

.item:nth-child(3n+1) {
  transform: translate(0, -15px);
}

@media screen and (max-width: 700px) {
  .item {
    width: 20%;
  }
}

@media screen and (max-width: 500px) {
  .item {
    width: 50%;
  }
}

.child {
  background: #fafaff;
  border: 1px solid black;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

#left,
#right {
  position: absolute;
  cursor: pointer;
  top: 40%;
  background: black;
  color: #fff;
  padding: 10px;
}

#left {
  left: 10px;
}

#right {
  right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="slider">
    <div class="items">
      <div class="item">
        <div class="child">1</div>
      </div>
      <div class="item">
        <div class="child">2</div>
      </div>
      <div class="item">
        <div class="child">3</div>
      </div>
      <div class="item">
        <div class="child">4</div>
      </div>
      <div class="item">
        <div class="child">5</div>
      </div>
      <div class="item">
        <div class="child">6</div>
      </div>
      <div class="item">
        <div class="child">7</div>
      </div>
      <div class="item">
        <div class="child">8</div>
      </div>
      <div class="item">
        <div class="child">9</div>
      </div>
      <div class="item">
        <div class="child">10</div>
      </div>
      <div class="item">
        <div class="child">11</div>
      </div>
      <div class="item">
        <div class="child">12</div>
      </div>
      <div class="item">
        <div class="child">13</div>
      </div>
      <div class="item">
        <div class="child">14</div>
      </div>
      <div class="item">
        <div class="child">15</div>
      </div>
    </div>
    <div class="buttons">
      <div id="left">⇠</div>
      <div id="right">⇢</div>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.