да и немного непонятно почему две навигационных панелей
А код вообще Вы писали? А то уже начинает выглядеть так будто бы "я ничего не знаю, скопиравал откуда-то, но не работает, исправьте за меня, у меня лапки".
Смотрим в разметку, видим:
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
у меня именно не идет свайп
Выражайтесь конкретнее, потому что нигде обработчика свайпа у Вас нет. Полагаю, Вы имели в виду переключение картинок.
Ну и снова нужно лишь внимательно прочитать код.
Смотрим в консоль - ошибок нет. JS работает.
Каков механизм переключения слайдов у Вас? Через html и css на радиокнопках. Отлично. Смотрим что может пойти не так.
Читаем CSS:
#radio1:checked ~ .first {
margin-left: 0;
}
#radio2:checked ~ .first {
margin-left: -20%;
}
#radio3:checked ~ .first {
margin-left: -40%;
}
#radio4:checked ~ .first {
margin-left: -60%;
}
Читаем HTML:
<div class="slides">
<!--radio buttons start-->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!--radio buttons end-->
<!--slide images start-->
<div class="slide-first">
<img src="https://placehold.co/800x500" alt="" >
</div>
<div class="slide">
<img src="https://placehold.co/801x501" alt="" >
</div>
<div class="slide">
<img src="https://placehold.co/802x502" alt="" >
</div>
Вы видите тут блок, у которого был бы класс .first, который ожидается в css?
Нет, его нет. Есть slide-first.
Классы разделяются пробелом, а не тире. Соответственно нужно либо в css либо в html внести правки чтобы было одинаково и заработает.
