1
00:00:00,000 --> 00:00:04,523
[MUSIC]

2
00:00:04,523 --> 00:00:10,934
Many of the Bootstrap's JavaScript-based
components provide us with a mechanism

3
00:00:10,934 --> 00:00:17,070
to control some of the features of these
components by writing JavaScript code,

4
00:00:17,070 --> 00:00:21,510
in particular,
by writing code Using the jQuery syntax.

5
00:00:21,510 --> 00:00:26,181
So we're going to explore this
index exercise by using some

6
00:00:26,181 --> 00:00:30,561
JavaScript-based controls for
our Carousel that we

7
00:00:30,561 --> 00:00:35,537
included in the index.html
page in the previous exercise.

8
00:00:37,171 --> 00:00:42,810
In the previous exercise, we introduced
this Carousel into our index.html page.

9
00:00:42,810 --> 00:00:47,260
What I would like to do in this
exercise is to introduce a couple of

10
00:00:47,260 --> 00:00:50,240
control buttons into this Carousel, and

11
00:00:50,240 --> 00:00:54,920
then use JavaScript to be able
to activate these buttons.

12
00:00:54,920 --> 00:00:57,850
The buttons would be used to pause and

13
00:00:57,850 --> 00:01:03,350
play the sliding action of this Carousel.

14
00:01:03,350 --> 00:01:08,410
So, including the button
in our Carousel here,

15
00:01:08,410 --> 00:01:13,000
we can click a button to stop
the sliding action of the Carousel, and

16
00:01:13,000 --> 00:01:18,070
then we can click another button to resume
the sliding action of the Carousel.

17
00:01:18,070 --> 00:01:21,390
So, that is what we can
explore in this exercise.

18
00:01:22,520 --> 00:01:26,920
To get started on this exercise,
we will go to the index.html page.

19
00:01:26,920 --> 00:01:32,420
And right after the left and
right controls of our Carousel,

20
00:01:32,420 --> 00:01:40,400
I will introduce a div with
the class button group.

21
00:01:40,400 --> 00:01:47,023
So this will enclose a button group of
two buttons here, and then with an ID of,

22
00:01:50,699 --> 00:01:54,224
carouselButton and

23
00:01:54,224 --> 00:01:59,290
close off the div there.

24
00:01:59,290 --> 00:02:03,530
Now, inside this,
I'm going to add in two buttons.

25
00:02:03,530 --> 00:02:12,385
So let me add in one button
with the class btn, btn-danger,

26
00:02:12,385 --> 00:02:16,910
btn-small, and

27
00:02:16,910 --> 00:02:24,030
an id of carousel-pause.

28
00:02:24,030 --> 00:02:30,970
So this is going to act as the pause
button, slows off the button there.

29
00:02:30,970 --> 00:02:36,600
And for this button,
I'm going to introduce

30
00:02:36,600 --> 00:02:41,201
a font as an icon with the class fa fa,

31
00:02:42,923 --> 00:02:49,410
pause, and close off the span.

32
00:02:49,410 --> 00:02:55,790
So this will introduce a pause button
into the group of Carousel buttons.

33
00:02:55,790 --> 00:03:04,450
I'm going to copy this and
paste it again to create another button.

34
00:03:04,450 --> 00:03:09,368
That second button,
I'll call btn btn-danger btn-sm, and

35
00:03:09,368 --> 00:03:12,259
then this would be carousel-play.

36
00:03:13,300 --> 00:03:17,580
And the span class,

37
00:03:17,580 --> 00:03:21,660
the button would be if it play here.

38
00:03:23,940 --> 00:03:27,965
Let's say the changes and go and
take a quick look at it in the webpage.

39
00:03:29,180 --> 00:03:34,850
Taking a look at the buttons as they
exist in our browser, you can see that

40
00:03:34,850 --> 00:03:39,940
these two buttons are now positioned
to the left corner of my Carousel.

