1 00:00:04,100 --> 00:00:06,680 Hello everyone and welcome back to our bootstrap course. 2 00:00:06,680 --> 00:00:11,720 In this lecture we're going to be adding arrows to our carousel as well as displaying it and giving 3 00:00:11,720 --> 00:00:12,690 it a height. 4 00:00:12,950 --> 00:00:14,270 So that way we will see it. 5 00:00:14,270 --> 00:00:18,680 So let's go ahead and begin that we are going to set up arrows first. 6 00:00:18,680 --> 00:00:24,230 This will allow the user to click through the carousel but the carousel will move on its own as well. 7 00:00:24,290 --> 00:00:31,200 So let's open an anchor class and we're going to call this carousel control previous. 8 00:00:31,370 --> 00:00:36,300 That means this will create an icon inside of it. 9 00:00:36,710 --> 00:00:41,750 And this will control it to move to the previous item and to set the reference. 10 00:00:41,750 --> 00:00:49,060 And in this case it'll be the idea of the carousel itself which is featured products carousel as well. 11 00:00:49,070 --> 00:00:57,440 We need to set the rule of this anchor which is a button and read to set the data to Slide 2 and that 12 00:00:57,440 --> 00:01:02,920 will be previous to the previous data is what we're going to slide to. 13 00:01:02,930 --> 00:01:05,360 Let's go ahead and close that anchor tag immediately. 14 00:01:05,360 --> 00:01:06,550 That way we don't forget to. 15 00:01:06,940 --> 00:01:08,380 It's common to forget to close them. 16 00:01:08,390 --> 00:01:11,710 If your I.D. does not close them on your own. 17 00:01:12,440 --> 00:01:12,680 OK. 18 00:01:12,680 --> 00:01:14,050 Next let's actually make the icon. 19 00:01:14,090 --> 00:01:18,350 So we're going to make a span class and we're going to use bootstraps. 20 00:01:18,410 --> 00:01:20,420 Class known as carousel control. 21 00:01:20,450 --> 00:01:26,230 Previous icon and this will make an icon on the screen. 22 00:01:26,240 --> 00:01:30,770 We're going to set it's already hidden to be true. 23 00:01:30,770 --> 00:01:35,180 And then let's close this span tag. 24 00:01:35,180 --> 00:01:45,140 Now we're going to set the text of this icon and this is going to be a span class S.R. only and it's 25 00:01:45,140 --> 00:01:49,190 going to be with the text previous. 26 00:01:49,190 --> 00:01:51,370 That is everything for that icon. 27 00:01:51,380 --> 00:01:58,070 We're going to follow the exact same format to make the icons for the next button and you'll see all 28 00:01:58,070 --> 00:01:59,810 this when we test it in the output. 29 00:02:00,030 --> 00:02:07,040 Within a class we're not using Bootstrap class carousel control next and it's going to reference or 30 00:02:07,040 --> 00:02:11,690 link to the featured Prague's carousel at a specific item. 31 00:02:11,690 --> 00:02:17,300 The role of this anchor is to be a button and it's going to slide to the data in the carousel. 32 00:02:17,360 --> 00:02:18,920 That is next. 33 00:02:18,920 --> 00:02:21,140 So the next item in the carousel. 34 00:02:21,470 --> 00:02:23,660 That is why we numbered each item in the carousel. 35 00:02:24,590 --> 00:02:28,640 And we can close that anchor tag immediately and inside again I'm going to follow the same structure 36 00:02:28,640 --> 00:02:29,970 to add an icon. 37 00:02:30,180 --> 00:02:33,630 And of course carousel control next icon. 38 00:02:33,720 --> 00:02:39,500 We're going to set it to hidden as well initially. 39 00:02:39,500 --> 00:02:39,740 All right. 40 00:02:39,770 --> 00:02:41,310 Hidden equals true. 41 00:02:41,450 --> 00:02:47,920 And let's go ahead and close that span tag and let's actually add text for our button as well. 42 00:02:48,260 --> 00:02:54,120 And we're going to call it a star only again and make it next. 43 00:02:54,180 --> 00:02:55,670 Let's go ahead and look at the output. 44 00:02:55,670 --> 00:03:00,770 Now we don't have anything in the output except the indicators because we have to set the height of 45 00:03:00,800 --> 00:03:02,660 each item in the carousel. 46 00:03:02,660 --> 00:03:05,120 If we don't set the height then nothing will appear. 47 00:03:05,120 --> 00:03:09,650 Because right now we just have blocks if you put in an image then it would appear. 48 00:03:09,710 --> 00:03:13,610 However the image would not be sized it would just be its default size. 49 00:03:13,610 --> 00:03:15,410 So you'd have to resize the image as well. 50 00:03:15,850 --> 00:03:17,520 So let's go ahead and do that right now. 51 00:03:17,720 --> 00:03:23,480 How we're going to do that is by using the class that we assigned to each carousel item we assigned 52 00:03:23,510 --> 00:03:26,830 the item carousel item to each of the items. 53 00:03:27,260 --> 00:03:29,260 Let's go ahead and set its height contests. 54 00:03:29,260 --> 00:03:37,670 Different types of heights can try height 100 percent to begin and we can also use the featured products 55 00:03:37,670 --> 00:03:43,300 carousel idea and we have to set its height as well to where it is with rather 200 percent. 56 00:03:43,470 --> 00:03:44,840 Well set its margin to zero. 57 00:03:44,840 --> 00:03:50,360 Auto that we will ensure that we have no margins on the sides which can appear when you create the default 58 00:03:50,390 --> 00:03:51,590 carousel with bootstrap. 59 00:03:52,550 --> 00:03:56,120 So height of hundred percent means this item will be a hundred percent of its parent. 60 00:03:57,350 --> 00:04:02,100 Often you have to test different heights for responsively so 100 percent in the workbook. 61 00:04:02,180 --> 00:04:04,400 Try something like 10 Ram. 62 00:04:04,400 --> 00:04:11,860 Ram is another way of adding Heights and it means it is in relation to the text size. 63 00:04:11,960 --> 00:04:18,650 RAM is more useful for responsively because as the text size decreases on a smaller screen so will the 64 00:04:18,650 --> 00:04:24,990 item height also try something like 10 V H it's quite small. 65 00:04:25,020 --> 00:04:28,690 One hundred VH under VH looks not bad. 66 00:04:28,700 --> 00:04:34,060 See this is where the H comes in handy when you cannot use a hundred percent excuse me h. 67 00:04:34,070 --> 00:04:36,170 So it was usually H for now. 68 00:04:36,170 --> 00:04:38,120 This means it will be a hundred percent of the viewport height. 69 00:04:38,630 --> 00:04:41,450 Let's go ahead and hide everything but the output and see what we have so far. 70 00:04:41,450 --> 00:04:45,510 We have our fixed navigation and we have our overview of the company. 71 00:04:45,650 --> 00:04:50,960 And when we click on feature we go to our carousel here which contains a carousel with these arrows 72 00:04:50,960 --> 00:04:55,310 here and it contains a product with a button. 73 00:04:55,310 --> 00:04:58,400 Right now each button will take you back home. 74 00:04:58,600 --> 00:05:03,860 You can change later to bring it to services or somewhere else on the PJ OK. 75 00:05:03,900 --> 00:05:04,260 Great. 76 00:05:04,260 --> 00:05:07,890 That is everything that we need to display the carousel. 77 00:05:07,890 --> 00:05:12,530 And to add some arrows to it now in the next lecture we're gonna be adding more content. 78 00:05:12,540 --> 00:05:15,360 We're gonna be adding a page for each service. 79 00:05:15,420 --> 00:05:20,420 That way the carousel can link to each of the products or services. 80 00:05:20,610 --> 00:05:23,750 And we're gonna fill in more detail about each product. 81 00:05:24,240 --> 00:05:30,960 And this will be one page each and they're going to allow the user to scroll through the page for some 82 00:05:31,650 --> 00:05:33,930 extra information about the company's products. 83 00:05:33,930 --> 00:05:37,170 We're gonna be doing that in the next lecture but that's everything for this lecture. 84 00:05:37,170 --> 00:05:39,430 Congratulations on finishing off the carousel. 85 00:05:39,450 --> 00:05:41,540 I challenge you to go ahead and add more into it. 86 00:05:41,580 --> 00:05:46,260 If you would like at this stage such as an image or a video other than that we will see you in the next 87 00:05:46,260 --> 00:05:46,840 lecture. 88 00:05:46,870 --> 00:05:47,610 I think through watching.