Как сделать примитивный слайдер

Привет! Сегодня я научу вас делать примитивный слайдер. Сначала давайте определимся, что я имею ввиду:

1. HTML и CSS
2. Выглядит как слайдер, но не имеет полного функционала
3. Работает как слайдер

В первую очередь создадим скелет нашего слайдера. Для этого нам понадобится контейнер, обертка и корпус:

div.container
  div.wrapper
    div.slider

Еще нам нужны карточки, я возьму свои из первого проекта по верстке.

Дальше идея простая, сделаем «прорезь» в контейнере по размеру одной карточки и ограничим зону видимости с помощью overflow: hidden. Потом магический удар по клавиатуре, и:

.wrapper {
/* 
& - литерал для родительского тэга - wrapper
Данный участок кода не обязателен 
*/
  & {
    -ms-overflow-style: none;
    scrollbar-width: none;

    overflow-y: auto;
  }
  &::-webkit-scrollbar {
    display: none;
  }
}

Не бойтесь, это просто SCSS и мы визуально убираем ползунок у нашей обертки.

На данный момент, если вы верстаете, параллельно на экране будет просто одна из пяти карточек, и, в принципе, можете проверить через инструменты разработчика, реагирует ли слайдер реагирует на перетаскивание. Если да, то поздравляю, вы прекрасны. (Чтобы убрать данное поведение просто изменим стили .wrapper { overflow: hidden; })

Ну а теперь давайте добавим элементы управления. В нашу верстку вносим:

<input type="radio" name="slider" id="radio1" checked>
<!--Логично будет внести в статичный контейнер и на уровне выше слайдера-->

Таких у нас будет столько же, сколько и элементов. В моем случае пять. А теперь внимательно — в этом месте можно и запутаться: важно, что бы все input были с одинаковым атрибутом name, чтобы реализовать правильное поведение радиокнопок(type="radio"), атрибут checked мы выставляем для того, чтобы сразу подсветить кнопку. То есть из пяти input атрибут checked должен быть только у одного, в нашем случае он будет у первого.

Вы резонно спросите, а зачем нам нужно указывать для них id? Вот тут на самом деле все зависит от вас, можно и без них. Но мы-то люди не жадные и устроим парад кнопочек-тыкалочек.

Теперь добавим к нашему прикольному макету контроллер:

div.container
|  <!--тут input*5-->
|  div.wrapper
|    div.slider
|     <!--тут карточки * 5-->
|  div.controls

А внутрь мы добавим:

<label for="radio1"></label>

Наверное вы уже догадались, столько же сколько и input, а в атрибуте for укажем id необходимого нам input. Теперь через css немножко украсим label

Попробуйте теперь покликать по контроллерам(label) и увидите, что они переключают радиокнопки сверху, я считаю, что это уже вау. Но зачем нам вообще видеть и кнопки, и контроллер? Уберем радиокнопки, сделаем их display: none, и отредактируем поведение label, сейчас внимательно:

@for $i from 1 through 5 {
  #radio#{$i}:checked ~ .controls :nth-child(#{$i}) {
    /* стили, которые вы хотите увидеть при нажатии на кнопку 
       например background-color: <цвет>
   /*
  }
}

Если все понятно в коде выше, пропускай абзац.

Не знакомым с SCSS может быть непонятно, что происходит. Не беспокойтесь, это просто цикл for. Фактически мы выбираем радиокнопку по id, проверяем, имеет ли она атрибут checked, и если да, то находим на уровне кнопки контроллер и внутри соответственно порядковому номеру выбираем label, применяем к нему стили.

Кратко: мы сделали новые радиокнопки, ура.

Теперь мы на финишной прямой, осталось оживить.

Есть несколько вариантов, выбирайте, какой вам больше нравится

$size: <Number>px; // размер 1 слайда + разрыв между слайдами
    @for $i from 1 through 5 {
        #radio#{$i}:checked ~ .wrapper .slider {
          transform: translateX(0 - $size * ($i - 1));
          /* или  при position: relative */
          left: 0 - $size * ($i - 1);
          /* или */
          margin-left: 0 - $size * ($i - 1);
        }
    }

В общем ничего сложного, проверяем кнопку, ищем обертку, двигаем слайдер.

Поздравляю, вы получили слайдер!

Преимущества:

1. Быстро
2. Просто

Недостатки:

1. Не поддерживает одновременно drag-слайдинг и поведение кнопок
2. Сам по себе drag-слайдинг самостоятельно не докручивает до ближайшей карточки

Вывод: придется использовать или одно или другое Решение: научиться пользоваться JS

P.S.

На данный момент не обязательно самостоятельно реализовывать слайдер, можно просто использовать готовые решения к примеру: https://a11yslider.js.org/, хороший адаптивный слайдер, сам пользуюсь.

Но всегда надо помнить, что опыт самостоятельного нахождения решения — один из важнейших навыков во всех сферах жизни. Возможно, вам никогда не пригодятся какие-то конкретные навыки, но суть обучения не в том, чтобы просто повторять, а понимать, что происходит и как оно все устроено.

До свидания, хорошего дня!