Explore
For Enterprise
Join for Free
Log In

芸術と人文
ビジネス
コンピューターサイエンス
データサイエンス
情報技術
健康
数学と論理
自己啓発
物理科学とエンジニアリング
社会科学
言語学習
学位
修了証

Coursera（コーセラ）内をすべて検索

閲覧
検索
企業用
ログイン
参加は無料

Exercise (Video): Carousel

Loading...

Front-End Web UI Frameworks and Tools: Bootstrap 4

香港科技大学（The Hong Kong University of Science and Technology）

4.8 (1,840 件の評価) | 42K在籍する学生

Full-Stack Web Development with React 専門講座における 4 の 1 コース

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

シラバスを表示

学習するスキル

Bootstrap (Front-End Framework), Node.Js, Jquery, SASS (Stylesheet Language)

レビュー

4.8 (1,840 件の評価)

5 stars
1,525 ratings
4 stars
264 ratings
3 stars
36 ratings
2 stars
8 ratings
1 star
7 ratings

AA

Jul 12, 2018

One of the best courses I have ever taken. Everything is explained in the best way possible. The Instructor is also good. Must give this course a try. It enhanced my knowledge of the subject matter.

BB

Nov 07, 2018

The instructor knows his subject well. He uses real world examples that allow you to achieve something tangible. On a personal note I loved listening to his instruction. He is an enjoyable teacher.

レッスンから

Bootstrap Javascript Components

This module concentrates on Bootstrap's JavaScript based components. You will learn about tabs, pills and tabbed navigation, collapse, accordion, scrollspy, affix, tooltips, popovers, modals and the carousel. At the end of this module you need to complete the third assignment.

Exercise (Video): Carousel14:04

講師

Jogesh K. Muppala
Associate Professor

字幕

We just learnt about the carousel component in the previous lecture.

In this exercise, we're going to add in a carousel to our index.html

page and in the process learn how the carousel component works.

Going to index.html page,

we'll add in a new row into the content div,

as the first row in the div.

So I'll go in and say,

give div class row row-content and inside this div,

we're going to create the carousel component.

And in what's div I will add in the inner column div,

which will contain the carousel component here.

To add in the carousel,

here I will add in the div with the ID my carousel and

a class carousel and

slide and the data ride class.

So you can see the JavaScript component coming into action here,

and then close off the div and start building out the carousel inside this div here.

So, into this carousel,

we'll add in the content of the carousel next.

So I'll go in and then add another div with the class

carousel-inner and the role as list box.

This is the way we build up the carousel and then close that div there.

And inside this div again we'll introduce divs that will host

the items of the carousel by applying the carousel item class.

And the first one in the carousel item...

The first one in the carousel class,

I will apply the active class.

So this is the first div which starts out containing

the starting slide there and the remaining ones, I'm going to add in.

Let me add in two more carousel-item divs

here and apply only the first one with the active class.

Now I'm going to introduce in the content into this carousel items.

So to construct a carousel item,

I will go in there and then include an image with the class d-block.

So this is used for,

this is a flex class that allows our image to be properly positioned and then add in

the image fluid class and then the source as img.

So what I will do is to move in that content from

the three content rows below and then add it into the carousel here.

So I add in an image here and then to the carousel,

I can also add in

a div with

the class carousel caption.

In here we can include some text that will be over relayed as a caption onto the image.

So I'll say carousel caption d-none, d-md-block.

And then inside here,

I will include the content from the content rows here.

So I will go in and copy the content from the content rows

here and then paste that into the carousel caption block here.

And I'll remove the class that we applied to the H2 from this content.

Now, we'll repeat the same thing for the remaining two by copying

the content from the content rows below in here.

So, let me complete that and then we'll come back and

take a look at how the carousel looks like.

Here you can see that I have completed

the remaining carousel items here by copying the content from the content rows below.

Let's add in a few CSS classes so that the carousel is nicely structured.

So going to styles.css file at the bottom here,

I'm going to add in a couple of more classes here.

For the carousel class,

I would add the background as 512DA8,

