1
00:00:00,980 --> 00:00:07,430
Hello, in this video, I am going to cover how to implement a cat whistle, so if we go to the official

2
00:00:07,430 --> 00:00:14,720
Bistrot website and carrousel something along these lines where you have essentially a bunch of SLIDIN

3
00:00:15,050 --> 00:00:19,940
images and you cannot text, you can add a bunch of different things inside of it.

4
00:00:20,360 --> 00:00:23,960
OK, so let's get right to it.

5
00:00:23,960 --> 00:00:29,810
To you ideally want it within the container row column, technically CADAVID.

6
00:00:29,810 --> 00:00:36,470
So we just, you know, looks really good when it's breaking down with the bistrot breakpoints.

7
00:00:37,160 --> 00:00:40,520
So that's what I do already.

8
00:00:40,940 --> 00:00:43,400
Epicloud So we can call it whatever you want.

9
00:00:43,640 --> 00:00:44,980
Who's calling the epic carrousel.

10
00:00:44,990 --> 00:00:51,040
We will need this to refer to it later on within the carousel for stuff like these buttons, for example.

11
00:00:51,250 --> 00:00:53,390
So technically you can put them somewhere else.

12
00:00:53,750 --> 00:01:07,550
OK, so we also allow OK, so it's going to be slowing down the data that Schreuder attribute and this

13
00:01:07,640 --> 00:01:09,650
can just be so.

14
00:01:11,630 --> 00:01:23,260
OK, so first of all, we want to put a ordered list and in here we're going to have the list out and

15
00:01:23,270 --> 00:01:30,140
basically the number of slides that we'll have and this is essentially the buttons you can think of

16
00:01:30,140 --> 00:01:31,630
it like is.

17
00:01:33,850 --> 00:01:40,480
No, the right you don't have to have them, it's all not I'm going to put a link to this in the description,

18
00:01:40,810 --> 00:01:42,100
so feel free to check it out.

19
00:01:42,820 --> 00:01:48,740
All the different features available, whether it's Crossfade, for example, JavaScript, for example,

20
00:01:48,750 --> 00:01:50,470
whatever it is, feel free to have a look at it.

21
00:01:50,920 --> 00:01:57,900
But I am going to add the data because look cool and they're good to navigate through.

22
00:01:58,440 --> 00:02:00,860
I need a class called Carousel.

23
00:02:00,880 --> 00:02:04,330
So in the creative.

24
00:02:06,330 --> 00:02:14,870
And another mystery item and this data that's all yet of.

25
00:02:16,780 --> 00:02:26,650
And perhaps and then decided that so if you change it here, sure here and anywhere else that we use

26
00:02:26,650 --> 00:02:26,800
it.

27
00:02:27,160 --> 00:02:29,440
Well, I dated dash

28
00:02:32,080 --> 00:02:37,130
dash to E cause I just pardon them, but the first one is zero.

29
00:02:37,180 --> 00:02:41,100
The incremented by one zero, one, two, three, four, etc..

30
00:02:41,100 --> 00:02:47,560
I'm going to for a class of active because this is the first one that will be active.

31
00:02:48,100 --> 00:02:53,360
If you want the second one to be active by default or the third one on the fourth one, you feel free

32
00:02:53,400 --> 00:02:54,670
to activate that.

33
00:02:55,030 --> 00:02:57,070
We don't need the active class anymore.

34
00:02:59,260 --> 00:03:07,030
Do we really need that for whichever one was initially active and we don't need anything inside of the

35
00:03:07,180 --> 00:03:07,810
system?

36
00:03:08,170 --> 00:03:13,180
So next, what we're going to do is create this.

37
00:03:13,490 --> 00:03:17,470
And this is going to have a class of.

38
00:03:21,860 --> 00:03:24,140
So does Ginna.

39
00:03:26,130 --> 00:03:27,150
And

40
00:03:29,390 --> 00:03:38,720
basically, when you go back to this is the main actual sliding items are going to be placed.

