Original subtitles

It's a little bit boring just to have a single testimonial, right?

That seems like only one person ever used our app

and actually liked it. So I'm sure there's more than one person who likes our product,

right?

So we're going to use something called the Bootstrap carousel, and this is kind of like a slideshow that allows

you to go through different content. And you've got the ones where it's kind of automated, like you’ve got

over here, but you've got another one which is more manual, which is the one that we're going to use, where

you can toggle through all the different slides.

And in our case each slide is just going to be a new testimonial from a new person so that we can show

off how many people love our product.

So let's first have a play around with it using our Code Ply.

So if you go to the first example where there’s slides only, and copy the code here into a new Code Ply

playground.

And of course remember to change your framework if you need to, and paste that code into the HTML section.

So now let's hit run.

Now it is working,

but in this case there's no source for the images

so they're not really showing up. Instead of looking for images and messing around with this,

I'm simply going to select the carousel item which is the class that is the div that contains each slide

and I'm simply going to give it a height of, say, 500 pixels, and I'm going to go into the div and I'm

going to add an inline style. So style equals background-color red, and I'm going to add this inline

style to all three slides. And the first one is going to be the red.

Second one is going to be yellow.

Third one is going to be blue.

Hit run.

And now let's pop it out to see what this looks like.

So this is our first slide, which is red

and it says first slide. Images are not working because we couldn't be bothered to find a valid image,

but if we did put one in there then it would work just fine.

And now, after what seems like forever, our second slide has just slid into view.

This one's yellow. This one says second slide.

And if we have the patience and do not fall asleep before the third one comes along, then, there we go,

we’ve got a third slide as well.

Now it's a little bit slow, isn't it?

And, you know, if you're on an actual web site, it's probably not a great idea to have very fast carousels,

because it's kind of annoying, but how can you change the speed?

Now, if we go into the Bootstrap documentation and we look at the usage options, which you can get to by

clicking down here,

then you can see that there's quite a few different options that we can actually change about these

carousels. We can change, for example, the interval, which is the amount of time delay between cycling the

items.

Now the default is 5000 milliseconds.

That's the unit here,

even though it's not really said here. So 5000 milliseconds is basically five seconds.

Now, if we wanted to speed it up, we can change that interval to, let's say, maybe every second.

So, if we go into the div that is our carousel, which is here, and, as it says here, you have to append

the option name which is called interval to data-,

so, for example, data-interval equals this.

So we're going to go in here and we're going to add that attribute data-interval, and we're going

to set it to equal to 1000 which is going to be 1000 milliseconds or basically cycling every second.

So let's hit run.

And now every second our carousel is changing its slide.

Now before I blind you there's a whole bunch of other options that you can change.

For example, should the carousel react to keyboard values?

So for example going left and right.

Should it be paused when the cursor is hovering over the carousel?

So let's go ahead and see what some of those things might look like.

So let's for example add the one where we can pause on hover.

So let's add the attribute called data-pause and it's going to equal to hover.

Now if we hit run our slides will continue going at the speed of light.

But once I put my cursor inside it then it will pause which is quite a nice feature.

And some web sites are too lazy to implement this, which is really frustrating when I want to read what's

on that particular slide in the carousel.

Now, another thing that we can change is the slide class here.

So if we removed that from the carousel class then you can see that it no longer slides but just changes

to the next carousel item.

But I quite like this sliding animation, so I'm going to put it back in.

And the final one I’ll show you is how do you stop this auto play.

Well, you can change

ride.

So, data-ride over here, if it's equal to carrousel, will just auto play. If it's set to false, then it

will only play if you tell it to through maybe the keyboard buttons or through some carrousel button.

So it's not auto playing anymore.

So how do we change the slides? How do we go from slide one to slide two?

Well, if we have a look in the docs, there's another type of carrousel which has controls,

so it has these buttons that lets us go between the different slides.

And that's what I want to implement for our TinDog web site.

So how can we do this?

So I want to have a static carousel that doesn't auto play.

So I'm going to leave data-ride equals false.

Now, I don't need a data-interval anymore, because that only applies to the animation of auto scrolling

between the different slides. And data-pause on hover

I also don't need because it's stopped by default.

So now if we look inside this example which has the controls then you can see that the difference between

this one and the previous one that didn't have controls is that it has some buttons down here. It has a carousel

control previous and a carousel control next.

So let's go ahead and copy these two buttons over to our Code Ply.

And you can see down here they've put it just above the last div.

So we're going to do exactly the same.

So now if we hit run and we pop it out,

you’ll see that we now have buttons but they don't work yet.

Now the reason is because, as with all of these Bootstrap buttons they, have a href that targets

the carousel and it needs to be the same name as the id of your carousel.

So, for example, in this case the id is carouselExampleSlidesOnly, but this href is targeting something

called carouselExampleControls,

and that's because in the second example the id was called carouselExampleControls.

So let's change this.

Let's make it target something like just called testimonial-carousel, and we can make that the same

href for the previous as well as the next buttons.

And of course we need to change the actual id of the carousel over here.

So now whenever each of these buttons are pressed they target the carousel that we've got in place and

now if I run our code you can see that when I press on the buttons it actually changes through the slides

and it works both for the next and the previous buttons.

Now let's go through each and every line of this code just so that we understand fully what it's all

about.

So the first thing is a div that has the id of the carousel.

And this of course, remember, needs to be unique across your page.

Next we add some custom Bootstrap classes, which is carousel, which says that this div is going to be

a carousel, and slide, which, if you remember from earlier on, says that our slides should animate in from

the right or left rather than simply just appearing. Data-ride equals false means that it doesn't auto

play.

So we've got that line sorted.

