Задать вопрос
@NEOPYTHONSON
html

Какие есть варианты решения проблем со слайдером?

Делал слайдер, но к сожалению все пошло по одному месту. 
<!DOCTYPE html>
<html lang="en" dir ="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Around the world</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!--Image slider start-->
    <div class="slider">
      <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="img/800x500.jpg" alt="" >
        </div>

        <div class="slide">
          <img src="img/bc01195e30a793f90264b679524387b2.jpg" alt="" >
        </div>

        <div class="slide">
          <img src="img/stauben-spring-flowers-mountain-dandelion.jpg" alt="" >
        </div>

        <div class="slide">
          <img src="img/VeturMynd.jpg" alt="" >
        </div>
        <!--slide images end-->

        <!--automatic navigation start-->
        <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>
          <!--automatic navigation end-->
  
          <!--manual navigation start-->
          <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>
          <!--manual navigation end-->
        </div>
      </div>
      <!--Image slider end-->
  
      <script type="text/javascript">
        var counter = 1;
        setInterval(function () {
          document.getElementById("radio" + counter).checked = true;
          counter++;
          if (counter > 4) {
            counter = 1;
          }
        }, 5000);
      </script>>
  </body>
</html>


body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #c2e6f2;
}

.slider {
  width: 800px;
  height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

.slides {
  width: 500%;
  height: 500px;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 20%;
  transition: 2s;
}

.slide img {
  width: 800px;
  height: 500px;
}

/* css for manual slide navigation */

.navigation-manual {
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.manual-btn {
  border: 2px solid #00f2ff;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child) {
  margin-right: 40px;
}

.manual-btn:hover {
  background: #00f2ff;
}

#radio1:checked ~ .first {
  margin-left: 0;
}

#radio2:checked ~ .first {
  margin-left: -20%;
}

#radio3:checked ~ .first {
  margin-left: -40%;
}

#radio4:checked ~ .first {
  margin-left: -60%;
}

/*css for automatic navigation*/

.navigation-auto {
  position: absolute;
  display: flex;
  width: 800px;
  justify-content: center;
  margin-top: 460px;
}

.navigation-auto div {
  border: 2px solid #a6e3ff;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
}

.navigation-auto div:not(:last-child) {
  margin-right: 40px;
}

#radio1:checked ~ .navigation-auto.autio-btn1 {
  background: #a6e3ff;
}

#radio2:checked ~ .navigation-auto.autio-btn2 {
  background: #a6e3ff;
}

#radio3:checked ~ .navigation-auto.autio-btn3 {
  background: #a6e3ff;
}

#radio4:checked ~ .navigation-auto.autio-btn4 {
  background: #a6e3ff;
}

64d78f095d471839201293.png
  • Вопрос задан
  • 157 просмотров
2 комментария
Подписаться 2 Простой 2 комментария
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега CSS
Верставший фронтендер
да и немного непонятно почему две навигационных панелей

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

Смотрим в разметку, видим:
<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 внести правки чтобы было одинаково и заработает.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Несложная верстка из Figma bootstrap5 scss npm
18 дек. 2024, в 04:59
1000 руб./в час
Отправка команды на открытие всех окон автомобиля Chery Tiggo 7 Pro
18 дек. 2024, в 03:28
16000 руб./за проект
Установить музыкальный софт
18 дек. 2024, в 01:04
5000 руб./за проект
Ещё заказы