41
00:03:39,210 --> 00:03:44,980
So, you know, inside of here you have another dip.

42
00:03:45,290 --> 00:03:49,450
And each one of these is the council item, which is on the slide.

43
00:03:49,790 --> 00:04:02,660
So it's a class the item and you just active again only for the first one or whichever button is too

44
00:04:02,660 --> 00:04:02,960
active.

45
00:04:02,970 --> 00:04:09,500
So if you have this one, which is technically the second one, you would put this as active and then

46
00:04:09,500 --> 00:04:12,860
you put the next the second item of activity.

47
00:04:13,260 --> 00:04:20,670
Also, notice I made a little mistake here and will be zero one, two, three, four.

48
00:04:20,670 --> 00:04:21,650
I did actually mention that.

49
00:04:21,650 --> 00:04:23,720
I just forgot to put it in.

50
00:04:24,740 --> 00:04:32,470
OK, so next, you know, here is where you can put whatever you want, I imagine work really well in

51
00:04:32,480 --> 00:04:34,730
a council and you can just have an image.

52
00:04:34,820 --> 00:04:36,840
But we're going to have some text as well.

53
00:04:37,010 --> 00:04:39,350
Again, feel free to check out the bootstrap website.

54
00:04:39,500 --> 00:04:45,270
They have a bunch of different variations and feel free to experiment yourself.

55
00:04:45,290 --> 00:04:52,160
You can use pretty much whatever e-mail element that you want and make it your own carousel.

56
00:04:52,490 --> 00:04:56,600
OK, so I am so sorry for what you want.

57
00:04:56,900 --> 00:04:59,740
I've got a bunch of nice images that are find on Google.

58
00:04:59,960 --> 00:05:03,090
They are all the same resolution and ratio.

59
00:05:03,260 --> 00:05:06,770
It helps if they more importantly are the same ratio.

60
00:05:06,980 --> 00:05:13,100
So this is a 16 by nine ratio and the resolution is 19, 20 by 10 at the top.

61
00:05:13,250 --> 00:05:15,890
It just doesn't look very good as an extra task.

62
00:05:15,920 --> 00:05:21,590
I recommend that you change one of the images because the source code is available and get exactly what

63
00:05:21,590 --> 00:05:28,340
I'm doing or recommend they change one of the images to something other known like anything that's not

64
00:05:28,340 --> 00:05:29,270
16 by nine.

65
00:05:29,270 --> 00:05:29,930
And you'll see what.

66
00:05:31,450 --> 00:05:42,030
OK, so have a class and it's going to be dash, blah, blah element, and I'm going to add to the blue

67
00:05:42,040 --> 00:05:44,760
dash one hundred, so it's going to have a whiff of one percent.

68
00:05:44,780 --> 00:05:50,800
So this just basically means it's going to show all of the image you may not be displaying yet the full

69
00:05:50,800 --> 00:05:58,960
resolution, but it works better with the grid system and the low grade error because we closed off

70
00:05:58,960 --> 00:06:00,130
the tag.

71
00:06:00,430 --> 00:06:12,640
Next we're going to do is put our div and this is going to be a class of carrousel dash caption.

72
00:06:15,220 --> 00:06:16,540
D, That's not.

73
00:06:17,700 --> 00:06:20,620
And the dash and the dash.

74
00:06:21,190 --> 00:06:24,720
OK, so I'll explain what that does in a second.

75
00:06:24,750 --> 00:06:33,240
First of all, I just literally want to put it all together now and none of this slide so you can think

76
00:06:33,240 --> 00:06:34,330
of this as the title.

77
00:06:34,620 --> 00:06:35,940
Feel free to put what you want.

78
00:06:35,940 --> 00:06:37,820
And I'm going to put a paragraph tag in there.

79
00:06:38,070 --> 00:06:41,370
You could put a bit more information here and keep it simple.

