Bootstrap tutorial 21 - Carousel (Slideshow)

Bootstrap tutorial 21 – Carousel (Slideshow)



In this tutorial I show you how to create a ‘carousel’ or a ‘slider’ in bootstrap. You also get to see some juicy looking fruit.

Sponsored by DevMountain. Get yourself career ready, check out their website:

Useful links:
———————————–
Don’t forget to subscribe:
www.youtube.com/QuentinWatt

Follow me on Twitter:
www.twitter.com/QuentinWatt

Follow me on Facebook:
www.facebook.com/quentin.watt

Feel free to donate:

————————————

hey YouTube how's it going it's Quinton here and welcome to tutorial number 21 and in this tutorial I am gonna talk to you guys about the bootstrap carousel some people actually prefer to call this a bootstrap slider that's when I prefer to call it but yeah whatever you guys want to call it it's up to you is this is this is just what we're gonna be making in the e tutorial and you can see in the demo over here we have a navigation to kind of move the slider either way we have this little dot nav at the bottom which we can use to swap between slides if I had like 10 different slides I could skip all the way to the end by hitting the last dot nav then we also have a caption which is text it's not something that I photoshopped onto the image this is actual text which can be indexed by search engines and it can also be found in a search so like when the user hits ctrl F in their browser and like searches for a word like let's just say assorted then it'll show up so that is pretty awesome that you don't have to photoshop the text onto the image because people used to do that back in the day and yeah the most important thing is the image in the background as well so now that we've run through all of that let's actually get started looking at how to code so I am starting off with this container and a row and a column and that's kind of giving me this look where the slider is centered with the rest of the content but I know a lot of people like to do this where they have like the content all centered over here but the slider goes all the way to the end of the browser to meet the sides so if you guys wanted to do it that way then your content would have to be in another container like down here below and the container with the with the slider should have a class of container – fluid so that's if you guys want to do it that way I'm not going to do it that way so yeah I'll let you guys play around with it at the end of the tutorial but for now let's go ahead and create our parents div that holds the rest of that slider so I'm going to create a div over here and I'm gonna end that div off and this div takes three attributes the first one is an ID which we have to have the second one is a class and the third one is a new attribute which I've never spoken to you guys about before and that is data – ride so let's start off with the ID first and I'm gonna give this div an ID of my slider you could call it anything you wanted but you know just for tutorials sake my slider great and then from here I need to go ahead and add some classes so I'm gonna add a class of carousel and I'm also going to add a secondary class of slide and what this does is it pulls through the styling from bootstrap that we need for the slider so if you don't have these classes your sliders probably not gonna work yeah and now after we've done that let's go ahead and add in this new attribute that I spoke to you guys about which is data – ride and you guys have probably worked with the data – toggle attributes which I mentioned in the previous tutorials so this kind of works in a similar way where that data – toggle attribute kind of told JavaScript not JavaScript it told the browser while I'm tripping over myself here but that attribute told the browser when this element is clicked you need to call some JavaScript that's gonna toggle the function or whatever and so this attribute does a similar thing what it does is when the browser loads it tells bootstrap okay this slider needs to start sliding that's as simple as it is okay so let's go ahead and just set that data – ride attribute equal – carousel and that means that when our page loads this carousel should start burning or you know start sliding great so from here there are three other groups or three other containers that we have to add and I'm just gonna create a lot of space over here because I'm gonna leave some comments so the first comment I wanna leave is gonna be for indicators while I'm Decatur's know okay calm down breathe Quinton we won't make any more typos from now on great in the indicators great and this is also known as dot nav so it's gonna be these little dots down here and I can go ahead and in that comment off so that is where our indicators are gonna be from or below that we're gonna have a wrapper so I'm gonna create another comment here that's a wrapper for slides and this is where all of our slides will go make sure we in that comment off properly great and then below the wrapper for our slides that is where we put our navigation so that is gonna be these left and right buttons over here so let me go ahead and make a comment for that it's actually called the controls or next and prayer buttons great so now we know exactly what we're gonna do and what we're missing and so yeah let's go over and start off with the wrapper for the slides first seeing as this is like the most interesting part and I'm gonna create a div over here which is gonna hold all of the images and that is going to have a class of carousel – inner and you need to make sure that that is spelled correctly then let me go ahead and give this a role which is going to be equal to list box this role attribute is not necessary but it helps like explain to the browser what we using this div fall so yeah it's it's just useful for like screen readers and those kinds of things but again we might not or it's not it's not necessary so you don't have to add it in basically then from here we need to create a bunch of divs so I'm gonna open up a div tag and I'm gonna close that off and just drop that down a line and each one of these divs is gonna be a new slide so if we have one slide we'll have one div but if we have ten slides then we'll have 10 of these divs in here great so let me give this a class and the class is item which kind of explains itself and then I'm gonna give this one a secondary class which is active and this active class should only be on one of your slides because that is going to be the slide that the slider opens on when you open the web page great so right now that one's active and generally I guess it will be your first slide it makes a lot of sense for that to happen but if you guys want to change it and use the last one you could do that up to you great so let me go ahead and add an image inside of here so this is going to be the image that shows in the slide and an image requires two attributes the first one is the source and the next one is an alt attribute and I am going to give the first image a source of fruits jpg but that is actually in a folder called images which is relative to my index file over here so that means I have to go into the images folder to look for the images right so that means I need a source of images slash and then my image name which is fruits and that is a JPEG image then for an alt attribute I'm just going to type the word fruits hopefully this image is always found and there's never any trouble so I don't need that alt but that all what that old does is actually also explain to search engines like Google what this image is actually about so if you guys want to put something more descriptive in there go ahead and do that so now we've got our image underneath the image this is where we add a caption which is another div tag so I'm gonna go ahead and hit enter make sure that that div is like over two lines we've got some space and this div needs a class of I think carousel – caption so let's say class carousel – caption and inside of this div you guys could put pretty much any text that you wanted to put in here so I'm gonna just add in an h1 but if you guys wanted to use paragraphs or something like that you could go ahead and do that that's fine and it's totally up to you how much content you want in this caption but let me go ahead and close that h1 off and I'm just gonna say sordid fruits as the content and now I'm gonna go to the browser and refresh for the first time so let's hope everything works and it looks good to me so we have one slide with a caption we don't have any navigation at the moment and we don't have any buttons at the moment but let's go ahead and continue coding so we can finish this slider and like I said each one of our slides is going to be the same as this content so I can actually just copy all of that and paste that down here I need to remove that active class because only one of these items should be active and I'm gonna use the first one but you guys could use any one you wanted great from here we now have two slides I'm just gonna change the content in this caption to be raspberry yes and I also want to change that image to I believe it's called raspberry dot JPEG let me go ahead and open double check yeah it looks good great so save that and if I jump back over to the browser now I should have two slides but I can't navigate between the two of them just yet because we haven't created any buttons so that is the next step and the reason why I was just like kind of waiting is I was waiting for that slide all the time on that slider to run so we could see that both images are indeed here great so that is our images side sorted let's take a look at how to create the next and previous buttons which will be the two buttons on the side and that is quite simple it's actually two links that we need to create so I'm going to create an a tag and we can just end that a tag off but there's gonna be some content inside of here so I'm just gonna drop that down a line like that and this a tag needs a class first of all and then we'll have the href in just a second but I'm gonna add a class of left to this first one and that is because it's going to be for the left button then we need to add another class which is carousel – control and this is basically telling bootstrap that this is going to be a control you kind of need that class there so don't skip it and then the href that is actually going to be set to whatever ID you used up here so whatever ID you use for the like container of the slides go ahead and copy that paste that in here and make sure to put a hash before this because this is gonna be calling some JavaScript so yeah href my slider and that just means that it is calling back to the slider and not like linking to another page or anything like that great and then I'm going to add a roll now this is I believe not necessary but it is good to have so let's go ahead and just add this roll is equal to button and what that means is it's telling the browser and it's telling screen readers and stuff out there that we are using this link not as a link but as a button because if you think about it when you click on this link you're not going to another page you're just switching between different slides on the on the slider great so now that that's in there we need to add one more attribute which is data – slide and we need to set that equal to something and this attribute basically tells the slider which way to slide when the link is clicked so I'm going to add a text of V of probe over here and that means that when this link is clicked we need to move to the previous slide which is also the left slide or the slide to the left so yeah now that that's done we need to actually add in our arrow our left arrow so I'm going to add a span tag over here and I'm gonna give the span a class class is equal to LIF icon and live icon – Chevron – left so that it is an arrow that points to the left we could also add a secondary attribute of area – hidden is equal to true not necessary but what it does is hide the arrow if you're not hovering over it or something great so that is our span tag sorted and then if you guys want to take care of screen it is because if you want to take care of people with disabilities coming to see your site that are using a screen reader you might want to add a secondary span and that will have a class is equal to s R – only and that just needs some content so I'm gonna say previous and what this does is hide the span tag so basically it won't be visible to people who are not using a screen reader but people who are using a screen reader will know that this is actually a button to go to the previous slide yeah that's just what it's there for great so we've got our left button sorted all I need to do now is copy that link and paste it again and then change the content or the class from left to right then we also need to change data – slide from previous to next and we need to change this glyph icon to go to the right instead of to the left so let's go ahead and hit save and if I come back to my browser and hit refresh you can see I have two arrows over here that we didn't have before and when I click on them the slider is moving to the left and to the right great so that's done the last thing we need to do is add in our indicators or our dot nav so I know this this is taught this tutorial is getting kind of long but it's almost done this one or this part should go quite quick all we need to do is open up an ordered list and go ahead and close it again give this ordered list a class and I'm gonna give it a class of carousel – in the caterers and that is necessary what it does is pull through the styling to turn each unordered list item into just one little dot and put it down here great so now we need to make a list item and I'm gonna go ahead and close that off and this list item needs two attributes so I'm gonna go ahead and say data – target and this is a necessary attribute what it does is references back to that slider so when you click on the list item it's going to change to the slide that we wanted to change to and what we need to do is actually grab our ID for our slider paste that in here and also use a hash and that just references back to that slider again so we know that the target or the data that we want to change is in the slider and then we need to give this another attribute which is data – slide – – and that is the slide that we want to slide to and the first slide in bootstrap is slide number zero because we start counting at zero with computers great so that's now done I can go ahead and copy this and I'll paste this down here and for the second button we'll just add a 1 to here so that means we'll now have two dots because we have two sliders and the first dot is going to link to the first slide or the zero with slide and the second dot is going to link to the number one slide or the second slide actually which is the rasberry slide and then what you guys need to do is whichever one of your slides has the active class in my case it's this first one I'm gonna go ahead and copy that and I'm going to come back up to the top here and just add a class to my zero width slide which is this one and I'm going to add that as active as well and what that does is just turn our dot active for the active slide great I hope hopefully you kind of understood that basically whichever slide is there kind of needs to have the active class great and here is our active button there is our non active button click the non active button and I can slide between the different slides great awesome we have now made a slider or a carousel in bootstrap how fantastic is that and that is all I have for you in this tutorial so don't forget to subscribe please feel free to leave a comment like and share this video it's really gonna help my channel grow and I'll see you guys next time

