1 00:00:00,570 --> 00:00:07,420 In this lesson we'll be creating a bootstrap carousel the carousel is a plugin that cycles through HMO 2 00:00:07,450 --> 00:00:08,850 elements. 3 00:00:09,150 --> 00:00:13,300 It is typically used for slide shows as seen in this example. 4 00:00:13,440 --> 00:00:21,180 We have a series of car pictures each car picture is displayed one at a time before automatically transitioning 5 00:00:21,240 --> 00:00:23,320 to the next picture. 6 00:00:23,340 --> 00:00:26,830 Each picture also has a title and a description. 7 00:00:27,360 --> 00:00:32,670 We can manually cycle through the images by clicking the left or right links 8 00:00:36,940 --> 00:00:39,010 or by clicking the carousel indicators 9 00:00:44,380 --> 00:00:45,640 to make a carousel. 10 00:00:45,640 --> 00:00:48,430 We first start with a do and give the divine. 11 00:00:49,390 --> 00:00:55,370 We have given the I.D. We have given this div the I.D. carousel. 12 00:00:55,390 --> 00:01:01,950 This is important and will be used later on for the carousel controls so although we've named the I.D. 13 00:01:01,950 --> 00:01:04,510 care so you can call it whatever you like. 14 00:01:05,440 --> 00:01:14,500 Set the div class to Carousel and slide also create a data right attribute and set it to Carousel 15 00:01:17,560 --> 00:01:24,550 The Carousel class specifies that the div contains a carousel the data right attribute will make it 16 00:01:24,550 --> 00:01:28,120 so the images start cycling as soon as the page loads 17 00:01:31,640 --> 00:01:37,850 next create an ordered list element and set the class to Carousel indicators 18 00:01:41,490 --> 00:01:48,960 the carousel indicators are the small circle icons that indicate how many slides there are they also 19 00:01:48,960 --> 00:01:56,580 allow users to manually toggle through the slides and provide an indication as to the active slide so 20 00:01:56,580 --> 00:02:06,510 we can see here that as the images switch from one to another the carousel indicator also changes it 21 00:02:06,580 --> 00:02:09,460 becomes highlighted based on the active carousel 22 00:02:13,500 --> 00:02:21,090 we need to create for list items because we have four images each list item needs to have a data target 23 00:02:21,120 --> 00:02:30,640 attribute set to Carousel notice that the value of this attribute points to the I.D. of our carousel 24 00:02:30,670 --> 00:02:31,000 div 25 00:02:33,790 --> 00:02:39,150 so here this this matches the data target matches our I.D.. 26 00:02:40,770 --> 00:02:49,450 For the main carousel div now each item also needs to have a data slide to attribute the value of this 27 00:02:49,450 --> 00:03:00,100 attribute will define which slide to go to when that indicator is clicked so the first item will be 28 00:03:00,310 --> 00:03:07,520 would go to Slide 0 the next slide 1 2 and 3. 29 00:03:07,530 --> 00:03:10,070 So the numbering system does start from zero. 30 00:03:11,580 --> 00:03:16,250 So slide one is actually zero and then 1 2 and 3. 31 00:03:17,640 --> 00:03:24,160 We've created a class in and set it to active. 32 00:03:24,350 --> 00:03:26,670 Now this is on the second item and I'm just going to. 33 00:03:26,950 --> 00:03:29,610 Cut that out and paste it onto the first item. 34 00:03:34,970 --> 00:03:39,420 So this will highlight the first indicator because that's where the slide show starts. 35 00:03:39,650 --> 00:03:46,190 So you can see that when I refresh the page and you can see that the first indicator is active on page 36 00:03:46,280 --> 00:03:46,850 refresh. 37 00:03:54,470 --> 00:04:01,090 So after ordered list we have a wrapper for the slides after ordered list. 38 00:04:01,100 --> 00:04:07,080 We create a wrapper for the slides created give and set the class to Carousel. 39 00:04:07,110 --> 00:04:16,900 Inner create a rule attribute and set it to list box. 40 00:04:16,910 --> 00:04:23,240 Now we can start creating the divs that will contain the images or content of this slideshow 41 00:04:26,200 --> 00:04:31,570 created div insert 2 classes item an active next. 42 00:04:31,570 --> 00:04:37,060 Create an image element and set this source to the location of your first image. 43 00:04:37,070 --> 00:04:43,310 Make sure that the images images are contained in the same directory or a sub directory relative to 44 00:04:43,310 --> 00:04:49,420 the location of your HMO file also specify the width and height of the image 45 00:04:52,160 --> 00:05:01,000 create another div inset the class to care so caption Now create a heading for the title in a paragraph 46 00:05:01,000 --> 00:05:05,390 or the description nested within the careful caption div 47 00:05:08,920 --> 00:05:09,850 and that's it. 48 00:05:09,850 --> 00:05:14,410 So what we can do now is we can copy and paste this entire block of code 49 00:05:17,410 --> 00:05:24,200 to create the other slideshow content so here we have four images. 50 00:05:24,200 --> 00:05:25,100 So each one 51 00:05:29,000 --> 00:05:31,760 you can see is is more or less the same. 52 00:05:31,760 --> 00:05:33,370 The code is almost identical. 53 00:05:35,380 --> 00:05:43,720 All you have to change is the source of the image and the heading in description for each slide is also 54 00:05:43,720 --> 00:05:44,110 different. 55 00:05:46,150 --> 00:05:51,960 Also keep in mind that you only need to set the active class on one of the slides. 56 00:05:52,240 --> 00:06:00,670 So that'll be the slide that is active when the page initially loads so one two three and four items 57 00:06:01,270 --> 00:06:02,580 you can have as many as you like. 58 00:06:06,420 --> 00:06:11,550 Once complete we can go ahead and create our left and right control links. 59 00:06:11,790 --> 00:06:16,530 Start with an eight element and set the class to left carousel. 60 00:06:17,040 --> 00:06:17,600 Control 61 00:06:20,460 --> 00:06:28,030 create an h r you f attribute and set it to the I.D. of the main carousel div so remember we called 62 00:06:28,030 --> 00:06:28,710 it carousel 63 00:06:31,280 --> 00:06:42,820 create a rule attribute and set it to button and a data slide attribute and set it to previous priority. 64 00:06:48,990 --> 00:06:50,820 Now to create the arrow icon. 65 00:06:50,880 --> 00:06:57,270 Create a span and set the class to graphic on Glivec on Chevron left. 66 00:06:57,490 --> 00:07:01,320 And that's what's gonna give us this this little icon here. 67 00:07:04,200 --> 00:07:07,000 And create an area hit an attribute and set it to true 68 00:07:11,680 --> 00:07:19,580 now for the second for the right side arrow you can basically copy and paste this block of code all 69 00:07:19,580 --> 00:07:31,080 you have to change is instead of a left class set it to write instead of previous set it to next for 70 00:07:31,080 --> 00:07:32,340 the data slide attribute 71 00:07:35,050 --> 00:07:41,530 change graphic on Chevron left to ballistic on Chevron write and that's it. 72 00:07:43,780 --> 00:07:50,360 Now there's just one more thing to do before we can test this in your browser. 73 00:07:50,420 --> 00:07:56,470 We're gonna have to scroll up to the head tag and you're going to create a style sheet and add the following 74 00:07:56,470 --> 00:07:56,860 rule 75 00:08:01,170 --> 00:08:01,630 here. 76 00:08:01,650 --> 00:08:09,430 The width definition will make it so that the carousel content occupies 80 percent of the carousel the 77 00:08:09,430 --> 00:08:20,640 margin auto will center the content so we would increase with to 100 then we would have no margin on 78 00:08:20,640 --> 00:08:23,540 the left and right side. 79 00:08:23,680 --> 00:08:24,890 You can see it still works. 80 00:08:24,910 --> 00:08:29,080 You still see our arrows but there's no spacing 81 00:08:32,660 --> 00:08:35,960 and you can set the value from anywhere from zero to 100 percent. 82 00:08:40,010 --> 00:08:40,460 And that's it. 83 00:08:40,490 --> 00:08:46,960 You can now save your file and preview it in your web browser and your carousel should be working. 84 00:08:47,780 --> 00:08:55,070 The carousel is responsive so if you if we would expand the size of our web browser the carousel expands 85 00:08:55,130 --> 00:09:02,570 the size of our container and in this case we're using a fixed with container so if we were to use a 86 00:09:02,570 --> 00:09:03,530 fluid container 87 00:09:07,350 --> 00:09:12,870 it experienced the full size of the screen. 88 00:09:12,910 --> 00:09:15,280 The same is true if we shrink the browser 89 00:09:18,530 --> 00:09:20,330 again you can see it's fully responsive.