Using Bootstrap to Add a Carousel

Loading...

En provenance du cours de University of Michigan

Web Design for Everybody Capstone

253 notes

University of Michigan

Web Design for Everybody Capstone

253 notes

Cours 5 sur 5 dans Specialization Web Design for Everybody (Basics of Web Development and Coding)

The capstone will develop a professional-quality web portfolio. Students will demonstrate the ability to design and implement a responsive site for a minimum of three platforms. Adherence to validation and accessibility standards will be required. The evolving student implementations will be reviewed each week by capstone peers and teaching assistants to make sure that the student keeps up with the agenda of the course. Upon completion of this course students will feel comfortable creating and/or updating existing front-end sites, utilizing existing frameworks, and testing sites for accessibility compliance. This course is only open to students who have completed the first four courses in the Web Design for Everybody specialization: Introduction to HTML5, Introduction to CSS3, Interactivity with JavaScript, and Advanced Styling with Responsive Design.

À partir de la leçon

Week Three: Review and Preparation Phase

This week you will continue to review your fellow students designs. Feedback will be based on layout, proposed content, and accessibility. The goal is that these peer reviews will inspire you to attempt something more on your site (or provide the feedback that lets you know you may want to scale down your own expectations.) You will begin to create the content of your site as you wait for the reviews of your project to be created.

Sticky Footers10:24

Embedding a Google Calendar5:03

Using Bootstrap to Add a Carousel7:18

Adding a Lightbox Plugin5:56

Font Awesome5:57

Rencontrer les enseignants

Colleen van Lent, Ph.D.
Lecturer
School of Information
Charles Severance
Professor
School of Information

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.

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.

And what I wanted to do was take this very first example they have for

you that comes from w3schools and kind of walk you through what they're doing and

some of the problems that I often see people encounter.

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.

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.

After that,

you can see that that there is some additional CSS down here at the bottom.

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.

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.

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.

So let's take this code right here, this width equals 460 and

the height equals 355.

In fact, I'm going to refresh the page the very first time.

This is simple CSS.

We can go in here into our style and say, you know what?

Every image, I want the width to be 460.

And the height to be 345.

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.

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.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play