Как сделать плавную прокрутку картинок по горизонтали на javascript?

Question

Как сделать плавную прокрутку картинок по горизонтали на javascript?

Захар Савашинский Ученик (108), на голосовании 4 месяца назад

На страничке есть шапка с разными картинками. Нужно с помощью js (или css) сделать прокрутку картинок типа как слайд шоу по нажатию на кнопки. Сколько смотрел в интернете, никак не получается. В html подключал скрипт js через src, все работает кроме планов прокрути. Что делать?

Answer 1

Артур Кириллов Знаток (391) 5 месяцев назад

Через js обрабатывать клик по кнопке, выдач класс css, где непосредственно прописана анимация. Или через js самостоятельно генерировать

⚠Оракул (50000) 5 месяцев назад

 для автора вопроса

найди тот сайт
где та прокрутка
и
cтыpь
тот js

Артур Кириллов Знаток (391) ⚠, автор сайта явно Не Знаком с такой Прекрасной библиотекой как swiper. Пусть тырит оттуда

Answer 2

Для плавной горизонтальной прокрутки картинок на веб-странице с помощью JavaScript, у вас есть несколько вариантов. Вот некоторые из них:

Использование scrollTo или scrollBy:
Добавьте кнопки для прокрутки вперед и назад.
Привяжите обработчики событий к кнопкам, чтобы изменять горизонтальное положение контейнера с изображениями.
Прокрутите контейнер влево или вправо с помощью методов scrollTo или scrollBy.

Пример кода:

 var container = document.getElementById('container'); // Замените 'container' на ID вашего контейнера 
document.getElementById('slide').onclick = function () { 
    container.scrollTo({ top: 0, left: Math.max(scrollAmount += 500, scrollMax), behavior: 'smooth' }); 
}; 
document.getElementById('slideBack').onclick = function () { 
    container.scrollTo({ top: 0, left: Math.min(scrollAmount -= 500, scrollMin), behavior: 'smooth' }); 
};

Убедитесь, что у контейнера есть CSS-свойство scroll-behavior: smooth;.

Использование интервала для плавной анимации:

 var x = 1; 
var bgImage = document.getElementById('landscape'); // Замените 'landscape' на ID вашего контейнера с изображениями 
function move() { 
    x++; 
    bgImage.style.backgroundPositionX = x + "px"; 
} 
setInterval(move, 50); // Измените интервал по своему усмотрению