Как сделать чтобы на последнем постере слайдер останавливался и не двигался дальше?
Здравствуйте, кто может подсказать как сделать чтобы слайдер больше не двигался после достижения последней фотки?
<div class="slider-container"> <div class="slider"> <!-- Здесь будут отображаться постеры фильмов --> </div> <button class="prev-button">Предыдущий</button> <button class="next-button">Следующий</button> </div> |
<div class="slider-container"> <div class="slider"> <!-- Здесь будут отображаться постеры фильмов --> </div> <button class="prev-button">Предыдущий</button> <button class="next-button">Следующий</button> </div>
const slider = document.querySelector('.slider'); const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); const movies = [ 'assets/img/horimiya poster.jpg', 'assets/img/Magichbattle.jpg', 'assets/img/Lamborgini.jpg', 'assets/img/bFG5NYfODoVevfIE__daef5ba680f448333805d8445444b400.jpg', 'assets/img/aULWvyGBYqsKGiaN1qfrSKlzPHE.jpg', 'assets/img/97045.jpg', 'assets/img/661375314418.jpg', 'assets/img/img_1563455630_1372_627_it_ends.jpg', // Добавить больше фильмов по мере необходимости ]; let currentIndex = 0; function updateSlider() { slider.innerHTML = ''; for (let i = 0; i < movies.length; i++) { const moviePoster = document.createElement('img'); moviePoster.src = movies[i]; moviePoster.alt = `Movie Poster ${i + 1}`; moviePoster.classList.add('movie-poster'); slider.appendChild(moviePoster); } slider.style.transform = `translateX(${-currentIndex * 220}px)`; // 220px - ширина слайда } updateSlider(); prevButton.addEventListener('click', () => { if (currentIndex > 0) { currentIndex -= 1; updateSlider(); } }); nextButton.addEventListener('click', () => { if (currentIndex < movies.length - 1) { currentIndex += 1; updateSlider(); } else { // Если текущий индекс равен последнему постеру, отключите обработчик события для кнопки "Вперед" nextButton.removeEventListener('click', nextButtonClickHandler); } }); function nextButtonClickHandler() { if (currentIndex < movies.length - 1) { currentIndex += 1; updateSlider(); } } // Добавляем обработчик события для кнопки "Вперед" в начале nextButton.addEventListener('click', nextButtonClickHandler); |
const slider = document.querySelector('.slider'); const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); const movies = [ 'assets/img/horimiya poster.jpg', 'assets/img/Magichbattle.jpg', 'assets/img/Lamborgini.jpg', 'assets/img/bFG5NYfODoVevfIE__daef5ba680f448333805d8445444b400.jpg', 'assets/img/aULWvyGBYqsKGiaN1qfrSKlzPHE.jpg', 'assets/img/97045.jpg', 'assets/img/661375314418.jpg', 'assets/img/img_1563455630_1372_627_it_ends.jpg', // Добавить больше фильмов по мере необходимости ]; let currentIndex = 0; function updateSlider() { slider.innerHTML = ''; for (let i = 0; i < movies.length; i++) { const moviePoster = document.createElement('img'); moviePoster.src = movies[i]; moviePoster.alt = `Movie Poster ${i + 1}`; moviePoster.classList.add('movie-poster'); slider.appendChild(moviePoster); } slider.style.transform = `translateX(${-currentIndex * 220}px)`; // 220px - ширина слайда } updateSlider(); prevButton.addEventListener('click', () => { if (currentIndex > 0) { currentIndex -= 1; updateSlider(); } }); nextButton.addEventListener('click', () => { if (currentIndex < movies.length - 1) { currentIndex += 1; updateSlider(); } else { // Если текущий индекс равен последнему постеру, отключите обработчик события для кнопки "Вперед" nextButton.removeEventListener('click', nextButtonClickHandler); } }); function nextButtonClickHandler() { if (currentIndex < movies.length - 1) { currentIndex += 1; updateSlider(); } } // Добавляем обработчик события для кнопки "Вперед" в начале nextButton.addEventListener('click', nextButtonClickHandler);
Дополнительно:
Посчитайте максимально возможное смещение. Оно будет равным суме ширин все слайдов и промежутков между ними, минус ширина контейнера слайдера.
Если текущее смещение (-currentIndex * 220) будет превышать максимальное, то не применять его.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы остановить слайдер на последнем постере и не позволить ему двигаться дальше, можно использовать различные методы в зависимости от того, какой плагин слайдера вы используете. Ниже приведены несколько общих способов, которые могут помочь вам достичь желаемого результата.
1. Если вы используете плагин слайдера, который предоставляет API для управления слайдами, вы можете остановить слайдер после достижения последнего слайда, вызвав соответствующий метод. Например, для плагина Slick Slider это может выглядеть следующим образом:
$('.your-slider').on('afterChange', function(event, slick, currentSlide){ if(currentSlide === slick.slideCount - 1){ slick.slickPause(); } });
2. Если у вас нет доступа к API слайдера, вы можете использовать CSS, чтобы скрыть или заблокировать элементы управления слайдером после достижения последнего слайда. Например, вы можете добавить следующие стили:
.your-slider .slick-next { display: none; }
3. Если ни один из вышеперечисленных методов не подходит, вы можете использовать JavaScript для отслеживания текущего слайда и остановки слайдера после последнего слайда. Например, для плагина Owl Carousel это может выглядеть так:
$('.your-slider').on('changed.owl.carousel', function(event){ if(event.item.index === event.item.count - 1){ $('.your-slider').trigger('stop.owl.autoplay'); } });
Надеюсь, что один из этих способов поможет вам остановить слайдер на последнем постере и предотвратить его движение дальше. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.