which we have used before the dark colored class.

And then for the carousel-item class,

I'm going to add in a height as 300 pixel.

And for the image that is included inside the carousel item,

I'm going to apply a few transformations here.

I would say, position absolute.

I want to position it to the left.

So this top and left zero will position this image to the top left edge of

the carousel box there and with

a minimum height set to 300 pixel to match the carousel-items height.

So this image will essentially stretch the entire height of

the carousel but will be positioned to the left edge of the carousel box here.

So let me save the changes.

We'll just go and have a look at what this carousel looks like on our web page.

Going to the web page,

you can now see that carousel in action on our index study table page.

So you can see that the carousel is

positioned at the top here and then we'll keep scrolling at regular intervals.

Note how by using the CSS classes,

I have styled the background from the carousel such that the captions are

clearly visible in the carousel

and also how the image has been positioned on the carousel.

The height of this carousel slide is fixed at 300 pixel.

So, this gives a nice clean layout for this carousel.

Now, let's add in a few controls for this carousel.

Going back to index.html.

Right after the carousel in our box here but still inside the carousel,

I'm going to add in an OL to introduce a few manual controls for the carousel.

And with the class carousel-indicators.

These indicators will be positioned on

the carousel slides to indicate which particular slide is currently being shown.

So let me introduce in the content here so I say OL,

I use the OL for this.

And then, inside there I use the list with

the data-target set to my carousel.

So this is the ID of the carousel and data-slide-to.

And the first indicators will slide to slide number zero.

With that class as active for the first item in this list,

then the remaining two items I'm going to simply use list with the data-target

set equal to my carousel

and the data-slide-to is set to one.

So, this is for the second slide there.

I'm just going to copy this one and then create the third indicator indicator in here.

So we'll go in and copy this and then change this to data-slide-to two.

So we have free slides in our carousel so three indicators are sufficient enough.

Now, we'll also add in a couple of controls to

this carousel which allows us to manually scroll the carousel.

To do that, I will introduce an A with

the class carousel-control-prev here.

So this would allow me to go to the previous slide,

make the href equal to mycarousel,

so you can see that we are trying to target the carousel there and the role is a button.

So this is going to act as a button and data-slide as previous.

So within this A,

I will introduce a icon

to represent this control on the screen.

So, I'll say, span class carousel-control-prev-icon

and close off the span here.

I will now copy this control.

And paste it here and then create the control for the next slide here so I would say,

carousel-control-next and roll is a button and the data slide used to

next and the icon would be carousel-control-next icon.

So adding these into my carousel,

let's go and take a look at our carousel at this moment.

Going to the carousel,

you can now see that in my carousel I have three indicator buttons here,

which indicate which particular slide is

currently visible in my carousel and as the slides slide,

then the indicator also correspondingly changes to

indicate which particular slide is visible.

I can manually click on one of them and go to the specific slide in the carousel.

Not only that, you can see that there are now two indicators,

the left and right,

which I can use to again scroll through the carousel by

clicking on these indicators here.

So using these controls,

both the previous and the next control and the the indicators here,

I can navigate to the specific slide in my carousel.

This completes this exercise.

This is a good time for you to do a git-commit with the message carousel.

コース一覧で検討

サインアップは無料です。今すぐサインアップして、パーソナライズされたお勧め、更新、サービスを利用しましょう。

コーセラは、世界トップクラスの教育を世界中に配信しています。最高峰の大学や組織とのパートナーシップに基づくオンラインコースが提供されています。

© 2019 Coursera (株)すべての権利予約します。

App Storeからダウンロード

Google Playで取得

Coursera
このコースについて
リーダーシップ
キャリア
カタログ
修了証
MasterTrack™の修了証
学位
企業用
政府向け

コミュニティ
Learners
Partners
Developers
Beta Testers
Translators

つながる
ブログ
Facebook
LinkedIn
Twitter
Instagram
Youtube
技術ブログ

さらに表示
規約
プライバシー
ヘルプ
アクセシビリティ
報道関係者
お問い合わせ
ディレクトリ
アフィリエイト