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.

[@irfansami-q4i]

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.

[@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

[@toxic8196]

The help i needed at 4am, thank you.

[@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 !

[@mynulislam7865]

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

[@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

[@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.

[@mackynikat8833]

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

[@kwameaddo1007]

3:37am

[@nathaniepeter5707]

after struggling for a week straight i came across this channel

[@owenhood5391]

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

[@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 :)

[@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.

[@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.

[@abhishekmodak6761]

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

[@AdrianTwarog]

Awesome!

[@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.

[@MikeXwolf]

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

[@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

[@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💥💥💥

[@virajsh]

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

[@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

[@jarifahmad12]

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

[@marciochs5523]

same problem here

[@riponroy116]

Please do a complete project with bootstrap 5

[@AdrianTwarog]

Can do!

[@stealthbusiness]

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

[@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

[@rinauh]

SOOO HELPFUL THANK YOU

[@babylee3975]

Great explanation

[@syronox5357]

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

[@lonleybeer]

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

[@Yendi233]

This might be the best I’ve seen!

[@walkdead94]

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

[@raba650]

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

[@MrPeanutToes]

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

[@AdrianTwarog]

Good to hear!

[@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

[@denimash]

Is it responsive?

[@AdityaRaj-lj5wf]

My gosh! premium content mommy!

[@layagodfrey2768]

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

[@idlconferencecentreknust6648]

Thanks, Adrian for this wonderful tutorial on carousel

[@AdrianTwarog]

You're very welcome!

[@BadGirl-pn3qu]

Thank you so much for sharing the knowledge!

[@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 :)

[@raissaaraujo9414]

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

[@dhamaradamsik8850]

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

[@AdrianTwarog]

Awesome!

[@akmalfirmansyah4753]

thank you to solve my problem about Carousel slide

[@jensbruning8756]

Thanks for your work . Comes more with Bootstrap 5 ?

[@lucapradella8065]

You helped me, thanks, I'm from Brazil

[@thenotagoodprogrammer]

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 :)

[@pranavbhatia8163]

Really helped me. Well explained in short time.

[@criativo3dprint17]

This was so helpful!! Thank you

[@Pause4Code]

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

[@othyagocarvalho]

Emmet

[@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?

[@maazaziz5198]

exactly what i needed :)

[@marcinsven6016]

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

[@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

[@faloduniseoluwa6500]

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

[@lastravaganza2385]

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

[@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 ?

[@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

[@angerichardakobe5748]

Is it possible to add images in the function of the carousel?

[@emilka8557]

awesome ! thanks for your tutorial

[@dyszell]

Thank you. You helped a lot.

[@arielmoisesmaradiagarodrig9707]

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

[@fahmiilmawan8710]

Cool and easy to understand, thank you

[@Sammorris207]

Thanks Adrian it really helped

[@aleksapesic]

Nice tutorial and nice slider. Everything works nice except for when I add overlay-image, as soon as I do that the slide goes black, no matter what styling I apply. Could you help me?

[@krenarallen]

.overlay-image {height: 100%}

[@ALessOffensiveName]

The issue for me was having overlay-image div outside of the carousel-item div. Needs to be in it

[@zakariasofi4539]

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

[@QuiKzLeitOsLoW]

Great video mate

[@unmplyd-DataScientiZ]

even my slider wont slide i even added bs in data target it slides te first image and stop not move untill i refresh the page

[@maryadi2458]

change data-ride to data-bs-ride, add "bs" in every data-....(class name) so it would be data-bs-(class name) sorry for my bad english

[@manisha4126]

@@maryadi2458 Thanks :D

[@gohelboy]

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

[@salomon7249]

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

[@bigZitronenschale]

I need help: I am a total beginner in webdev and not "allowed" to use the div element for an university class project. All code I find online is packed with div elements though, especially in combination with bootstrap since items are altered through the class attribute. Can any of you maybe recommend me a good alternative I could use instead of div, or do I have to come up with a whole new approach to coding? Thanks for the help!

[@flotspe]

I 'm assuming they impose that silly rule because they want you to explore semantic html elements: header, footer, nav, aside, main, section, article (and a few others). Look for semantic html on google or KZbin. Just remember that sometimes a div is just the best choice (when it's used just for styling purposes, for example)

[@collinsejindu7922]

I am not used to styling in my html,tried it in my css and my photo is still not sized well,is there anything I can do?

[@yousefalhassan8078]

Great, thanks a lot

[@Heavenig]

Please I need the source code maybe from github

[@ALessOffensiveName]

good video. helped me a lot

[@ayansultan9764]

Awesome tutorial! THX!!!

[@usmanabid7950]

Best Tutorial 👌

[@rajesh.singha]

Awesome tutorial

[@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

[@santiagoortiz619]

Amazing information! Infinite Vegemite for you mate!

[@AdrianTwarog]

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

[@Nami-bu2qf]

Is there a difference if I using bootstrap 4?

[@AdrianTwarog]

Should be the same!

[@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 :)

[@aminea5324]

yes is very nice good job continue bro

[@ZEYNEPALEYNAAYDIN]

ı cant found starter template what can ı do ?

[@AlphyGacheru]

Thanks very much, very helpful!

[@AdrianTwarog]

Glad it helped!

[@quanne131]

how can i stop auto slide carousel in bootstrap 5??

[@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

[@MR-KN]

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

[@LatinoWebStudio]

great video, thanks! I'm wondering, is there a way to create a slider that has 3, 4, 5 or however many slides showing at the same time? Similar to owl carousel?

[@brianronin505]

pra algum br que estiver lendo isso aqui, a dica é colocar "bs" depois do "data" assim data-bs-exemple

[@dude99844]

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

[@bosar18]

thank you so much :D

[@srinivasaraoyp3640]

Very interesting topic, thank you.

[@manojkala1]

Hi I am fan of yours

[@AdrianTwarog]

Welcome and thanks!

[@mjaathik]

Thank you very much Adrian

[@AdrianTwarog]

You are very welcome :)

[@f1dog]

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

[@NgodingPintar]

Nice ☺

[@yusufhabib7553]

nicee tutorial, thank you very much brother

[@pearldarkowaayeboah1210]

Why did you not add a navbar to it; as shown in the thumbnail