44 thoughts on “Bootstrap tutorial 21 – Carousel (Slideshow)

  1. i wanna see the js code for this carousel. there is only for html code in your video. can i get the js and css code for this carousel??

  2. Does this data-ride="carousel" work if suppose I am just putting one item active, with only one <img> tag, whose src attribute keeps changing on the fly? Or is it compulsory to put those many <img> tags, with only one under item-active div?

  3. Hi.
    The Images are sliding but they are going always straight to the left side – the aren't centered.

    The texts are centered correctly.

    How or where do I have to center these pics? In bootstrap.css or another one?

    Regs
    Nick

  4. He!! Thanks for you video, Is very nice.
    I have a question!
    I need to create two carousel in the same HTML, but when I create the second carousel it doesn't work. How can I do it?
    thanks 😀

  5. my pictures are stacked on top of each other instead of sliding. I was following everything you did up to the second slide / picture and it stacked them on top of each other, and captioned over each other at the bottom of the second picture. 🙁

  6. super tutorial sir but images place i add videos its sliding well and playing videos well but in mobile it not sliding please help me

  7. Right, here 's the thing: how do we customise this code!!?? You know, changing font-colours, centring it. Without that, juicy fruit doesn't mean fuck all!

  8. My pictures are stacked and the navigation is not working.I have imported the jquery from bootstrap.can anyone help me where I am going wrong?

  9. Oh my god.. after half of an hour I finally solved a problem with carousel not sliding.

    Because of navbar copy pasted from bootsrap (as it is told in one of the tutorials) I had to change version of bootsrap to the newest (4.0.0 <because the codes differed>), by which I mean upgrading the links for css, js, jquerry (+popper). But I couldn't found js for the newest version on Bootstrap download page and it stayed old. After a minutes of searching I finally found js on one of the pages on Bootstrap (why did they not put it in downloads? oO), and here it is: https://getbootstrap.com/docs/4.0/getting-started/introduction/

    So the last three lines before </body> tag were like this:
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    And the meta in <head> section looks like this:
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    Note also that in the newest version require you to change <div class"item"> to <div class="carousel-item">

  10. if you set container-fluid instead of container it wont stretch to edges of browser, at least not to me. I just code it without container/container-fluid and without any rows and columns, just code for carousel

Leave a Reply