Carousel Slider Bootstrap 5 | Slider Carousel Tutorial

[@AdrianTwarog]

I am trying to grow my channel, so if you find this video useful, #subscribe & hitting the #bell :) Thanks for watching and hope you liked and learnt something new!

[@muhammadgiwa8841]

Will definitely do

[@lastravaganza2385]

hey, im logging in the exact same code and it is not working the same for me, what seems to be the problem?

[@ZAMINA1985]

Highly recommend a place like GitHub where we can see your code. It is hard to go through the video to check if we have mistyped or misplaced something. Other than that, excellent tutorial.

[@Demonic6000]

Awesome 👏🏻

[@knightkidcy]

can you share the code you used to create the page showing in the video? thanks, great video

[@TheTriangle444]

If you are using the current bootstrap, (version 5.1) your carousel will not slide. this is because the data-ride is now data-bs-ride. Took me a while to figure that out

[@nathaniepeter5707]

thank you

[@chisom1376]

Thank you because I got worried

[@TECHNIXCAFE]

Thanks dude for helping us out.

[@princejairofortuna7525]

this is what i came for

[@chimmilliusjenkins9013]

Thank you so much! I was starting to give up hope and out of desperation I checked the comments, appreciate you for taking the time to help the rest of us out.

[@Pharizer]

I was following the tutorial step by step but my slider wouldn't show up for some reason. I checked the docs and the solution is the following: You have to type "data-bs-ride" instead of "data-ride". Same thing with "data-bs-target" and "data-bs-slide-to". Idk how it worked in the video tho.

[@irfansamii695]

Thanks! its works

[@johndoe-is2fw]

Thanks

[@susmantobealivebruh4238]

same lol ty for the help btw means alot man!!

[@anthonysurace1582]

big thanks

[@cellofanno1]

Thank you soo much! Had the same problem and your fix made it work like a charm.

[@toxic8196]

The help i needed at 4am, thank you.

[@mynulislam7865]

I'm from Bangladesh.I can't stop thanking you by calling cultural our word 'Bhaiya'💚...Thanks a lot,bhaiya👌🏻

[@mackynikat8833]

The help I needed at 3:44am, hopefully this is already it

[@kwameaddo1007]

3:37am

[@Psychorabbit78]

Dude, this video just literally saved my rear. I thought I was updating a new project from bootstrap 4 to 5 but accidentally updated my live portfolio. With a slider being right smack at the top of my landing page, I had to dash to KZbin to find a fix for not only that but functions like my hamburger button too. You earned yourself a subscription! :)

[@bkiem]

Send the code

[@manuelcasares7270]

If it doesn't work for you: replace all "data..." for "data-bs-..." attribute

[@joseosvaldoloranascimento4181]