41
00:03:40,970 --> 00:03:44,660
I would like to reposition these
buttons to the right edge, so

42
00:03:44,660 --> 00:03:51,700
that it doesn't cause this blue,
empty space underneath the image here.

43
00:03:51,700 --> 00:03:56,410
So let me use a couple of CSS properties
to reposition these buttons to

44
00:03:56,410 --> 00:03:59,230
the right column of the Carousel.

45
00:04:00,760 --> 00:04:04,140
Going to that style start CSS file,

46
00:04:04,140 --> 00:04:08,440
let me introduce some CSS code here.

47
00:04:08,440 --> 00:04:14,166
So for
the element with the ID carouselButtons,

48
00:04:14,166 --> 00:04:18,880
I'm positioning it to the right edge and
bottom, 0 pixel here.

49
00:04:18,880 --> 00:04:22,280
So these two and
then the position is absolute.

50
00:04:22,280 --> 00:04:28,300
So this will position these buttons
to the right corner of my Carousel.

51
00:04:29,710 --> 00:04:34,280
Obviously, just introducing the buttons
into the Carousel will not serve

52
00:04:34,280 --> 00:04:35,420
any purpose.

53
00:04:35,420 --> 00:04:40,330
Now, we're going to take advantage
of the JavaScript controls that

54
00:04:40,330 --> 00:04:46,310
the Carousel provides by writing
a little bit of jQuery code at

55
00:04:46,310 --> 00:04:52,204
the bottom of index.html page to
make these buttons do their work.

56
00:04:52,204 --> 00:04:57,950
We want to be able to pause and
resume the sliding action of my Carousel.

57
00:04:58,970 --> 00:05:06,830
Going to the bottom of the index.html
page, let me introduce some script here.

58
00:05:06,830 --> 00:05:10,980
So this script should contain some

59
00:05:10,980 --> 00:05:15,750
JavaScript code written in jQuery syntax.

60
00:05:15,750 --> 00:05:19,088
So I'm going to say,

61
00:05:19,088 --> 00:05:28,664
$(document).ready(function), And

62
00:05:28,664 --> 00:05:33,814
this function should contain a couple of

63
00:05:33,814 --> 00:05:39,320
functions here to activate the buttons.

64
00:05:39,320 --> 00:05:45,430
So I would say, mycarousel.

65
00:05:45,430 --> 00:05:50,427
This is the ID of the carousel
that we are introduced,

66
00:05:50,427 --> 00:05:53,099
so we would say, carousel,

67
00:05:56,960 --> 00:06:01,804
Interval: 2000.

68
00:06:01,804 --> 00:06:06,720
So what this does is it sets
the sliding interval of the Carousel

69
00:06:06,720 --> 00:06:10,130
to 2000 milliseconds or 2 seconds.

70
00:06:10,130 --> 00:06:12,890
So I'm making it a bit faster for

71
00:06:12,890 --> 00:06:16,330
the sliding action to take
place in the Carousel.

72
00:06:16,330 --> 00:06:20,430
Continue with the jQuery code here.

73
00:06:20,430 --> 00:06:26,835
I'm going to now activate that pause
button, so I will say carousel-pause.

74
00:06:26,835 --> 00:06:31,430
So that's the id I gave to
the pause button there.

75
00:06:31,430 --> 00:06:34,960
So that's the reason for giving the id.

76
00:06:34,960 --> 00:06:38,720
So I want to activate the pause button.

77
00:06:38,720 --> 00:06:40,980
So I say when the user clicks.

78
00:06:40,980 --> 00:06:42,920
So you can see how to read the syntax.

79
00:06:42,920 --> 00:06:47,470
So this says, for
the carousel-pause button,

80
00:06:47,470 --> 00:06:53,510
if a click action is done by the user,
then execute

81
00:06:53,510 --> 00:07:01,000
this particular function that I
specify inside this code here.

