Создание слайдера js

1. Создаешь контейнер.
2. Присваиваешь контейнеру нужный размер.
3. Присваиваешь контейнеру display: flex.
4. Присваиваешь контейнеру overflow: hidden.

1. Создаешь в контейнере элементы под картинки.
2. Присваиваешь всем вложенным элементам min-width: 100%.
3. Присваиваешь всем вложенным элементам transition.
4. Присваиваешь отдельным вложенным элементам изображения.
5. Создаешь отдельно кнопки в количестве, равном количеству картинок.

1. Получаешь в JS все кнопки и элементы через querySelectorAll().
2. Проходишься циклом forEach по кнопкам, получаешь индексы и присваиваешь каждой кнопке запуск события onclick.
3. Внутри события onclick запускаешь еще один цикл forEach по элементам.
4. Каждому элементу внутри этого цикла задаешь style.transform, равным смещению по координате x в процентах, привязанных к полученному ранее индексу.
5. В результате каждая кнопка будет менять transform на [index]00%, что позволит элементам плавно двигаться внутри родителя по горизонтали.

Понимаю, что готовый код не нужен, но все же вот пример JS.

 const elems = document.querySelectorAll('.container div'); 

const btns = document.querySelectorAll('button'); 

 

btns.forEach((e,i) => e.addEventListener('click', () => {  

   elems.forEach(e => e.style.transform = `translateX(-${i}00%)`);  

})) 

Само собой, это слайдер с привязкой к кнопкам. Чтобы слайды сами постепенно менялись, нужно добавлять, например, setInterval, который будет с задержкой постоянно сам кликать на кнопки и тем самым вызывать смещение.

 (function() { 

   let i = 1; 

   setInterval(() => { 

      btns[i++].click(); 

      if (i === btns.length) i = 0; 

   }, 5000); 

})(); 

Это создаётся при помощи кода js.

сначала нарисуй на бумажке:
будет у тебя окно (блок показа, может быть 1 и более картинок в показе) отображающее ленту из картинок, причем лента шире окна. Лента движется, перемещается относительно окна отображения, все картинки выходящие за пределы окна отображения скрыты, т.е. лента в слое под окном находится. Направление движения может задаваться разными способами, для начала можно реализовать однонаправленное движение. При движении и ограниченном количестве картинок, надо предусмотреть дополнение ленты - перемещать каринки из начала в конец ленты...