Excelent!!! It wasn`t work for me untill I read your comment!! Thank you!!

[@amithalevi9180]

broooooooo thanks so much i was so exhausted and you helped me , thank!!

[@madalenamendes4302]

Thank you!!!

[@Jaghall1]

Oh my goodnesss took me forever to get here. I wish the dude would fix that in the description or something!

[@archanabiju9680]

Thank you so much

[@arielmoisesmaradiagarodrig9707]

I had a problem about responsiveness in my background image, but thanks to your video i solved it, thank you!

[@nirajbhakhar1066]

keep it up, Adrian. After watching this video I am a fan of you.

[@AdrianTwarog]

Thanks :)

[@owenhood5391]

was working on a project but couldnt recall the carousel so u saved the day.you earned a subscriber

[@CesarJuarezVargas]

Indeed, a well structured (albeit a bit too fast rendered) tutorial. Simple, elegant, effective. Friendly feedback: When I completed this project, Bootstrap 5.0.0-alpha1 was no longer available from the site; the latest version (as of Feb 2021) is 5.0.0 beta-2, and using it does not render the carousel the way it is demoed here. I had to "figure things out", and noticed that this beta2 version does NOT contain the jquery script reference on the starter template. This is the cause for the carousel to not rendered the way it's supposed to be. Therefore, I had to downgrade to Bootstrap 4.6.0 (which has jquery and popper scripts), and the challenge was solved. I think it's either a bug on the update or the Bootstrap gang just forgot to include the jquery reference on the beta2. Thanks very much!

[@bash5352]

thank you very much i was trying to follow this tutorial and wodering why it was not working

[@144heartx]

I'm also using the beta, I realized if I changed the button tags to the styling got fixed. The bootstrap documentation is not updated to reflect this change. Took a long time to figure out what was causing the issue.

[@ARMADA-oz6we]

you are god

[@killerz7545]

@@ARMADA-oz6we PP YOU ARE

[@pankajithape1218]

Thanks @ Cesar, I downgraded jquery & popper. Not worked. Needed to downgrade boostrap css also.

[@nathaniepeter5707]

after struggling for a week straight i came across this channel

[@3mij3t]

In 5:25 you write "data-ride="carousel" " and that got me crazy bc doesn't work for me. BUT i realized that writing "data-bs-ride="carousel" " works. Anyway, so much thanks for the tutorial (y)

[@robertstimmel1100]

You just saved me a lot of time! I was having issues and this fixed it! Thanks!!

[@woojinkiart9812]

wow my hero I was looking what wrong but u save me !

[@abhishekmodak6761]

stumbled upon your channel....after trying few things. Got the exact solution....Thanks a ton.

[@AdrianTwarog]

Awesome!

[@MikeXwolf]

This is by far the best tutorial on the subject I ever came across. Thank you!

[@GR3GORY90]

Thank you for this tutorial. That was very helpful. There were some problems with the slider, but I think you should add "bs" after the data.

[@muhammadgiwa8841]

I was watching this, and was half way in the video but I had to stop and give it a thumbs up for how highly educative and slow paced it is💥💥💥

[@freedombearreviews2548]

I really loved watching you code this . I am using bootstrap for a class and was looking to see how to activate the carouse template and how to apply the .active to the template to activate and make visible. Thank you so very much for your time.

[@virajsh]

Thanks ! I could not make it work from the Bootstrap Website but this video helped me

[@rinauh]

SOOO HELPFUL THANK YOU

[@MDevpxl]

The - thing didn't work for me.

[@xXSummonNightXx]

Just append bs to the middle after every data. Example "data-slide-to" change it to "data-bs-slide-to". I did what the commenter Kris said here and my slider works now.

[@layagodfrey2768]

Best contain ever for the topic. I am loving this contain.

[@walkdead94]

Nice!! :D Do it in bootstrap is very easy, easier than vue and react!

[@AdityaRaj-lj5wf]

My gosh! premium content mommy!

[@idlconferencecentreknust6648]

Thanks, Adrian for this wonderful tutorial on carousel

[@AdrianTwarog]

You're very welcome!

[@Yendi233]

This might be the best I’ve seen!

[@akmalfirmansyah4753]

thank you to solve my problem about Carousel slide

[@lucapradella8065]

You helped me, thanks, I'm from Brazil

[@QuiKzLeitOsLoW]

Great video mate

[@omidyshirazi]

such an incredible video I enjoy it a lot just wish u make an ecommerce website with bootstrap 5 and make a video about it

[@lonleybeer]

Thanks lad, this will definitely help me out on my Project. Cheers.

[@babylee3975]

Great explanation

[@criativo3dprint17]

This was so helpful!! Thank you

[@ALessOffensiveName]

good video. helped me a lot

[@pranavbhatia8163]

Really helped me. Well explained in short time.

[@garygoldblum5987]

Hi, I am really enjoying this lesson. I have noticed you do some amazing tricks within Studio Code and I am curious how you do this. I figured out how you create a class with ".container" and then hit "enter" and it pastes in "

[@talhasupport3670]

Hi Gary! This is a VS Code built-in feature called Emmet, which help you to write code faster. I hope this video will help you to learn Emmet faster. kzbin.info/www/bejne/jGnZmq2EhrCnrpI

[@maazaziz5198]

exactly what i needed :)

[@BadGirl-pn3qu]

Thank you so much for sharing the knowledge!

[@yousefalhassan8078]

Great, thanks a lot

[@fahmiilmawan8710]

Cool and easy to understand, thank you

[@emilka8557]

awesome ! thanks for your tutorial

[@dyszell]

Thank you. You helped a lot.

[@Sammorris207]

Thanks Adrian it really helped

[@usmanabid7950]

Best Tutorial 👌

[@rajesh.singha]

Awesome tutorial

[@dhamaradamsik8850]

Cool !!! Thanks for the tutorial, i'll subscribe 😁

[@AdrianTwarog]

Awesome!

[@aminea5324]

yes is very nice good job continue bro

[@AlphyGacheru]

Thanks very much, very helpful!

[@AdrianTwarog]

Glad it helped!

[@ayansultan9764]

Awesome tutorial! THX!!!

[@manojkala1]

Hi I am fan of yours

[@AdrianTwarog]

Welcome and thanks!

[@NgodingPintar]

Nice ☺

[@santiagoortiz619]

Amazing information! Infinite Vegemite for you mate!

[@AdrianTwarog]

That's exactly why I made this, for the vegemite!

[@bosar18]

thank you so much :D

[@mjaathik]

Thank you very much Adrian

[@AdrianTwarog]

You are very welcome :)

[@eloquent2200]

Thank you!

[@marcinsven6016]

I was sure Twarog must mean twaróg, our beautiful white cheese or quark as you call it in Australia ;)

[@MrPeanutToes]

This assignment is killing meeeeeee I am not good at coding 🤬 appreciate the help

[@AdrianTwarog]

Good to hear!

[@Sure_Math_Center]

Thank you.

[@prakashlulla4554]

awesome !!!!!

[@srinivasaraoyp3640]

Very interesting topic, thank you.

[@richardmisek6533]

HELP pls, I followed your code, I got icons for "click next" > or click previous < I have also lower _ _ photos but when I clcik on em, nothing is happening instead carousel is moving himself in interval

[@sushilbasnet3199]

I have the same problem. Can anyone #help?

[@zohaibazam9289]

Someone please help. Same issue

[@yusufhabib7553]

nicee tutorial, thank you very much brother

[@Demonic6000]

Awesome 💗

[@gulomxonyoldoshxonov1648]

Thank you. Very good vidio👍👍👍

[@jarifahmad12]

great video, but only problem is that my carousel fade is not working for some reason? any suggestions?

[@marciochs5523]

same problem here

[@syronox5357]

why does the code on the official bootstrap website has elements instead of ( which dont work for me and this does)?

[@stealthbusiness]

Excellent tutorial Adrian! :-) Would you please tell me how you setup Visual Studio to auto type what you're thinking?

[@raghojiconstructionsandint8344]

tNice tutorials tutorial was very satisfying

[@zakariasofi4539]

100% I make the sickest soft in my head all day long then the mont I open a DAW...

[@lastravaganza2385]

i copied the exact code and it is not working for me

[@raba650]

I'd like to see if you can show multiple items using the Bootstrap 5 carousel.

[@thelma2084]

Thank you sir

[@infinity2471]

Awesome tutorial. It seems "sr-only" no longer functions with bs5, had to use "visually-hidden"

[@dhamaradamsik8850]

Is the other source code still work for now? Cause bootstrap already updated their version again

[@riponroy116]

Please do a complete project with bootstrap 5

[@AdrianTwarog]

Can do!

[@raissaaraujo9414]

I couldn't put the right links, could someone please send me the bootstrap link used by it?

[@salomon7249]

There is one Problem: Let's say you have an Login-Form. How do you keep your inputs through all the transitions?

[@ihelpdogs]

I realize this vid is 3 years old but wondering if anyone can answer: Why do I see most developers using Swiper or Owl or some other carousel when they're also using Bootstrap that has the built-in slider? It looks and seems to work pretty good so why don't they want to use it?

[@kkkkk943]

Hi, thank you for your video!It works except that during transition to another picture, the whole thing drops down for one second and then goes back to the correct position. Anyone can tell what happen?

[@AdrianTwarog]

that's odd, check the doco make sure your css is set well :)

[@msvmanikantasrivishnu7788]

Thank you

[@AdrianTwarog]

You're welcome

[@faloduniseoluwa6500]

I was trying to put this below my navbar but it pushed my navbar up. Please how would I fix this

[@peppis3408]

Can someone help me with this my carousel slides but returns to the first one quickly, and the 2 dashes are not there, which he used to go through the carousels he wrote. and even if the button exists, it wont slide to the next one on my click, what could the problem be ?

[@TheTriangle444]

the overlay image css didnt work for me :( it doesnt display the image unless i set a width. edit: ok, just set width to 100%, along with his codes it will cover all the space of the slider div :)

[@Deensquare]

I don't understand why but my carousel is not sliding. Nor is the background color showing up. I tried changing the data-ride to data-bs-ride but it's making no difference

[@cbgregoire9]

Followed your tutorial but Bootstrap just won't work. I really don't know why. Saw something about data-ride should data-bs-ride but that didn't help either.

[@Heavenig]

Please I need the source code maybe from github

[@josephlustigiermbong5121]

thank's

[@ademtemizisler8041]

hello Adrian, I made the carousel but the picture size is too big so it doesn't fit, what should I do?

[@AdrianTwarog]

Edit the image, edit the css, or update the JavaScript media sizes via the documentation

[@arielmoisesmaradiagarodrig9707]

how can I do if i want put a logo instead the text over the carousel?

[@adrianmisak07]

thanks!

[@malmossa]

Thank you sir for this, could you show how to add thumbnails images to Bootstrap Carousel . . that will be highly appreciated

[@juliettet8332]

I think you just have to change the w-100 class of the img :)

[@santoshkharel6373]

thanks mate I owe you a milo and vegemite

[@guidobagnai6789]

I tried to follow the tutorial to understand how these work but i get a very laggy transition between the slides, i see the gray and white areas swapping color for a sec and then it loads the second slide. I alsp tried on different browsers so at this point i suppose i did something wrong

[@gohelboy]

How to set slider height and width in asp.net !

[@abdifatahabdi3939]

Hello, can we make those background images dynamic so that we can update dynamically using like django. if you have an ides about it please share with us

[@jensbruning8756]

Thanks for your work . Comes more with Bootstrap 5 ?

[@Pause4Code]

Hey, which extension do you use for auto completting the tags ?

[@othyagocarvalho]

Emmet

[@f1dog]

Thank you Adrian. For some reason, my carousel won't work though.

[@MR-KN]

Why my carousel not coming on Chrome browser but it's coming in live?

[@dude99844]

I was following your code word for word but still couldnt get the carousel to work :( Anyone got any suggestions why?