46. HTML, CSS, JavaScript - Image Slider. Адаптивный и бесконечный слайдер

preview_player
Показать описание
🟢 Делаем простой, адаптивный и бесконечный слайдер изображений. Слайдеры есть почти в каждом приложении, и пример данного слайдера показывает фундаментальные вещи для реализации. Плюс ко всему кайфанете от процесса. Используем только нативные HTML, CSS, JS и свои руки.

➡️ таймлайн ➡️
00:00 старт
01:27 обзор слайдера
02:29 разметка HTML
03:51 базовые стили CSS
05:20 отрисовка изображений JS
09:20 стили для img
10:53 симуляция бесконечности JS
12:25 initSlider
16:47 логика кнопок
25:02 баг анимации при ресайзе окна
26:31 финальные стили CSS
28:10 константа для анимации
29:32 финиш

📎 PDF ФАЙЛ с кодом к каждому уроке в телеграм канале 📎

⚡️ вкусняхи ⚡️

⚙️ Курс Frontender[1.0] разделен на 3 модуля:
1) HTML, CSS, SCSS, БЭМ, Flexbox, Grid, Bootstrap, GIT, FIGMA, верстка 3 макетов (100 уроков);
2) JavaScript, решение задач, написание нескольких приложений;
3) React, Typescript, Redux написание полноценного приложения;

HTML, CSS, JavaScript - Image Slider. Адаптивный и бесконечный слайдер

📢 Автор: Дмитрий Колотильщиков
#js #frontend #javascript
  1. IT Introvert | Дмитрий Колотильщиков
  2. javascript с нуля полный курс
  3. программирование с нуля
  4. html с нуля
  5. full javascript course
  6. js курс
Рекомендации по теме
Osnove HTML, CSS 0:10:10

Osnove HTML, CSS i JavaScript #46 - JavaScript matrice

46. HTML, CSS, 0:30:15

46. HTML, CSS, JavaScript - Image Slider. Адаптивный и бесконечный слайдер...

Responsive Navigation Bar 0:18:08

Responsive Navigation Bar | HTML CSS JAVASCRIPT

CSS Tutorial for 0:05:08

CSS Tutorial for Beginners - 46 - Web Forms Part 1

Trick - 46 0:00:17

Trick - 46 #htmlcss #html5 #html #javascript #programming #beginner #beginners #htmltutorial #css

𝐅𝐑𝐄𝐒𝐇𝐄𝐑'𝐒 𝐅𝐫𝐨𝐧𝐭 𝐄𝐧𝐝 0:39:14

𝐅𝐑𝐄𝐒𝐇𝐄𝐑'𝐒 𝐅𝐫𝐨𝐧𝐭 𝐄𝐧𝐝 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐍𝐨 - 𝟒𝟔 |𝐉𝐚𝐯𝐚𝐬𝐜𝐫𝐢𝐩𝐭, 𝐑𝐞𝐚𝐜𝐭𝐉𝐒, 𝐇𝐓𝐌𝐋, 𝐂𝐒𝐒...

46/100 Tricks: Disable 0:01:00

46/100 Tricks: Disable Right Click in Website | HTML CSS JS Animation and Effects #webdevelopment

Build a Shoes 0:15:43

Build a Shoes Website with HTML, CSS & JavaScript | Full Project Tutorial for Beginners [2025] #...

CSS Display | 0:09:38

CSS Display | The Hidden Power Behind Every Great Website

CSS Animations | 0:17:57

CSS Animations | Sigma Web Development Course - Tutorial #46

Create A Responsive 1:19:44

Create A Responsive Education Website Design - HTML / CSS / JavaScript From Scratch

Build a Simple 7:12:30

Build a Simple Website with HTML, CSS, JavaScript – Course for Beginners

How to Make 0:11:12

How to Make a Dictionary App in HTML, CSS & JavaScript (For Beginners)

Frontend Web Development: 10:02:10

Frontend Web Development: In-Depth Project Tutorial (HTML, CSS, JavaScript, TypeScript, React)

3D SpaceShip | 0:01:00

3D SpaceShip | Mind-Blowing Codepen #46 #html #css #javascript #codepen #webdesign #3d #animation

#46 accent-color | 0:00:20

#46 accent-color | CSS | Frontend #shorts

HTML CSS JavaScript 11:56:51

HTML CSS JavaScript projects for beginners 2024 - 12 js projects with source code

Let's Show #46 0:05:21

Let's Show #46 - Entfernung berechnen #2 | HTML | CSS | JavaScript Tutorial | jQuery

Let's Show #46 0:03:20

Let's Show #46 - Entfernung berechnen #1 | HTML | CSS | JavaScript Tutorial | jQuery

Introduction to JavaScript 0:29:16

Introduction to JavaScript for Frontend & Backend | Web Development Tutorials #46

BUTTON | HTML 0:00:09

BUTTON | HTML | CSS #coding

Build A Responsive 3:09:35

Build A Responsive Multipage Education/School Website using HTML CSS & JavaScript Complete Tutor...

46/100 tricks | 0:00:15

46/100 tricks | html tag | html coding |coding video | Coding with amit | html, css and javascript

HTML CSS Javascript 2:05:01

HTML CSS Javascript Website Tutorial - Responsive Beginner JS Project with Smooth Scroll

Комментарии
Автор

I'm not very far along yet, but I just want to say this is an excellent video and I'm very grateful!

yuriyzadorozhnyi
Автор

27:25, а что если убрать index 10? Они и так вроде должны быть поверх слайда, когда знакомился с материалом (видимо еще мало практиковал), но у него дефолт значение 0, и можно просто 1 поставить, и он уже будет выше других

denzeroneYT
Автор

Актуально, на днях нужно было фастом сделать, даже времени разобрать, "поигратся" не было, но для бесконечного слайдера, просто когда отслеживается, что пользователь нажал клик на кнопку, к индексу добавляется 1, а также делим по модулю на общее количество слайдов, когда 1 слайд, то 1 % 3(общ слайд) = 1, 2 % 3 = 2, 3 % 3 = 0, и возращаемся на первый, не знаю, насколько норм способ, но работает, да и понятно что куча способов, но я чет слишком отдалился, надо продолжать базу учить)

denzeroneYT
Автор

I'm not very far along yet, but I just want to say this is an excellent video and I'm very grateful!

yuriyzadorozhnyi
welcome to shbcf.ru