0:09
Hi everyone.
One of the things that people really enjoy on their websites are images and pictures.
And for better or for
worse, the idea of using a carousel has really taken off on most websites.
So, in this video I just want to walk you through
what I would expect most people to do if they wanted to add a Bootstrap carousel.
0:30
The reason I talk specifically about Bootstrap
is that a lot of people use it since Bootstrap provides the code.
But before we go into the example, I do want to remind you, that just because it's
provided doesn't necessarily mean that it's compliant code or the best code.
So it really means a lot if you can go in, use some of the code, and
make it a little better using the things that you've learned these past few weeks.
So let's look at that example.
So let's do what most people do what they want to incorporate new code.
I'm going to go in and just google Bootstrap Carousel.
1:21
One of the nice things about example code
is that in most cases you can just kind of copy and paste it and
play with it yourself and have it work with your pictures.
The number one issue I see with people is when they don't copy and paste, but
instead they start typing things in.
And if you don't know what every class means, and
you spell it even a little bit incorrectly, the whole thing doesn't work.
So the key is to make sure you make very small changes and test often.
So let's try out their Try it Yourself link.
1:55
When I go in here, I would like to show you that there's a few things
you only need to look at, not really understand deeply.
The first is you want to make sure you incorporate all the necessary plugins.
So, you either need to link to the CDN, or
you need to make sure that you've downloaded all the code.
2:22
All it's really doing is setting the width of something and also the margin.
Whenever you see margin ado, you're trying to center things.
So, if you were playing with this on your own computer,
what you can do is with inspect element, you can click through the elements and
see what's this, what's that and look at the CSS.
But let's start right off with something that's very distracting and
that is these pictures constantly changing.
For accessibility reasons, this is not a good idea.
It's not something you always want to happen.
So we're going to fix it right now.
When we want to keep the carousel from automatically going,
we need to go right in here, into this div right here.
We've seen all these things before.
Classes, IDs, things like that.
We're going to see something new now.
So what we need to do here is something we haven't really played with before.
And that's using the term data.
Data is kind of HTML's way of simulating variables,
like the ones we used in JavaScript.
Data lets the computer kind of remember things and update things.
And one of the things that goes along with Bootstrap
is something called a data interval.
So I'm going to go right in here.
And put in data-interval equals false.
3:43
And I'm going to click on see result and what you'll notice now is if we wait,
you can see that the slide show no longer automatically loads.
We can still make it go.
I can still click on the arrows.
And have it linked through.
And now that I've started it, it's going to continue to keep going.
But by putting that data-interval equals false in there, we kind of set it up so
that people get to control when and where they want the slides to go.
So, that might be the first improvement that you make.
4:14
The next improvement that I want to talk about is down here.
It's very common for a lot of people in their code to put this width and
height inside the tag.
You don't want to do that.
Because later if you decide you want a different height or
a different width, you've gotta go into every single picture and change it.
So, I want you to pause this for just a second and think about what you would do
instead of putting the width and height into every single image.
And I'll start writing the CSS that we're going to use.
5:34
And I'm going to see the result just to make sure I didn't mess anything up
because you know me, whenever I do the style, I tend to kind of mess things up.
And now go down here.
And every single place, where I can see we used to hard code the width and
the height, you're going to want to get rid of that.
5:49
Oops.
And that little extra there.
I'm going to see the result.
And great.
All I'm really going for right here is not messing things up.
Not necessarily making it look any different,
I'm just making it look a little better.
Then, you can play with it and pick the right height and width for
your particular screen.
This is great if you're going to be doing mobile design or
responsive design because you can have a different size for every screen type.
Let's see what happens if we make
it maybe 230 and 175.
You don't see a big difference in here because the size is still the same.
But, I can go in here to the width 70%.
I can make it 100%.
And you can see that things are changing little by little.
If you decide to put a carousel onto your page, that's great.
Just make sure you do it very slowly.
First I would copy and paste the entire code that you're using as a template.
And then change each of your images one by one.
And then finally go in and style it so it has that look you want.
It's really difficult to use other people's code
unless you do it very meticulously, methodically, and you're very careful.
So I hope you have some fun with the pictures.
If you don't use a carousel, I still hope you take the time to style it well so
people can appreciate it.
Colleen van Lent, Ph.D.Lecturer
Charles SeveranceAssociate Professor
