Hello in this bootstrap four video we're gonna cover carousel carousel is a way to slideshow between different elements, images and slides of text. So one thing to note, you can actually nest that carousel within a cow self probably look quite weird and why funky if you could put your hand and most likely, you probably wouldn't want it. machine. If you had three or four nested layers. That will be like carousel, carousel ception it'll be crazy. But regardless of that, let's get to it.
To do a carousel pretty simple, you're gonna have a David within there, you have an ordered list, which, which has number list items, okay, how many slides you have, then you have the slides, then you just have a couple of buttons that take you back and forth. We can easily remove stuff so maybe if you don't want like page dots, so you can go to any page that you want less and more slides, add or remove slide or if you don't want back and forth buttons or you just want a back button, then remove That's really simple. So we're going to do is add a div and this div is going to have an ID carousel dash example the generic for a class of carousel, slide slight data dash roid equals era. So inside here, we're gonna put an ordered list and this ordinance will have the page dots.
So we need a class of carousel dash indicators. list or return. The list item is gonna have a data target ah Hash and add the ID of this that we just set before so Copy that. Paste that. Next we're going to have data that slowly to basically what page you want to flow to, starts at zero. So the first slide is zero index open zero for this, I'm gonna have a class of active by default, we're going to have the first one active can easily change if you have first, second, third fourth, whichever one active, really simple.
So let's copy and paste this couple of things we need to change like this to want to remove the class activity is only going to have one page shown at any given time. So copy and paste and just change that to return. So we got all in the paging dots or configured now it's actually time for us to create Our individual pages do that really simple. Create a div not in div and this has a class of rows in a row equals list box. And now in here you have your individual pages. For now our pages are just going to contain an image but before we get to not be div need a class of carousel item.
Next you need the class of active again, you only wanted to the corresponding list item aka cuz we got it on the first one. So index zero, we're having a on this one, the rest won't have any active class. And bootstrap handles all the active class for you. So when you click on a different item, which is really cool. Inside here, locker settled in our image, so We'll handle that in a second. And what we're going to do is have an old people's first slide.
And that's no good before we add in just gonna copy and paste this couple of times, move active. This changes to second slide. third slide. And for the source, I've got some images right here, you can have locally and access them using your file directory on a server or on your computer. Or you can use image URLs. I think See, I'm using image URLs to the place that in and now finally what we need to do is create our back and forward buttons to do that.
Just do it a class Equals left carousel dash control h ref equals an eye for the H ref what you want to do put hash the ID on this outermost div container paste that into here and do roll equal to that data dash slide equals previous and in here there are a couple of span elements. So the first one is span class equals icon dash pref which is the previous icon and input area dash hidden equals true span and in Next span is a screen recorders only. So SSR dash on it's good for screen recorder content in your website that helps reach more users previous and now what we can do is simply copy and paste this into change left to right need to change data slide to next from previous not next or next next or have heard of that word from next or thought of something from some sort of sci fi film is you put an air icon dash next chain this theory to run actually so save it.
Refresh. We've got our castles top top we got the free buttons here. They don't look they didn't look the best on the first image. That was just a demonstration of clicking the Back button. forward button for button. Now click the forward button again Going back to the first image, and that's the same if I click the back button on the first image, you go back to the or goes to the last image, he needs to switch to any one of the pages is responsive as well.
So if I start resizing this, as you can see, it's probably how it would look on a mobile device, something like a tablet, and now a full fledged desktop looks really really cool. And it works really well. Gonna also show you another thing and that is captions. So if you want to add a caption, it's going to add it to add it to the second item within the council item itself. Just do div can have a class of color so caption and then sorry, you put some text pool if you want on the puri haitch to tug Best. Yeah, sure.
Title. And the next tag is gonna be a p tag buck per div span where we won't really even put images, I guess, probably wouldn't look the best but you could, or button and Oh, yeah. Smiley face, save that refresh. So on the first page, we've got nothing, go to the last page, still nothing. Go to the middle page. There you go, we got our caption, which works well.
When we make it responsive, which is really cool, obviously, on the, this one wasn't quite the best, but we've got it as a pretty big font size, and you probably want to make that change accordingly. So that's an extra task for you. Also as an extra task at the moment, they're just images We want you to essentially enclose them into an H ref and make them clickable. So it takes you to a separate website or a different page on your website. If you have any questions, feel free to post them on our education platform sonar learning Dakota, UK for slash question dot php. There'll be a link in the description to that plus w another link in the description to the source code from this video.
Please rate, comment and subscribe. It really does help us understand what you like and what you don't like about our videos. And obviously we can remove the stuff that you don't like. And as usual, thanks for watching. I hope you have a great day.