Компонент carousel на ReactJS (Slider)

Uploaded By: Myvideo

Published on

8 Nov 2021

2 views

0

0 votes

0

About Share Download Add to

#React #ReactJS Мы в соцсетях: 💻 Telegram: 💻 Twitter: 💻 GitHub: ☕️ 🍫 🍩 Поддержать канал: В‌ ‌этом‌ ‌видео‌ создадим компонент carousel (или image slider, карусель, слайдер) на ReactJS, рассмотрим схему html элементов и css классов, а также разберемся в принципах работы компонента carousel. 00:00 - О компоненте carousel 00:26 - Схема компонента carousel 02:01 - Как перемещаются страницы в компоненте carousel 04:10 - API и использование компонента carousel 06:34 - Разработка компонента carousel - базовая разметка 08:44 - Добавляем стили 10:38 - Обновляем размер страниц 14:12 - Показываем только текущую страницу 14:42 - Добавляем кнопки навигации 16:48 - Добавляем изменение смещения страниц 18:44 - Обработчик кнопки “на право“ 20:18 - Обработчик кнопки “на лево“ 21:12 - Валидация значения смещения 23:52 - Анимация перемещения #devmagazine #devmagazinechannel

Share with your friends

Link:

Embed:

<iframe width="640" height="360" src="//myvideo.cc/embed/ZE1DUUNoa2p5NE9NTWNnaDdNR090OCtxUTBNV25UZU54MWZJQnFBN3Fnbz0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Video Size:

Custom size:

x

Autoplay video

Hide player controls

Hide resume playing

Add to Playlist:

Favorites

My Playlist

Watch Later

Ep-9: Release Update & Postmortem - Laravel Carousel Package

6 months ago

01:08:11

Ep-9: Release Update & Postmortem - Laravel Carousel Package

1 64%

Ep-8: Wrap up And Deploy - Laravel Carousel Package

7 months ago

01:42:48

Ep-8: Wrap up And Deploy - Laravel Carousel Package

1 61%

Ep-7: Model & Collection Support - Laravel Carousel Package

7 months ago

01:17:19

Ep-7: Model & Collection Support - Laravel Carousel Package

1 89%

Ep-6: Infolist Entry Configuration - Laravel Carousel Package

7 months ago

01:09:04

Ep-6: Infolist Entry Configuration - Laravel Carousel Package

1 54%

Ep-5: Infolist Carousel Entry - Laravel Carousel Package

7 months ago

00:56:47

Ep-5: Infolist Carousel Entry - Laravel Carousel Package

1 86%

Ep-4: Auto Play, Light Mode and Filament Plugin Scaffold - Laravel Carousel Package

8 months ago

01:14:43

Ep-4: Auto Play, Light Mode and Filament Plugin Scaffold - Laravel Carousel Package

1 23%

Ep-3: Building a Laravel Carousel Package & Filament Plugin

8 months ago

01:38:49

Ep-3: Building a Laravel Carousel Package & Filament Plugin

1 8%

Ep-2: Building a Laravel Carousel Package & Filament Plugin

8 months ago

01:30:00

Ep-2: Building a Laravel Carousel Package & Filament Plugin

1 75%

Building a Laravel Package & Filament Plugin

8 months ago

01:42:21

Building a Laravel Package & Filament Plugin

1 55%

Laravel Livewire Component: Step-by-Step Guide

1 year ago

00:37:47

Laravel Livewire Component: Step-by-Step Guide

1 48%

Балет. Карусели / II Цирковой фестиваль Без границ (2023) FHD

1 year ago

00:03:31

Балет. Карусели / II Цирковой фестиваль Без границ (2023) FHD

1 47%

#7: Реализуем карусель товаров, выводим новости на сайт и рассматриваем работу шаблона каталога

2 years ago

00:30:15

#7: Реализуем карусель товаров, выводим новости на сайт и рассматриваем работу шаблона каталога

2 37%

Full Stack Development with Java Spring Boot, React, and MongoDB Full Course

2 years ago

02:40:48

Full Stack Development with Java Spring Boot, React, and MongoDB Full Course

1 17%

Как создать CAROUSEL/СЛАЙДЕР на ReactJS с нуля

2 years ago

00:25:41

Как создать CAROUSEL/СЛАЙДЕР на ReactJS с нуля

1 85%

"Карусель". Игра по развитию речи с элементами ТРИЗ технологии.

2 years ago

00:06:47

"Карусель". Игра по развитию речи с элементами ТРИЗ технологии.

1 30%

Адаптивная верстка интернет-магазина на Bootstrap 5. Урок 5

2 years ago

00:32:54

Адаптивная верстка интернет-магазина на Bootstrap 5. Урок 5

9 64%

DevExpress WinForms: Getting Started with the Grid Control

2 years ago

00:07:27

DevExpress WinForms: Getting Started with the Grid Control

1 31%

Верстаем карусель, HTML & CSS - Часть 2 | Динамический веб-сайт

2 years ago

00:38:52

Верстаем карусель, HTML & CSS - Часть 2 | Динамический веб-сайт

1 82%

.NET 6 Blazor Image/File Uploads & MudBlazor UI Components (Card, Button, Carousel)

2 years ago

00:59:01

.NET 6 Blazor Image/File Uploads & MudBlazor UI Components (Card, Button, Carousel)

1 56%

Записки фронтендера: JS, CSS, HTMLtan video

2 years ago

00:16:56

Записки фронтендера: JS, CSS, HTMLtan video

1 40%

Thinking on ways to solve CAROUSELS || Google Chrome Developers

3 years ago

00:27:23

Thinking on ways to solve CAROUSELS || Google Chrome Developers

1 23%

Урок 4. Bootstrap5. Быстрый старт. Компонент Carousel в Bootstrap5

3 years ago

00:08:52

Урок 4. Bootstrap5. Быстрый старт. Компонент Carousel в Bootstrap5

1 78%

Салат на Новый год КАРУСЕЛЬ, всего 4 ингредиента. ВКУСНЫЙ салат за 5 минут на Новогодний стол.

3 years ago

00:01:34

Салат на Новый год КАРУСЕЛЬ, всего 4 ингредиента. ВКУСНЫЙ салат за 5 минут на Новогодний стол.

2 34%

Best of Codepen #12/2021

4 years ago

00:02:46

Best of Codepen #12/2021

2 91%

0 Comments

Guest