80
00:06:41,460 --> 00:06:47,130
Put an image one, but, you know, feel free to put some more descriptive information in there again.

81
00:06:47,250 --> 00:06:51,540
Feel free to structure the inside of the council caption however you want.

82
00:06:51,750 --> 00:06:53,760
So what do these to do?

83
00:06:55,140 --> 00:07:02,400
It displays it none, which means it doesn't display it at all unless it is on a medium screen size

84
00:07:02,400 --> 00:07:08,170
or above some medium, large, extra large or extra large, it will be block level element, which it's

85
00:07:08,220 --> 00:07:10,920
going to display if it's less than medium.

86
00:07:11,100 --> 00:07:18,930
The breakpoint so small or small, just because the carousel gets a little too small, having text on

87
00:07:18,930 --> 00:07:25,260
there can really obstruct the image when it's big, the text and the take up that much relative to the

88
00:07:25,260 --> 00:07:25,800
image.

89
00:07:25,800 --> 00:07:29,540
When it's small, you can take a half or even more than the image.

90
00:07:29,700 --> 00:07:32,580
So you want to generally just get rid of that.

91
00:07:32,830 --> 00:07:34,920
And that's one item done instead of, you know.

92
00:07:35,980 --> 00:07:36,500
You know.

93
00:07:37,750 --> 00:07:40,480
Top hat, again, was just copy and paste this.

94
00:07:42,490 --> 00:07:53,400
So I did a couple of changes tonight, we're going to say Samoyed, and that is to say they exploited

95
00:07:53,670 --> 00:07:58,350
and can be traced and we need to change the source files.

96
00:07:59,030 --> 00:08:03,090
You could have the same one, but I think it looks better to sit them.

97
00:08:03,360 --> 00:08:07,110
And so if you just heard a little horrible sound, that's what it was.

98
00:08:08,190 --> 00:08:10,330
And if we go back.

99
00:08:12,010 --> 00:08:12,580
This.

100
00:08:13,490 --> 00:08:15,600
Again, feel free to use whatever you want.

101
00:08:15,620 --> 00:08:25,360
Probably some context or to whatever website or web content to let go and OK, so let me know.

102
00:08:27,170 --> 00:08:29,760
So what we want to do is.

103
00:08:31,730 --> 00:08:35,510
Actually, let's see what we get, so we get this.

104
00:08:36,410 --> 00:08:37,400
Inspect.

105
00:08:39,100 --> 00:08:40,330
The consulate was.

106
00:08:41,070 --> 00:08:44,330
And we got the first slide blow a law.

107
00:08:45,360 --> 00:08:47,850
OK, so I'm probably watching.

108
00:08:49,480 --> 00:08:50,080
The.

109
00:08:53,100 --> 00:08:58,110
That's why because, again, we've got to move active on all those of the two, so.

110
00:08:59,090 --> 00:09:05,900
And that works great, and as you can see, it breaks down and when you get to medium or less, I mean

111
00:09:06,050 --> 00:09:06,950
less the medium.

112
00:09:07,220 --> 00:09:09,710
The caption is no longer displayed.

113
00:09:09,920 --> 00:09:14,390
But now that's the key and the backwards and forward button as well.

114
00:09:14,590 --> 00:09:16,340
Again, these buttons are optional.

115
00:09:16,350 --> 00:09:20,300
You do not have to add them if you do not want to.

116
00:09:20,900 --> 00:09:23,660
But again, I think you just add to the.

117
00:09:28,650 --> 00:09:35,190
The navigability know even a word navigability the ease of navigation.

118
00:09:36,300 --> 00:09:44,360
So we need an anchor and I have a class of callosal that's control dush red.

119
00:09:44,460 --> 00:09:46,890
So this is the previous controls of this world.

120
00:09:46,900 --> 00:09:47,500
Move it.

121
00:09:47,730 --> 00:09:50,330
No one slide left or one side backwards.

122
00:09:50,670 --> 00:09:51,920
Another ref.

