[#ИзиВеб] - Слайдер на чистом HTML / CSS за 5 минут

Проснулся, собрал слайдер за 5 минут и пошел делать дела!

[ptfdxrt]

отличный видос. давно такого не было - хлама на кликбэйт много, а вот хорошего контента мало. У кого не работает, внимательно смотрите на <div class="slide s1"><img src="#" alt=""></div> именно .s1, т.к. при клике на лэйбл #r:checked ~ .s1 автор сдвигает именно класс .s1, а лента тянется за ним. У кого не работает анимация, сотрите префиксы для разных браузеров, т.к. это пишется в песочнице. И внимательно смотрите на размерность слайдов и всей ленты - у автора размерность ленты и марджинов расчитана на 4 слайда - это 25%, на 3 слайда будет 33.3% и т.д. можно легко запутаться и вся верстка поедет если у вас количество слайдов отличается .
Удачи всем. Автору респект и удачи!!!

[Esya_Moor]

Круто! Спасибо! круто что проговариваете каждое действие. Все супер доходчиво!

[nik]

Спасибо вам за такие видео, очень помогают в обучение, быстро и понято, жаль что у вас не так много подписчиков.

[makarov]

Очень интересный, простой и доступный урок с класссным преподавателем !

[elenafilonova]

Спасибо за урок! Очень помогли в понимании процесса. Изо всех видео - только Вы доступнее всех продемонстрировали решение задачи. Мне вообще-то слайдер создать нужно было анимационный (чуть сложнее - не только картинки, но полностью блоки создать: с текстом, ссылками, и картинками). Думала, что никогда не пойму и не справлюсь. Но применив Ваши советы - легко осилила затем и слайдер с анимацией. Огромное Вам спасибо ещё раз! С уважением - Елена.

[alexandraweather]

Вот это свобода творческой мысли! Спасибо за такой интересный подход и крутой способ

[shushu]

Спасибо за такой лёгкий, но крайне полезный урок!

[zaicevIT]

Бро, это лучший видос на тему слайдеров на HTML и CSS, ты и объясняешь хорошо и без лишней воды

[rebellis]

Мужик, ты просто бог, только что сделал по твоему видео меню выпадающее, а тут нужный мне слайдер, спасибо

[ufzshbj]

Шикарное видео, очень помогло, прям всё по полочкам разложил

[atomotron]

Спасибо, полезная инфа, но конечно до полноценного слайдера тут как до луны. Однако сам принцип и применение CSS вместо JS везде где только возможно - это респект.

[kseniiashtein]

Спасибо, отличное решение и четкое, наглядное объяснение! То, что надо!

[cdemlp]

большое спасибо за урок, научился делать слайдеры) не сразу, но научился

[alexanderpooh]

Thank you so much! Everything is clear!

[cast]

Спасибо за полезную инструкцию. С помощью вашего видео получилось разобраться со слайдером. С меня Лайк и Подписка))

[abcdabcd]

Годнота! Все работает) Побольше таких видосиков с минусом на заднем фоне

[eldarkalachikov]

Наконец то нашёл нормальный ролик про слайдер. Спасибо тебе за все с меня лайк . С тебя побольше таких роликов классно получается.

[MrSemyon]

Спасибо за урок. Очень помогли, не хотелось подключать сторонние плагины.

[DimaChaikin]

Мужик! Человеческое тебе спасибо!) Ты пипец как меня сейчас выручил! Нужен был легкий слайдер, без лишнего перегруза с js и прочим. Все работает на ура! 6 картинок, ширина по 16.66%. Бомба, пушка! От души!

[wovcowd]

Спасибо за видео.

.section-g {
height: 600px;
background-color: #000;
position: relative;
}
.content-g {
width: 1280px/1366px * 100%;
max-width: 1366px;
margin: 0 auto;
}
.slider{
width: 1100px;
height: 500px;
overflow: hidden;
}
.middle{
position: absolute;
top: -32.5%;
left: 50%;
transform: translate(-50%, 50%);
}
.navigation{
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar{
height: 8px;
width: 30px;
margin: 6px;
cursor: pointer;
background-color: #ddd;
opacity: .5;
border-radius: 10px;
transition: all .4s ease;
}
.bar:hover{
opacity: 1;
transform: scale(1.1);
}
input[name="r"] {
position: absolute;
visibility: hidden;
}

.slides{
width: 400%;
height: 100%;
display: flex;
}
.slide{
width: 25%;
transition: all .6s ease;
}
.slide img{
width: 100%;
height: 100%;
}

#r1:checked ~ .s1 {
margin-left: 0;
}

#r2:checked ~ .s1 {
margin-left: -25%;
}

#r3:checked ~ .s1 {
margin-left: -50%;
}

#r4:checked ~ .s1 {
margin-left: -75%;
}


<!DOCTYPE html>
<html lang="ru">
<head>
<title>Slider_block</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="" href="" />
<meta http-equiv="Content-type" />
</head>
<body>
<section class="section-g">
<div class="content-g">
<div class="slider middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked />
<input type="radio" name="r" id="r2" />
<input type="radio" name="r" id="r3" />
<input type="radio" name="r" id="r4" />

<div class="slide s1"><img src="./img/01.jpg" alt="" /></div>
<div class="slide"><img src="./img/02.jpg" alt="" /></div>
<div class="slide"><img src="./img/03.jpg" alt="" /></div>
<div class="slide"><img src="./img/04.jpg" alt="" /></div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
</div>
</div>
</div>
</section>
</body>
</html>