Хочу добавить ещё раз слайдер но он не работает. Что может быть не так?
Хочу добавить ещё раз слайдер, но он не работает и не появляются кнопки на втором слайдере. И после добавления второго слайдера перестает работать первый.
<div class="slider"> <!-- Здесь будут отображаться постеры фильмов --> <img src="assets/img/horimiya poster.jpg" alt="Movie Poster 1" class="movie-poster"> <img src="assets/img/Magichbattle.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/Lamborgini.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/bFG5NYfODoVevfIE__daef5ba680f448333805d8445444b400.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/aULWvyGBYqsKGiaN1qfrSKlzPHE.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/661375314418.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/97045.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/img_1563455630_1372_627_it_ends.jpg" alt="Movie Poster 2" class="movie-poster"> <!-- Добавьте постеры для других фильмов по мере необходимости --> </div> </div> <button class="prev-button"><img src="/assets/img/prev.svg" alt=""></button> <button class="next-button"><img src="/assets/img/next.svg" alt=""></button> </section> <section class="movies" id="movies2"> <h2 class="heading">Рекомендуем посмотреть</h2> <p class="heading-citation">Популярные фильмы и аниме по отзывам</p> <!-- Movie Container --> <div class="slider-container"> <div class="slider"> <!-- Здесь будут отображаться постеры фильмов --> <img src="assets/img/horimiya poster.jpg" alt="Movie Poster 1" class="movie-poster"> <img src="assets/img/Magichbattle.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/Lamborgini.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/bFG5NYfODoVevfIE__daef5ba680f448333805d8445444b400.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/aULWvyGBYqsKGiaN1qfrSKlzPHE.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/661375314418.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/97045.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/img_1563455630_1372_627_it_ends.jpg" alt="Movie Poster 2" class="movie-poster"> <!-- Добавьте постеры для других фильмов по мере необходимости --> </div> </div> <button class="prev-button"><img src="/assets/img/prev.svg" alt=""></button> <button class="next-button"><img src="/assets/img/next.svg" alt=""></button> </section> |
<div class="slider"> <!-- Здесь будут отображаться постеры фильмов --> <img src="assets/img/horimiya poster.jpg" alt="Movie Poster 1" class="movie-poster"> <img src="assets/img/Magichbattle.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/Lamborgini.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/bFG5NYfODoVevfIE__daef5ba680f448333805d8445444b400.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/aULWvyGBYqsKGiaN1qfrSKlzPHE.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/661375314418.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/97045.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/img_1563455630_1372_627_it_ends.jpg" alt="Movie Poster 2" class="movie-poster"> <!-- Добавьте постеры для других фильмов по мере необходимости --> </div> </div> <button class="prev-button"><img src="/assets/img/prev.svg" alt=""></button> <button class="next-button"><img src="/assets/img/next.svg" alt=""></button> </section> <section class="movies" id="movies2"> <h2 class="heading">Рекомендуем посмотреть</h2> <p class="heading-citation">Популярные фильмы и аниме по отзывам</p> <!-- Movie Container --> <div class="slider-container"> <div class="slider"> <!-- Здесь будут отображаться постеры фильмов --> <img src="assets/img/horimiya poster.jpg" alt="Movie Poster 1" class="movie-poster"> <img src="assets/img/Magichbattle.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/Lamborgini.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/bFG5NYfODoVevfIE__daef5ba680f448333805d8445444b400.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/aULWvyGBYqsKGiaN1qfrSKlzPHE.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/661375314418.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/97045.jpg" alt="Movie Poster 2" class="movie-poster"> <img src="assets/img/img_1563455630_1372_627_it_ends.jpg" alt="Movie Poster 2" class="movie-poster"> <!-- Добавьте постеры для других фильмов по мере необходимости --> </div> </div> <button class="prev-button"><img src="/assets/img/prev.svg" alt=""></button> <button class="next-button"><img src="/assets/img/next.svg" alt=""></button> </section>
const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); const slider2 = document.querySelector('#movies2 .slider'); const prevButton2 = document.querySelector('#movies2 .prev-button'); const nextButton2 = document.querySelector('#movies2 .next-button'); let currentIndex = 0; const posterWidth = 207; // Ширина постера // Рассчитываем максимально возможное смещение const maxTranslate = (document.querySelectorAll('.slider img').length * posterWidth) - slider.clientWidth; function updateSlider() { slider.style.transform = `translateX(${-currentIndex * posterWidth}px)`; } prevButton.addEventListener('click', () => { if (currentIndex > 0) { currentIndex -= 1; updateSlider(); } }); nextButton.addEventListener('click', () => { // Проверяем, не превышено ли максимальное смещение if (currentIndex * posterWidth < maxTranslate) { currentIndex += 1; updateSlider(); } }); |
const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); const slider2 = document.querySelector('#movies2 .slider'); const prevButton2 = document.querySelector('#movies2 .prev-button'); const nextButton2 = document.querySelector('#movies2 .next-button'); let currentIndex = 0; const posterWidth = 207; // Ширина постера // Рассчитываем максимально возможное смещение const maxTranslate = (document.querySelectorAll('.slider img').length * posterWidth) - slider.clientWidth; function updateSlider() { slider.style.transform = `translateX(${-currentIndex * posterWidth}px)`; } prevButton.addEventListener('click', () => { if (currentIndex > 0) { currentIndex -= 1; updateSlider(); } }); nextButton.addEventListener('click', () => { // Проверяем, не превышено ли максимальное смещение if (currentIndex * posterWidth < maxTranslate) { currentIndex += 1; updateSlider(); } });
Дополнительно:
делай обращение к слайдеру в цикле, тогда не будет конфликтов. Если не поможет - используй сторонние библиотеки слайдеров и также в цикле
Используй это
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы разобраться, почему слайдер не работает, следует выполнить несколько шагов:
1. Проверьте подключение библиотеки или плагина, который вы используете для создания слайдера. Убедитесь, что скрипт подключен корректно в вашем файле HTML или PHP.
2. Убедитесь, что HTML разметка для слайдера правильно оформлена. Обычно слайдер состоит из контейнера с изображениями и кнопок управления. Проверьте, что все элементы на своих местах и правильно стилизованы.
<div class="slider-container"> <img src="slide1.jpg" alt="Slide 1"> <img src="slide2.jpg" alt="Slide 2"> <img src="slide3.jpg" alt="Slide 3"> </div> <button class="prev">Previous</button> <button class="next">Next</button>
3. Проверьте CSS стили для слайдера. Убедитесь, что все необходимые стили (например, ширина и высота слайдов, скрытие/отображение кнопок управления) правильно прописаны в вашем файле стилей.
4. Проверьте JavaScript код, отвечающий за функционал слайдера. Убедитесь, что он корректно работает и взаимодействует с HTML и CSS.
$('.slider-container').slick({ slidesToShow: 1, slidesToScroll: 1, prevArrow: $('.prev'), nextArrow: $('.next') });
Если после выполнения всех этих шагов слайдер все равно не работает, то возможно проблема может быть в конфликте с другими скриптами на странице или в самом плагине. В таком случае, попробуйте временно отключить другие скрипты или обновить плагин до последней версии. Если проблема сохраняется, обратитесь к сообществу разработчиков для получения помощи.