123
00:09:53,650 --> 00:10:00,000
The ref is literally going to be this right here.

124
00:10:00,160 --> 00:10:02,940
So, again, we are using that all day.

125
00:10:03,790 --> 00:10:08,980
Next is going to have a roll on the button.

126
00:10:09,530 --> 00:10:19,240
And when our data does, Lloyd, and you just press the previous.

127
00:10:23,160 --> 00:10:30,290
And in here, we're going to have a company on Span's, and the first one is.

128
00:10:32,330 --> 00:10:34,430
He's going to have a class.

129
00:10:35,590 --> 00:10:44,560
Of council, dash controlled dash, grab, dash, all you can see, we just showed the previous icon,

130
00:10:44,560 --> 00:10:50,050
which is an arrow pointing left again, you can put whatever you want to.

131
00:10:50,730 --> 00:10:55,630
You know that that's just say my chicken is ready to flip is fine.

132
00:10:55,630 --> 00:10:57,980
I'll just do it a little less on the other side.

133
00:10:58,270 --> 00:10:58,930
No biggie.

134
00:10:59,000 --> 00:11:04,650
B.B. King wanted to tell you that slice roughly 10 to nine.

135
00:11:05,300 --> 00:11:05,810
OK.

136
00:11:05,830 --> 00:11:08,680
Previously called area

137
00:11:11,110 --> 00:11:11,490
dash.

138
00:11:11,920 --> 00:11:14,140
It then equals.

139
00:11:15,680 --> 00:11:19,420
And that's not going to have anything to focus upon itself.

140
00:11:23,400 --> 00:11:30,780
Another class of that's all August only for this full screen readers, but it's good to put that in

141
00:11:30,780 --> 00:11:30,960
there.

142
00:11:30,970 --> 00:11:34,140
So it is great that Bouchra provide all of this builtin.

143
00:11:34,470 --> 00:11:41,480
We can copy and paste this because as you can imagine, the next button is very similar.

144
00:11:42,400 --> 00:11:49,110
Just the next class, we still referring to a precursor, the Super Bowl next.

145
00:11:49,110 --> 00:11:53,400
And this is the next.

146
00:11:55,440 --> 00:12:00,590
The screen media will save next person that should be all ready to go refresh.

147
00:12:00,750 --> 00:12:01,440
There we go.

148
00:12:02,040 --> 00:12:05,010
We can move backwards and forwards.

149
00:12:05,220 --> 00:12:06,010
So that is it.

150
00:12:06,030 --> 00:12:09,500
That is how easy it is to implement a carousel.

151
00:12:09,810 --> 00:12:12,870
Feel free to check out the source code on the video page.

152
00:12:13,080 --> 00:12:16,980
If you want to have a quick look at it, recommendations, you can follow along.

153
00:12:16,980 --> 00:12:18,870
We'll help you a lot more.

154
00:12:19,200 --> 00:12:22,080
And I will provide a link to the description.

155
00:12:22,420 --> 00:12:24,970
A lot more information on here, what to do.

156
00:12:25,350 --> 00:12:26,640
Most want to know one thing.

157
00:12:27,390 --> 00:12:30,780
If you go to here and you copy and paste all of this code.

158
00:12:31,630 --> 00:12:37,510
It won't work or you'll look like it's not working this because look here, there's no source for the

159
00:12:37,510 --> 00:12:45,080
images from the first time I did it in two or three and I would be suffering and copy and paste sounds

160
00:12:45,100 --> 00:12:50,350
like why isn't it showing up like this is because these are.

161
00:12:51,710 --> 00:12:59,900
Actual images and those images aren't met here somewhere, but those images aren't here, so just make

162
00:12:59,900 --> 00:13:01,070
sure you do put some images.

163
00:13:01,230 --> 00:13:06,250
Otherwise it just won't look like the lie that if you have any questions, feel free to put me on message.

164
00:13:06,260 --> 00:13:09,770
And I look forward to seeing you in the next video.