82
00:07:01,000 --> 00:07:03,140
What is the function that I want to do?

83
00:07:03,140 --> 00:07:05,324
I want to be able to,

84
00:07:09,144 --> 00:07:15,200
Pause the Carousel.

85
00:07:15,200 --> 00:07:20,665
So we would say, carousel('pause').

86
00:07:21,860 --> 00:07:29,884
So now you see how you have
used the jQuery-based controls.

87
00:07:29,884 --> 00:07:36,020
The JavaScript controls that are given for
the Bootstrap Carousel component and

88
00:07:36,020 --> 00:07:41,611
written some code to be able
to control the Carousel.

89
00:07:41,611 --> 00:07:46,060
Similarly, I want to be able
to activate the play button.

90
00:07:46,060 --> 00:07:48,410
So when the play button is clicked,

91
00:07:48,410 --> 00:07:52,380
I want the sliding action
of the Carousel to resume.

92
00:07:52,380 --> 00:07:56,950
So I'm going to simply copy this code,
paste it there.

93
00:07:56,950 --> 00:08:00,720
And then I would say carousel-play,

94
00:08:00,720 --> 00:08:07,130
click function my carousel and
then the function says carousel('cycle').

95
00:08:07,130 --> 00:08:12,477
That's the way you
specify that the Carousel

96
00:08:12,477 --> 00:08:16,850
should resume sliding like before.

97
00:08:16,850 --> 00:08:21,620
So this one, this function we
are attaching to the play button here.

98
00:08:21,620 --> 00:08:23,380
So with this two,

99
00:08:23,380 --> 00:08:28,800
our function's introduced inside
this document ready function.

100
00:08:28,800 --> 00:08:33,870
You're all set for
the Carousel to be activated,

101
00:08:33,870 --> 00:08:38,690
and the two buttons to be able to control
the behavior of our the Carousel.

102
00:08:38,690 --> 00:08:43,240
So let's show the changes, and go and have
a look at the behavior of our Carousel.

103
00:08:44,570 --> 00:08:50,084
Going to our page, you now see that
your Carousel is moving very fast,

104
00:08:50,084 --> 00:08:55,603
because I set the interval to
2,000 milliseconds or 2 seconds.

105
00:08:55,603 --> 00:08:59,640
So every two seconds, you will see
the sliding action of the Carousel.

106
00:08:59,640 --> 00:09:01,380
This is definitely annoying.

107
00:09:01,380 --> 00:09:05,410
So let me pause that by
clicking on the pause button.

108
00:09:05,410 --> 00:09:11,080
So when you click on the pause button,
your Carousel's sliding action is paused.

109
00:09:11,080 --> 00:09:15,080
Because when you click on the pause
button, then the function that we

110
00:09:16,820 --> 00:09:21,360
introduced in the JavaScript
code comes into action and

111
00:09:21,360 --> 00:09:24,520
then pauses the movement of the Carousel.

112
00:09:24,520 --> 00:09:28,354
Now, if you want to resume,
the click on the play button and

113
00:09:28,354 --> 00:09:31,980
then the Carousel should
resume its motion.

114
00:09:31,980 --> 00:09:37,044
So as you can see, the moment you click on
a play button, the carousel starts moving.

115
00:09:37,044 --> 00:09:43,125
Now, of course, you can improve more upon
how you create these buttons and so on,

116
00:09:43,125 --> 00:09:48,350
but this is a simple way that we can
introduce to control our Carousel.

117
00:09:50,110 --> 00:09:55,400
This exercise illustrates to you
how we can use JavaScript code

118
00:09:55,400 --> 00:10:00,650
to be able to control our
Bootstrap JavaScript-based components.

119
00:10:00,650 --> 00:10:03,933
This is a good time to do a comment of

120
00:10:03,933 --> 00:10:08,365
your code with the message
Bootstrap jQuery.

121
00:10:08,365 --> 00:10:14,422
[MUSIC]