Next we've got the carousel-inner,

and this is going to contain the contents of the carousel items,

so the slides that will be changed. Inside carousel-inner

we’ve got three carousel items. And the first one, the first page that you want to show on your web site,

so when you load up your web site, the first slide is marked with an active class, and you have to have

one of these carousel items being marked as the active class.

Now the next thing is some inline style that we put in just to be able to distinguish the three slides

from each other.

And then inside each of these we’ve got some content. So you can have an image, or you can have, say, an

h1,

it doesn't really matter,

it doesn't change anything about the carousel.

And in fact later on we're going to be putting our custom testimonials inside here as the carousel item

content. So we can ignore these images, like here and here.

Then we get to our two buttons.

So the first button has the class carousel-control-prev, that is this left button over here, and it

has an href to know which carousel to target, because you can have multiple carousels in your HTML,

all right,

so it needs to know which one it should affect. Then the role of it is the button.

Now, ideally, you want to use an anchor tag as the HTML element that's going to be the button, but it doesn't

have to be.

It could be something like an h1 that you might want to assign the role of button to, right?

So this is what it's all about. You have to add this role equals button to change our anchor

tag into a button.

Next is data-slide previous.

So this says which direction should your carousel slide.

So this is going backwards and this one is going forwards. And the next line is a span.

And this is the button icons,

this little arrow over here.

And this comes from Bootstrap

by adding in that class. And aria-hidden equals true.

Now this is something that we saw in the nav bar as well and we didn't really talk about it too much.

But aria-hidden basically means that when a visually impaired person comes across your web site, they

usually have something called a screen reader which goes through the web site and reads what is on there

so they can hear what we can see.

Now for things like buttons you don't really want the screen reader to read out left button, right button,

or, you know, previous button, next button.

So you have this thing called aria-hidden, which basically means, make the screen reader skip over this

button span so that the visually impaired person doesn't have to listen to what all the buttons are.

And this goes towards, you know, making your web site more accessible and friendly to people with disabilities.

And this is actually a really really big topic and really really important topic as well.

So you can either keep it in or you can delete it.

But just remember about your users who might be visually impaired.

Now the last band that we see in here is called sr-only, and this stands for screen reader only.

And that is what we said before,

right?

So instead of telling the user that there is a carousel control previous icon button, instead it just

says 'previous' on the screen reader.

So you can either delete this if you're not planning on being accessible to people who have visual impairments

or you can include it and make sure that your web site is more inclusive.

Now in our case I'm actually going to get rid of it just because we're learning something new and I want to

keep the code as clean and pure as possible.

So now this is what we've got as our carousel, and this is what we would like to implement in our web

site.

So I'd like to test out the code in something like Code Ply before I put it into the web site

when it starts interacting with everything else and it could lead to issues.

So I want to have a pure version that's just working exactly as I need it to,

and then I can transplant it into the web site.

So let's go ahead and copy all of this

HTML over here, and we're going to put it into our index.html for our TinDog web site. And I'm

going to place it inside the testimonial section of course.

So now you might notice that there is this section that has been commented out.

So if you select it and you hold down command on Mac or control on Windows, then you press the forward

slash button, then it will uncomment it and take it back into the flow of our web site.

So we now have two testimonials, so we can change our code to have two carousel items.

So I'm going to delete the third one basically. And the first one is no longer going to have the h1

of Hello,

but instead it's going to have this first testimonial with Pebbles that we saw earlier on.

And the second one is going to be from Beverly from Illinois.

I feel like I'm on a game show.

Beverly from Illinois you have just won not very much.

So now that we've updated that let's just check to make sure that everything else is in order.

And one thing that we've transplanted over that we don't really want or need are these inline styles

so we can get rid of our inline styles that changes the background color because we have a beautiful

background color already. So let's hit save and let's hit refresh and you can see we now have a testimonial.

And if I go left

or right,

then you can see that it's scrolling through the two different testimonials I've got.

And obviously, if you have more, then you can keep adding them in,

right?

And the nice thing is that all the styles that I added previously, because I've got all the classes in

place, in the second testimonial I didn't have to add or change any styling at all.

Now there's just one last eyesore that I want to fix before we finish off this section, and that is, I'd

really like these buttons to be further out out here, so that they're not so close to my testimonial text,

because it looks a little bit weird to my eye.

Now, the reason why that's happening is because our padding is applied to the testimonial section.

So this entire section is the testimonial section and, if you have a look on Chrome Developer Tools, then

you can see that it has quite a lot of padding around all four sides.

And that is squishing in these buttons here.

So in order to change that we can apply the padding to only the parts that we want to be padded.

So what we can do instead is we can apply that padding to each carousel item, so that the content inside

the carousel items are padded, so the h2, the image and the em, they're all bunched in the center,

but to have the buttons outside of that padding, so that it has more space and it's more visible and

more easy to click on.

So to do that all we need to do is to target the carousel item and we're going to move the padding from

the testimonial section which is section wide to only inside the carousel item.

So now if we hit save and refresh then you can see our buttons are now all the way out here.

And, if you take a look at Pesticide, you can see that the buttons are now occupying a much larger space

and it's hard to miss.

So if you click anywhere in the section it will scroll through the testimonials. But our padding for our

carousel items are still in place and it still looks exactly the way that it did before,

just we now have more logically placed buttons.

So, I hope you enjoyed this section of learning about the Bootstrap carousel, and it might be worth for you to

have a play around with some of the other examples that they've shown inside your Code Ply playground.

But in the next lesson we're going to learn about another Bootstrap component which is really really

useful,

and that's the Bootstrap cards.

So for all of that and more, I'll see you on the next lesson.