Ширина блоков в слайдере при прокрутке (JS, Jquery)

Question

Начал писать слайдер, который должен содержать 4 блока одинаковой ширины. Посмотрел видео на ютубе, с горем пополам написал скрипт на Jquery. Проблема в том, что между блоками в слайдере должен быть отступ (margin-left), при добавлении отступа между блоками - последний блок теряет ширину на заданный отступ. Может кто нибудь помочь со скриптом?

   '  https://codepen.io/Vladislav_Biryukov/pen/NWdpevN '

Answer 1

Для того, чтобы у вас правильно работало свойство transform: translateX при пролистывании слайдов, необходимо в скрипт внести небольшое дополнение:

minWidth: itemWidth - 35, //отнимаем отступ

$(document).ready(function() {
  let position = 0;
  const slidesToShow = 3;
  const slidesToScroll = 1;
  const container = $('.slider-container');
  const track = $('.slider-track');
  const item = $('.slider-item');
  const btnPrev = $('.btn-prev');
  const btnNext = $('.btn-next');
  const itemsCount = item.length;
  const itemWidth = container.width() / slidesToShow;
  const movePosition = slidesToScroll * itemWidth;

  item.each(function(index, item) {
    $(item).css({
      minWidth: itemWidth - 35,
    });
  });

  btnNext.click(function() {
    const itemsLeft = itemsCount - (Math.abs(position) + slidesToShow * itemWidth) / itemWidth;
    position -= itemsLeft >= slidesToScroll ? movePosition : itemsLeft * itemWidth;

    setPosition();
    checkBtns();
  });

  btnPrev.click(function() {
    const itemsLeft = Math.abs(position) / itemWidth;
    position += itemsLeft >= slidesToScroll ? movePosition : itemsLeft * itemWidth;

    setPosition();
    checkBtns();
  });

  const setPosition = () => {
    track.css({
      transform: `translateX(${position}px)`
    });
  };

  const checkBtns = () => {
    btnPrev.prop('disabled', position === 0);
    btnNext.prop(
      'disabled',
      position <= -(itemsCount - slidesToShow) * itemWidth
    );
  };

  checkBtns();
});

* {margin:0; padding:0; box-sizing: border-box;}

.slider-container {
  overflow: hidden;
  position: relative;
}

.slider-track {
  display: flex;
  transition: .2s;
}

.slider-item {
  height: 145px;
  margin-left: 35px; /*отступ*/
}

.slider-item:nth-child(1) {
  background-color: red;
}

.slider-item:nth-child(2) {
  background-color: yellow;
}

.slider-item:nth-child(3) {
  background-color: blue;
}

.slider-item:nth-child(4) {
  background-color: pink;
}

.slider-item:nth-child(5) {
  background-color: green;
}

.slider-item:nth-child(6) {
  background-color: gold;
}

.slider-item:nth-child(7) {
  background-color: chocolate;
}

.slider-item:nth-child(8) {
  background-color: yellowgreen;
}

.slider-item:nth-child(9) {
  background-color: aqua;
}

.slider-item:nth-child(10) {
  background-color: bisque;
}

.slider-item:nth-child(11) {
  background-color: chartreuse;
}

.slider-item:nth-child(12) {
  background-color: fuchsia;
}

.slider-item:nth-child(13) {
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section>
  <div class="container">
    <div class="slider-container">
      <div class="slider-track">

        <div class="slider-item">1</div>
        <div class="slider-item">2</div>
        <div class="slider-item">3</div>
        <div class="slider-item">4</div>
        <div class="slider-item">5</div>
        <div class="slider-item">6</div>
        <div class="slider-item">7</div>
        <div class="slider-item">8</div>
        <div class="slider-item">9</div>
        <div class="slider-item">10</div>
        <div class="slider-item">11</div>
        <div class="slider-item">12</div>
        <div class="slider-item">13</div>

      </div>
    </div>
  </div>
  <br>
  <button class="btn-prev">Prev</button>
  <button class="btn-next">Next</button>
</section>

БЛОГ НА HUSL

Ширина блоков в слайдере при прокрутке (JS, Jquery)

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