Какие есть варианты решения проблем со слайдером?
Делал слайдер, но к сожалению все пошло по одному месту.
<!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> |
<!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; } |
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; }
Дополнительно:
Начало не плохое. Осталось описать по какому конкретно "месту", а так же что Вы пытались с этим сделать и что не получилось.
да и немного непонятно почему две навигационных панелей
А код вообще Вы писали? А то уже начинает выглядеть так будто бы "я ничего не знаю, скопиравал откуда-то, но не работает, исправьте за меня, у меня лапки".
Смотрим в разметку, видим:
<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-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> |
<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%; } |
#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> |
<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 внести правки чтобы было одинаково и заработает.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для решения проблем с слайдером существует несколько вариантов, в зависимости от того, что именно не работает или требует улучшения. Вот некоторые из них:
1. Проверьте правильность подключения скриптов и стилей. Убедитесь, что все необходимые файлы загружены и подключены правильно. Не забудьте проверить пути к файлам и возможные ошибки в названиях.
```php ```
2. Проверьте HTML-структуру слайдера. Убедитесь, что все элементы слайдера правильно вложены друг в друга и имеют необходимые классы или атрибуты.
3. Проверьте настройки слайдера. Возможно, вам нужно изменить параметры слайдера, такие как скорость анимации, количество отображаемых слайдов, автопрокрутку и т.д. Обычно это делается через JavaScript или data-атрибуты.
4. Проверьте конфликты с другими скриптами. Иногда слайдер может не работать из-за конфликтов с другими библиотеками JavaScript. Попробуйте отключить другие скрипты и посмотреть, работает ли слайдер после этого.
5. Обновите библиотеку слайдера. Если у вас устаревшая версия слайдера, возможно, проблема исправлена в новой версии. Попробуйте обновить библиотеку до последней версии и проверьте, помогло ли это.
6. Проверьте браузерную совместимость. Некоторые слайдеры могут не работать в определенных браузерах или версиях браузеров. Удостоверьтесь, что ваш слайдер совместим с теми браузерами, которые вы используете.
Надеюсь, что одно из перечисленных выше решений поможет вам решить проблему со слайдером. Если нет, пожалуйста, уточните, какая именно проблема у вас возникла, чтобы мы могли предложить более точное решение.