Уроки Bootstrap 5 - Делаем слайдер

Продолжаем изучение Bootstrap 5, в этом видео наш сайт уже начинает приобретать определенный внешний вид и мы сделаем слайдер. Готовый компонент Bootstrap 5 позвоялет нам без особого труда добавить слайдер на наш сайт достаточно быстро. Даже если вы начинающий вы можете просто добавлять необходимые классы блокам html css, а все стили уже готовы, а javascript тем более подключен.
Курс «Frontend-разработчик» в SkillFactory: clc.to/bRwRkA
Скидка 45% по промокоду WD Blog

[@andrewmelnikov1507]

Для тех у кого не работает переключение между слайдами - попробуйте в и поменять data-ride на data-bs-ride, и data-slide на data-bs-slide

[@ivansavkiv2765]

+++

[@rostov_papa161rus]

Ты лучший! здоровья тебе и удачи!

[@JavaScriptcher]

Царский лайк!!Видно сейчас в июле 2021 в бутстрап все поменялось

[@АртемЗеленков-х5к]

спасибо

[@nabi8297]

Спасибо вам большое

[@annabondar9136]

Спасибо тебе огромное за эти потрясающие уроки. Я только недавно окончила учить CSS и HTML, а твои уроки - волшебная палочка, чтобы мои будущие проекты были ещё красивее!

[@АлексейСемендяев-с3щ]

Чел дай бог тебе здоровья, помог разобраться с bs

[@eugenia9999]

ещё один видос ?!? сразу же лайк заряжаю !!!))) Спасибо !!))

[@SuprunAlexey]

Да

[@dimasskl1sdv231]

все клёво, только вот у меня почему-то кнопки на слайдере не появляются, хотя делаю все как на видео. И из предыдущего урока при увеличении страницы бургер исчезает и остается только бренд, ни li-шек, ни search-а с кнопкой не видать....

[@lydiehenckes6051]

Спасибо большое за уроки, просто и понятно!

[@therelaxingsound6903]

height: 700px (например) object-fit: cover - что бы картиночки не плющить ))

[@Vitalixius]

Почему кнопки переключения слайдов появились не на самих слайдах, а выше, там где другая информация?

[@icelandochka5808]

Вот это 10 из 10! Навбар обрезает часть изображения - плевать. Картинки сами подбирайте по размеру. Какие-то нормальные слайдеры с кнопками и информацией - не надо. Ужать картинку по вертикали, чтоб на ней получилось какое-то уродство - легко! Ужимать картинки на мобилах только в ширь? Да запросто! Это точно верстка сайта в 2020 (хотя я из будущего у меня 2021), а не 2016? Да такой проект стыдно себе в портфолио в 2021 добавить.

[@kappapride6226]

тоже проорал с этого. Добавил код с сайта, 2 строки своего говнокода и сломал слайдер, такой шок.

[@XAHMr]

Как вы на 5:50 стали писать на двух строчках одновременно? Какая это комбинация клавиш?

[@SuprunAlexey]

Мистер Редейдж зажал альт

[@XAHMr]

@@SuprunAlexey спасибо!

[@meiirzhantoktarbayev]

12.11.2021 не работает. Есть точно такой код в документации бутс, лучше там скопировать

[@PavelMenshikov80]

У через промежуток времени скользит. А по кнопкам идет перезагрузка страницы. Делал все тоже самое

[@ЛюбовьЛукашенко-с7й]

вроде все делала по уроку, слайдер получился, но почему-то картинки не перелистыванием меняются, а просто меняется резко. Что может быть не так?

[@АлександрСтадольник]

помогите

[@jonjonov6783]

спасибо за труд!

[@SuprunAlexey]

И вам спасибо!

[@ИгорьПетров-я5л]

Спасибо, но что если я хочу вертикальный слайд, как это сделать?

[@xesax]

Подскажи , что за ты плагин юзаешь ? Когда например просто пишешь a. Вместо

[@dudai525]

Emmet

[@Mani_Fast]

Еммет

[@SuprunAlexey]

Обязательно посмотрите видео у меня на канале про плагины VSCODE

[@klmnprst777]

Ну и вот снова, сейчас слайдер такой никому не нужен, нужны кадры с какими-нибудь заголовками и кнопками, и тут я увидел что при уменьшении ширины экрана картинка сжимается, а должно быть так чтобы весь слайдер пропорционально менял и ширину и высоту.

[@ЕвгенийУгланов-ш2л]

согласен

[@SuprunAlexey]

подбираете изображение по размеру, ставите класс w-100 и готово))

[@ivansavkiv2765]

@@SuprunAlexey Надо в .carousel-item и в .carousel-item img убрать height: 600px;)))

[@ministersport]

спасибо за видео! но сейчас актуальны карусели со свапом,а не только кнопками,есть такая возможность?

[@SuprunAlexey]

Всегда пожалуйста

[@SuprunAlexey]

Есть, мы сделали такой в видео по практике верстка сайта на бутстрап 5, оно третье если я не ошибаюсь

[@bogdanvasulenko5385]

Привет. Можете записать видео про смену фона сайта, относительно времени дня. Утро, день, вечер, ночь.

[@SuprunAlexey]

Не

[@giper4403]

вытяни время из системы пользователя, браузер эту инфу предоставляет, и запили извенение в зависимости от показаний. Но это я на PhP могу сделать))

[@alexdreamer11]

Подскажи как сделать, чтобы разные по размерам картинки вписывались в слайдер одинаково.

[@sdgghj6159]

background-size: cover Пускай и через 10 месяцев, зато не через год :)

[@DC5Dimension]

Как правильно по размеру подобрать изображение для слайдера?, ссылки никто не ставит из фотобанков у себя на сайте

[@oikikku]

Думаю на сайте найти решение. Там показано как ставить размеры.

[@tomozi1]

Отличные видео. Не хватает плейлиста

[@SuprunAlexey]

Сделаю

[@vadymboroliuk475]

почему у меня нету анимации переключения ?

[@daamn910]

Что делать если нет анимации

[@mrin0]

!

[@JavaScriptcher]

При нажатии на кнопки слайдера изображения не меняются! У кого также?🤔

[@nwfrusya9389]

та же фигня, сначала думал, что что-то не подключил в head, но там всё правильно, так или иначе смотри в документацию: bootstrap-4.ru/docs/5.0/components/carousel/

[@MoranKitz]

Хах) И зачем я юзал JS/JQ для написания слайдера, если на Bootstrap это пишется за 2 мин???????????????????

[@SuprunAlexey]

Moran Kitz это опыт:)

[@fobien]

Честно говоря Ну такое Привнес бы хоть что то свое А то так просто копипаст с оф сайта Но спасибо за труд в любом случае (Я про слайдер, и навбар, ну и возможно и т.д.)

[@spaceinshower9770]

Вообще не работает!!!

[@Mani_Fast]

1 Найс

[@SuprunAlexey]

Good

[@stanxxxw]

Зачем ты документацию переписываешь, один в один из документации слайдер

[@nympherbeats7508]

Всмысле, bootstrap 5?

[@SuprunAlexey]

Ага, уже выходит