1
00:00:00,660 --> 00:00:03,550
Hello and welcome to this lecture.

2
00:00:03,690 --> 00:00:10,830
In this lecture we will be creating a carousel to rotate images.

3
00:00:10,980 --> 00:00:16,110
We'll be doing these Using put straps javascript.

4
00:00:16,110 --> 00:00:21,040
This is the carousel that we will be creating.

5
00:00:21,060 --> 00:00:30,050
He is in the US group from they put strap framework so you can see the images rotate on a timely interval

6
00:00:30,090 --> 00:00:32,690
or you can manually rotate it.

7
00:00:32,790 --> 00:00:37,320
So are going to attempt to create this to begin.

8
00:00:37,320 --> 00:00:44,160
I've got my sample template here with references to my library.

9
00:00:44,470 --> 00:00:53,220
I've got references to books crap library or saw to be a query library hosted by Google and then the

10
00:00:53,220 --> 00:00:57,770
javascript mean five version hosted by Max.

11
00:00:58,800 --> 00:01:08,430
I shall be writing the code for the carousel in between these bawdy tags are write the code then explain

12
00:01:08,430 --> 00:01:17,060
the code I have got my carreau SOL code in here so I just need to explain it.

13
00:01:17,170 --> 00:01:28,230
The pulte Deep near the outermost div Carol the require the use of a D for the carousel controls to

14
00:01:28,230 --> 00:01:29,790
function properly.

15
00:01:29,970 --> 00:01:39,580
So as I've given in this all tidy here I've given it an idea of carrousel it is housed inside a container.

16
00:01:39,930 --> 00:01:45,090
So mozz bootstrap alamo's will need wrapping container.

17
00:01:45,100 --> 00:01:51,530
So I've given the class container which was a wrap carousel and then Heidi here.

18
00:01:51,540 --> 00:01:59,900
This is the alto carousel of giving it an idea of my carousel and a class of Carol's soul slide.

19
00:02:00,120 --> 00:02:03,620
And then also giving it a detached ride of carrots.

20
00:02:04,150 --> 00:02:15,060
Their Class carousels specifies that the dph contains a carousel that dot slide class as a see says

21
00:02:15,140 --> 00:02:23,720
transition and animation effect which makes the item slide when showing a new item.

22
00:02:23,760 --> 00:02:28,320
If you omit this class then you won't see that effect.

23
00:02:28,420 --> 00:02:32,790
The did turn right it was carrousel here.

24
00:02:32,850 --> 00:02:41,340
This attribute tells a bootstrap to begin the animation of the Curre So immediately when the page loads.

25
00:02:41,340 --> 00:02:44,480
That's what this data right does.

26
00:02:44,520 --> 00:02:54,030
These here the indicators indicate tools are tiny little dots at the bottom of each slide which indicates

27
00:02:54,030 --> 00:03:02,420
how many slides there are in the carousel and which slides the visit or is currently viewing the indicator

28
00:03:02,540 --> 00:03:07,030
as specified in an ordered list with class.

29
00:03:07,060 --> 00:03:09,860
Dr. karasyov DASH indicators.

30
00:03:10,020 --> 00:03:16,560
So this is the all order list specified in the order list.

31
00:03:16,860 --> 00:03:29,520
The data slide attribute points to the idea of the carousel the data slide to attribute specifies which

32
00:03:29,520 --> 00:03:31,370
slide to go to.

33
00:03:31,480 --> 00:03:34,800
We click in on the specific dot.

34
00:03:35,400 --> 00:03:40,470
This hero here is the wrapper for the slides.

35
00:03:40,470 --> 00:03:49,470
These slides are specified in a diff with class of thought carousel dashed into the content of each

36
00:03:49,470 --> 00:03:54,710
slide is defined in the DIV with a class of daut items.

37
00:03:54,720 --> 00:03:58,040
This can be a text or images.

38
00:03:58,060 --> 00:04:07,760
The DOT active class did dot active dot captive class needs to be added to one of the slides.

39
00:04:07,890 --> 00:04:11,060
Otherwise the current cell will not be visible.

40
00:04:11,220 --> 00:04:16,540
So the purpose of the active class is to make the slides fit Len.

41
00:04:16,590 --> 00:04:24,930
These are the various images in the same key refers to a light source of the image it's the left and

42
00:04:24,930 --> 00:04:25,790
right controls.

43
00:04:25,810 --> 00:04:34,170
And there was you to go left and right off b carousel using the glove Click on image icon so that allows

44
00:04:34,170 --> 00:04:37,190
you to talk all left or right manually.

45
00:04:37,260 --> 00:04:39,910
So let's see what this guarisco looks like.

46
00:04:40,200 --> 00:04:41,590
So these are the carousel.

47
00:04:41,610 --> 00:04:44,320
There's a carousel in my shoulders loop of dots here.

48
00:04:44,400 --> 00:04:48,600
The indicators to indicate what slides you're on.

49
00:04:48,600 --> 00:04:54,290
You notice there are four indicators which indicate that there are four images on the carousel.

50
00:04:54,420 --> 00:04:56,100
Only tells you your own image.

51
00:04:56,130 --> 00:04:59,690
No thank you so much for your time and lives.

52
00:05:00,150 --> 00:05:00,480
Sure.

53
00:05:00,480 --> 00:05:06,070
We went through how to create a carousel using strap.