0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Привет! Сегодня я научу вас делать примитивный слайдер. Сначала давайте определимся, что я имею ввиду:</p>
1
<p>Привет! Сегодня я научу вас делать примитивный слайдер. Сначала давайте определимся, что я имею ввиду:</p>
2
<ol><li>HTML и CSS</li>
2
<ol><li>HTML и CSS</li>
3
<li>Выглядит как слайдер, но не имеет полного функционала</li>
3
<li>Выглядит как слайдер, но не имеет полного функционала</li>
4
<li>Работает как слайдер</li>
4
<li>Работает как слайдер</li>
5
</ol><p>В первую очередь создадим скелет нашего слайдера. Для этого нам понадобится контейнер, обертка и корпус:</p>
5
</ol><p>В первую очередь создадим скелет нашего слайдера. Для этого нам понадобится контейнер, обертка и корпус:</p>
6
<p>Еще нам нужны карточки, я возьму свои из первого проекта по верстке.</p>
6
<p>Еще нам нужны карточки, я возьму свои из первого проекта по верстке.</p>
7
<p>Дальше идея простая, сделаем "прорезь" в контейнере по размеру одной карточки и ограничим зону видимости с помощью overflow: hidden. Потом магический удар по клавиатуре, и:</p>
7
<p>Дальше идея простая, сделаем "прорезь" в контейнере по размеру одной карточки и ограничим зону видимости с помощью overflow: hidden. Потом магический удар по клавиатуре, и:</p>
8
<p>Не бойтесь, это просто SCSS и мы визуально убираем ползунок у нашей обертки.</p>
8
<p>Не бойтесь, это просто SCSS и мы визуально убираем ползунок у нашей обертки.</p>
9
<p>На данный момент, если вы верстаете, параллельно на экране будет просто одна из пяти карточек, и, в принципе, можете проверить через инструменты разработчика, реагирует ли слайдер реагирует на перетаскивание. Если да, то поздравляю, вы прекрасны.<em>(Чтобы убрать данное поведение просто изменим стили .wrapper { overflow: hidden; })</em></p>
9
<p>На данный момент, если вы верстаете, параллельно на экране будет просто одна из пяти карточек, и, в принципе, можете проверить через инструменты разработчика, реагирует ли слайдер реагирует на перетаскивание. Если да, то поздравляю, вы прекрасны.<em>(Чтобы убрать данное поведение просто изменим стили .wrapper { overflow: hidden; })</em></p>
10
<p>Ну а теперь давайте добавим элементы управления. В нашу верстку вносим:</p>
10
<p>Ну а теперь давайте добавим элементы управления. В нашу верстку вносим:</p>
11
<p>Таких у нас будет столько же, сколько и элементов. В моем случае пять. А теперь внимательно - в этом месте можно и запутаться: важно, что бы все input были с одинаковым атрибутом name, чтобы реализовать правильное поведение радиокнопок(type="radio"), атрибут checked мы выставляем для того, чтобы сразу подсветить кнопку. То есть из пяти input атрибут checked должен быть только у одного, в нашем случае он будет у первого.</p>
11
<p>Таких у нас будет столько же, сколько и элементов. В моем случае пять. А теперь внимательно - в этом месте можно и запутаться: важно, что бы все input были с одинаковым атрибутом name, чтобы реализовать правильное поведение радиокнопок(type="radio"), атрибут checked мы выставляем для того, чтобы сразу подсветить кнопку. То есть из пяти input атрибут checked должен быть только у одного, в нашем случае он будет у первого.</p>
12
<p>Вы резонно спросите, а зачем нам нужно указывать для них id? Вот тут на самом деле все зависит от вас, можно и без них. Но мы-то люди не жадные и устроим парад кнопочек-тыкалочек.</p>
12
<p>Вы резонно спросите, а зачем нам нужно указывать для них id? Вот тут на самом деле все зависит от вас, можно и без них. Но мы-то люди не жадные и устроим парад кнопочек-тыкалочек.</p>
13
<p>Теперь добавим к нашему прикольному макету контроллер:</p>
13
<p>Теперь добавим к нашему прикольному макету контроллер:</p>
14
<p>А внутрь мы добавим:</p>
14
<p>А внутрь мы добавим:</p>
15
<p>Наверное вы уже догадались, столько же сколько и input, а в атрибуте for укажем id необходимого нам input. Теперь через css немножко украсим label</p>
15
<p>Наверное вы уже догадались, столько же сколько и input, а в атрибуте for укажем id необходимого нам input. Теперь через css немножко украсим label</p>
16
<p>Попробуйте теперь покликать по контроллерам(label) и увидите, что они переключают радиокнопки сверху, я считаю, что это уже вау. Но зачем нам вообще видеть и кнопки, и контроллер? Уберем радиокнопки, сделаем их display: none, и отредактируем поведение label, сейчас внимательно:</p>
16
<p>Попробуйте теперь покликать по контроллерам(label) и увидите, что они переключают радиокнопки сверху, я считаю, что это уже вау. Но зачем нам вообще видеть и кнопки, и контроллер? Уберем радиокнопки, сделаем их display: none, и отредактируем поведение label, сейчас внимательно:</p>
17
<p>Если все понятно в коде выше, пропускай абзац.</p>
17
<p>Если все понятно в коде выше, пропускай абзац.</p>
18
<p>Не знакомым с SCSS может быть непонятно, что происходит. Не беспокойтесь, это просто цикл for. Фактически мы выбираем радиокнопку по id, проверяем, имеет ли она атрибут checked, и если да, то находим на уровне кнопки контроллер и внутри соответственно порядковому номеру выбираем label, применяем к нему стили.</p>
18
<p>Не знакомым с SCSS может быть непонятно, что происходит. Не беспокойтесь, это просто цикл for. Фактически мы выбираем радиокнопку по id, проверяем, имеет ли она атрибут checked, и если да, то находим на уровне кнопки контроллер и внутри соответственно порядковому номеру выбираем label, применяем к нему стили.</p>
19
<p>Кратко: мы сделали новые радиокнопки, ура.</p>
19
<p>Кратко: мы сделали новые радиокнопки, ура.</p>
20
<p>Теперь мы на финишной прямой, осталось оживить.</p>
20
<p>Теперь мы на финишной прямой, осталось оживить.</p>
21
<p>Есть несколько вариантов, выбирайте, какой вам больше нравится</p>
21
<p>Есть несколько вариантов, выбирайте, какой вам больше нравится</p>
22
<p>В общем ничего сложного, проверяем кнопку, ищем обертку, двигаем слайдер.</p>
22
<p>В общем ничего сложного, проверяем кнопку, ищем обертку, двигаем слайдер.</p>
23
<p>Поздравляю, вы получили слайдер!</p>
23
<p>Поздравляю, вы получили слайдер!</p>
24
<p>Преимущества:</p>
24
<p>Преимущества:</p>
25
<ol><li>Быстро</li>
25
<ol><li>Быстро</li>
26
<li>Просто</li>
26
<li>Просто</li>
27
</ol><p>Недостатки:</p>
27
</ol><p>Недостатки:</p>
28
<ol><li>Не поддерживает одновременно drag-слайдинг и поведение кнопок</li>
28
<ol><li>Не поддерживает одновременно drag-слайдинг и поведение кнопок</li>
29
<li>Сам по себе drag-слайдинг самостоятельно не докручивает до ближайшей карточки</li>
29
<li>Сам по себе drag-слайдинг самостоятельно не докручивает до ближайшей карточки</li>
30
</ol><p>Вывод: придется использовать или одно или другое Решение: научиться пользоваться JS</p>
30
</ol><p>Вывод: придется использовать или одно или другое Решение: научиться пользоваться JS</p>
31
<p>P.S.</p>
31
<p>P.S.</p>
32
<p>На данный момент не обязательно самостоятельно реализовывать слайдер, можно просто использовать готовые решения к примеру:<a>https://a11yslider.js.org/</a>, хороший адаптивный слайдер, сам пользуюсь.</p>
32
<p>На данный момент не обязательно самостоятельно реализовывать слайдер, можно просто использовать готовые решения к примеру:<a>https://a11yslider.js.org/</a>, хороший адаптивный слайдер, сам пользуюсь.</p>
33
<p>Но всегда надо помнить, что опыт самостоятельного нахождения решения - один из важнейших навыков во всех сферах жизни. Возможно, вам никогда не пригодятся какие-то конкретные навыки, но суть обучения не в том, чтобы просто повторять, а понимать, что происходит и как оно все устроено.</p>
33
<p>Но всегда надо помнить, что опыт самостоятельного нахождения решения - один из важнейших навыков во всех сферах жизни. Возможно, вам никогда не пригодятся какие-то конкретные навыки, но суть обучения не в том, чтобы просто повторять, а понимать, что происходит и как оно все устроено.</p>
34
<p>До свидания, хорошего дня!</p>
34
<p>До свидания, хорошего дня!</p>