Скачать
Создаем слайдер карусель для сайта / Плагин Slick
Автор: Code Lab - Уроки по программированию
Загружено: 2022-11-02
Просмотров: 2301
Описание:
🌐 Наш сайт: https://codelab.pro/
💬 Группа в Telegram: https://t.me/codelab_channel
––––––––––––––––––––––––––––––
📋 Кратко, о чем это видео
Карусельный слайдер — это тип слайдера, который позволяет пользователям прокручивать серию изображений или другой контент. Обычно используются на веб-сайтах для демонстрации продуктов, услуг или фотографий.
В этом видео мы сделаем слайдер карусель, который будет:
1. Отображать три слайда за раз
2. Все слайды кроме центрального (активного) — полупрозрачные
3. Есть кнопки управления слайдером
4. Отображается номер текущего слайда и общее количество слайдов
––––––––––––––––––––––––––––––
📌 Полезные ссылки
Статья про слайдер карусель ➝ https://codelab.pro/sozdaem-slajder-k...
Мой сайт ➝ https://codelab.pro
Мой telegram-канал ➝ https://t.me/codelab_channel
––––––––––––––––––––––––––––––
🕒 Таймкоды из видео
0:00 Демонстрация слайдера карусели
1:11 Подключение библиотеки через CDN
1:54 Разметка слайдера
3:02 Скрипт для работы слайдера
4:42 Стилизация слайдера
6:37 Добавляем кнопки управления
10:17 Добавляем счетчик слайдов
15:57 Завершение
––––––––––––––––––––––––––––––
💻 Промокоды на хостинг
https://timeweb.com/ru/?i=106411
FREELAB — для получения 1 месяца хостинга при оплате хостинга на 1 год.
PROLAB — для получения 3 месяцев хостинга при оплате хостинга на 2 года.
Развернуть
Доступные форматы для скачивания:
Похожие видео
array(10) {
[0]=>
object(stdClass)#5429 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "HheA6G62R4o"
["related_video_title"]=>
string(96) "Максим Шевченко: «Израиль проиграет эту войну»"
["posted_time"]=>
string(24) "20 часов назад"
["channelName"]=>
string(16) "Евразия24"
}
[1]=>
object(stdClass)#5402 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "LjbNu_7xC-4"
["related_video_title"]=>
string(156) "Самый популярный адаптивный слайдер с точками (пагинацией) без библиотек на чистом JS."
["posted_time"]=>
string(21) "2 года назад"
["channelName"]=>
string(17) "Frontend кейс"
}
[2]=>
object(stdClass)#5427 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "5JQuUUmCfxE"
["related_video_title"]=>
string(65) "Переключение на темную тему с JavaScript"
["posted_time"]=>
string(21) "3 года назад"
["channelName"]=>
string(59) "Code Lab - Уроки по программированию"
}
[3]=>
object(stdClass)#5434 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "CEzacaCUDqU"
["related_video_title"]=>
string(51) "Адаптивный слайдер на JavaScript"
["posted_time"]=>
string(21) "4 года назад"
["channelName"]=>
string(58) "WebDev с нуля. Канал Алекса Лущенко"
}
[4]=>
object(stdClass)#5413 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "blWdjRUPP6E"
["related_video_title"]=>
string(72) "Разведчик о том, как использовать людей"
["posted_time"]=>
string(25) "2 недели назад"
["channelName"]=>
string(18) "Коллектив"
}
[5]=>
object(stdClass)#5431 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "0b62T4cNLBo"
["related_video_title"]=>
string(65) "Как сделать анимированные табы на JS"
["posted_time"]=>
string(21) "3 года назад"
["channelName"]=>
string(59) "Code Lab - Уроки по программированию"
}
[6]=>
object(stdClass)#5426 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "U-qrd7ejXBQ"
["related_video_title"]=>
string(117) "Израиль горит — ПВО не справляется, всё рушится | Скотт Риттер"
["posted_time"]=>
string(24) "19 часов назад"
["channelName"]=>
string(21) "Мысли Вслух"
}
[7]=>
object(stdClass)#5436 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "V8aVdqa16j8"
["related_video_title"]=>
string(129) "АУСЛЕНДЕР:🔥Израиль ЗАХВАТИЛ господство в небе! США вмешаются в войну?"
["posted_time"]=>
string(24) "10 часов назад"
["channelName"]=>
string(19) "Апостроф TV"
}
[8]=>
object(stdClass)#5412 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "NPWmcSeH-pE"
["related_video_title"]=>
string(184) "Массированный Удар По Столице Украины🔥Трамп Втягивает США В Новую Войну⚠️🕒 Военные Сводки 17.06.2025"
["posted_time"]=>
string(23) "6 часов назад"
["channelName"]=>
string(27) "Военные Сводки"
}
[9]=>
object(stdClass)#5430 (5) {
["video_id"]=>
int(9999999)
["related_video_id"]=>
string(11) "kQqJz7j2gBU"
["related_video_title"]=>
string(91) "Карточки товаров на CSS Grid / Интернет-магазин с нуля"
["posted_time"]=>
string(19) "1 год назад"
["channelName"]=>
string(59) "Code Lab - Уроки по программированию"
}
}
Максим Шевченко: «Израиль проиграет эту войну»
Самый популярный адаптивный слайдер с точками (пагинацией) без библиотек на чистом JS.
Переключение на темную тему с JavaScript
Адаптивный слайдер на JavaScript
Разведчик о том, как использовать людей
Как сделать анимированные табы на JS
Израиль горит — ПВО не справляется, всё рушится | Скотт Риттер
АУСЛЕНДЕР:🔥Израиль ЗАХВАТИЛ господство в небе! США вмешаются в войну?
Массированный Удар По Столице Украины🔥Трамп Втягивает США В Новую Войну⚠️🕒 Военные Сводки 17.06.2025
Карточки товаров на CSS Grid / Интернет-магазин с нуля