WEBVTT 00:00:06.510 --> 00:00:15.210 It this video we get to learn how to use bootstrap to create a slider with Bruce Tropp we can create 00:00:15.450 --> 00:00:21.570 responsive sliders and we can include any ASML content in them. 00:00:21.570 --> 00:00:26.390 So we're going to create a slider just like the one we see on the screen. 00:00:26.790 --> 00:00:34.820 So we're going to have three slides and each slide is going to consist of a picture with some text. 00:00:35.200 --> 00:00:35.950 OK. 00:00:36.180 --> 00:00:38.450 So let's go ahead and create this. 00:00:39.030 --> 00:00:48.080 So first of all we need to create a div of class carrousel and slide. 00:00:48.570 --> 00:00:57.690 OK you can give our different ID of my Carrousel. 00:00:59.760 --> 00:01:09.700 And also we need a data attributes is going to be data right which will set to Carrousel. 00:01:11.050 --> 00:01:11.920 OK. 00:01:12.750 --> 00:01:15.640 Now we're going to create the indicators. 00:01:15.990 --> 00:01:20.510 OK so each indicator is link to a slide. 00:01:20.610 --> 00:01:24.970 So we get to use an ordered list 00:01:27.800 --> 00:01:36.380 OK for the indicators and each list item is going to present one indicator. 00:01:36.810 --> 00:01:42.520 So the list is going to take a class of carrousel indicators. 00:01:44.510 --> 00:01:48.790 OK. 00:01:51.870 --> 00:01:54.290 So let's create the first indicator. 00:01:54.870 --> 00:02:07.250 So each list item is going to have a data targets which will set the ID of the carousel itself. 00:02:09.490 --> 00:02:10.280 OK. 00:02:10.710 --> 00:02:13.300 Which is my. 00:02:13.770 --> 00:02:18.370 And also we need a data Sloyd to us viewers 00:02:21.570 --> 00:02:27.410 which will said to the index of the slide that's the indicator is linked to. 00:02:27.420 --> 00:02:35.090 So for the first indicator we are looking outside of index 0 and then second one index one and then 00:02:35.100 --> 00:02:36.290 index two. 00:02:36.810 --> 00:02:37.050 OK 00:02:40.090 --> 00:02:42.920 so let's duplicate this. 00:02:42.930 --> 00:02:53.460 So the second one is going to index one and then index two if you want the first indicator to be active 00:02:53.460 --> 00:02:54.180 . 00:02:54.180 --> 00:03:00.220 We can add a class of active to the first one. 00:03:03.600 --> 00:03:06.390 OK. 00:03:06.390 --> 00:03:07.290 All right. 00:03:07.290 --> 00:03:11.680 Now let's move on to the slides. 00:03:11.940 --> 00:03:20.310 So we going to wrap all all our slides in a div that will have 00:03:23.220 --> 00:03:28.530 a class of Carrousel. 00:03:29.340 --> 00:03:33.890 OK. 00:03:35.800 --> 00:03:40.530 OK and then let's create our first slide. 00:03:40.720 --> 00:03:47.840 So we're going to need a day of class item. 00:03:48.050 --> 00:03:52.890 OK then we can populates the slide. 00:03:52.890 --> 00:04:08.730 Now let's use an image you place this image and it's a source to the image images picture peg. 00:04:08.940 --> 00:04:14.320 And also let's have this create some text. 00:04:14.630 --> 00:04:22.890 So in a place text inside a div of class carrousel caption 00:04:26.470 --> 00:04:26.770 OK 00:04:35.600 --> 00:04:40.740 this placed text in a paragraph first slide. 00:04:42.060 --> 00:04:42.340 OK 00:04:51.210 --> 00:04:51.430 it 00:04:55.030 --> 00:04:57.070 it's a copy 00:05:01.240 --> 00:05:10.360 the same code for the second slide and for the third slide which is going to change these two second 00:05:10.840 --> 00:05:11.410 lines. 00:05:11.470 --> 00:05:14.990 And then third slide. 00:05:16.300 --> 00:05:19.290 OK so you want the first one to be active. 00:05:19.360 --> 00:05:23.310 So we're going to use a class action if 00:05:29.050 --> 00:05:30.380 you don't see anything. 00:05:30.650 --> 00:05:36.140 OK let's carry on. 00:05:40.560 --> 00:05:41.070 OK. 00:05:41.080 --> 00:05:52.000 Now we are going to create our controls which are going to be links taking us to the next slide or the 00:05:52.000 --> 00:05:56.950 previous slide. 00:06:01.090 --> 00:06:04.160 OK so each one is going to be a link. 00:06:04.940 --> 00:06:06.330 OK. 00:06:06.700 --> 00:06:10.140 So the first one is going to have a class. 00:06:10.150 --> 00:06:12.130 So we're building the left one. 00:06:12.130 --> 00:06:18.660 So we need a class left carrousel control. 00:06:19.690 --> 00:06:20.400 OK. 00:06:20.480 --> 00:06:27.880 And we're going to give it's an ATF going to the carousel itself my carousel. 00:06:29.640 --> 00:06:30.080 OK. 00:06:30.160 --> 00:06:39.750 And also we need a data slide attributes that we said to prep for previous. 00:06:40.790 --> 00:06:41.140 OK. 00:06:41.170 --> 00:06:47.180 Now we going to create our icon using the grief I can. 00:06:47.230 --> 00:06:58.520 So we're going to have a span of class belief if can believe like on 00:07:01.110 --> 00:07:04.740 Chevron left. 00:07:07.150 --> 00:07:07.400 OK 00:07:11.070 --> 00:07:17.630 just for technologies we can add another span. 00:07:18.140 --> 00:07:19.490 Some text. 00:07:19.640 --> 00:07:22.960 It can hide it using the saw only class. 00:07:23.770 --> 00:07:24.570 OK. 00:07:25.300 --> 00:07:34.720 Now we can copy the same code for the SEC for the other control. 00:07:34.960 --> 00:07:40.570 We're just going to change everything to rights. 00:07:40.680 --> 00:07:47.580 The slide is next. 00:07:52.270 --> 00:07:59.920 OK so now we can see our slider is make sure that everything is working. 00:08:00.580 --> 00:08:01.920 Yes. 00:08:02.680 --> 00:08:06.340 OK so. 00:08:08.470 --> 00:08:09.420 All right. 00:08:09.430 --> 00:08:09.660 OK. 00:08:09.670 --> 00:08:17.780 Now let's explore some of the methods and events we can use with the carousel plugin. 00:08:18.120 --> 00:08:19.690 So let's create a script 00:08:27.160 --> 00:08:34.810 first let's change the delay between automatically cycling items. 00:08:35.170 --> 00:08:40.290 So we use the carousel method for that. 00:08:40.630 --> 00:08:47.000 So let's select all the elements of class 00:08:52.380 --> 00:08:53.820 Carrousel. 00:08:54.520 --> 00:08:55.220 OK. 00:08:55.520 --> 00:08:58.730 Lexing here our slider. 00:08:59.590 --> 00:09:08.470 And then we're going to use the method carrousel will need an option. 00:09:08.470 --> 00:09:19.990 So the option is going to be interval and we'll say that to the amount of time delay so let's go for 00:09:19.990 --> 00:09:24.850 2000 milliseconds. 00:09:25.040 --> 00:09:26.320 So now if you're fresh 00:09:33.550 --> 00:09:41.150 OK we're going to wait $2000 or two seconds between one item and another. 00:09:41.750 --> 00:09:42.940 OK. 00:09:42.940 --> 00:09:46.490 All right. 00:09:46.930 --> 00:09:51.060 Next let's use some of the methods. 00:09:51.590 --> 00:09:55.360 Also some of the events linked to the carousel. 00:09:55.540 --> 00:10:03.320 OK so by default the interval if you don't set anything there by default is 5000 milliseconds OK. 00:10:03.540 --> 00:10:06.760 They just change this to two and 00:10:09.750 --> 00:10:11.860 refresh. 00:10:13.150 --> 00:10:14.870 You know we're going to wait longer. 00:10:15.160 --> 00:10:26.440 Let's place everything inside the documents ready function to do that. 00:10:33.600 --> 00:10:37.440 OK. 00:10:41.990 --> 00:10:42.340 OK. 00:10:42.380 --> 00:10:49.820 Now let's change the paragraph styling. 00:10:50.440 --> 00:10:53.290 Every time we cycle an item. 00:10:54.010 --> 00:10:58.660 OK let's make sure this is still working 00:11:00.900 --> 00:11:06.860 . 00:11:12.830 --> 00:11:16.170 OK. 00:11:17.700 --> 00:11:19.060 So. 00:11:19.060 --> 00:11:25.530 So he wants the paragraph to change. 00:11:25.750 --> 00:11:35.950 Let's let's use a toggle class here so that we can swap between a class yellow they're going to create 00:11:36.350 --> 00:11:42.350 this will give a yellow color to the paragraph OK. 00:11:43.020 --> 00:11:43.740 It's odd. 00:11:43.850 --> 00:11:46.610 A close here of you know 00:11:56.230 --> 00:12:01.650 . 00:12:03.500 --> 00:12:11.550 It's the color too. 00:12:13.930 --> 00:12:18.320 OK so let's select a Kirksville using the classic curve. 00:12:18.340 --> 00:12:24.460 So then we're going to use the on method. 00:12:24.860 --> 00:12:27.310 So the event is going to be 00:12:31.130 --> 00:12:36.790 slide but be as those carrousel the function 00:12:39.640 --> 00:12:40.600 is going to be 00:12:43.450 --> 00:12:55.670 selecting all paragraphs and then we're going to use the toggle class method of the class we're looking 00:12:55.660 --> 00:12:57.810 at is yellow. 00:12:58.850 --> 00:13:01.070 OK so let's try that. 00:13:02.830 --> 00:13:04.090 OK so we can see you know that's 00:13:06.990 --> 00:13:08.320 it is working. 00:13:08.330 --> 00:13:14.280 So the paragraph styling changes to yellow then goes back to its original state. 00:13:14.290 --> 00:13:18.000 Every time we cycle the items. 00:13:18.190 --> 00:13:22.630 Ok now we going to try something else. 00:13:22.630 --> 00:13:30.220 Let's write some code so that's when we Hova on one of these slides. 00:13:30.500 --> 00:13:34.520 The recycling just stops. 00:13:34.730 --> 00:13:36.690 OK so we get to 00:13:40.250 --> 00:13:50.140 select our carrousel using the carousel class then we would use the over method that would place the 00:13:50.200 --> 00:13:55.160 functions executed inside the Hoover method. 00:13:56.650 --> 00:13:58.320 OK. 00:13:59.290 --> 00:14:04.680 So we're going to access this. 00:14:05.600 --> 00:14:07.340 OK. 00:14:07.670 --> 00:14:13.230 Which is the Carrasquillo itself and they will use the method Carrousel. 00:14:13.280 --> 00:14:19.210 Now I'm going to use a parameter pause. 00:14:19.720 --> 00:14:20.410 So that's 00:14:26.060 --> 00:14:30.940 repo's the carousel when we Hoba on sleights. 00:14:30.940 --> 00:14:33.420 OK so now we are hovering on the slide. 00:14:33.560 --> 00:14:39.140 So we'll see that's the automatic cycling is going to stop. 00:14:40.510 --> 00:14:42.500 OK. 00:14:43.380 --> 00:14:44.940 OK we'll leave it there. 00:14:44.960 --> 00:14:48.390 He waits for the interval. 00:14:48.580 --> 00:14:52.490 The amount of time delay that it is going to start cycling again 00:15:04.970 --> 00:15:09.300 you 00:15:16.920 --> 00:15:24.240 just refresh the page to page and make sure it's working. 00:15:24.250 --> 00:15:30.980 Let's change the interval to 1 second. 00:15:31.420 --> 00:15:33.820 We can see is better. 00:15:34.650 --> 00:15:38.330 OK so we know we've got the cycling on over. 00:15:38.440 --> 00:15:43.920 It stops pain relief. 00:15:44.100 --> 00:15:48.420 Still it is still it's still there actually. 00:15:48.750 --> 00:15:52.340 Hey let's refresh again. 00:15:54.350 --> 00:15:54.950 OK. 00:15:54.940 --> 00:16:02.730 If you're over on one slide then it stops OK but if we leave it's the cycling doesn't start again. 00:16:03.130 --> 00:16:05.460 OK so let's do something about that. 00:16:05.710 --> 00:16:09.950 So that starts again when we leave the slide. 00:16:11.210 --> 00:16:18.050 OK so we have a method we can use a couple of functions and in function and an out function. 00:16:18.040 --> 00:16:24.100 So the function is the the function that's will be executed. 00:16:24.130 --> 00:16:25.830 When you hope what are the elements. 00:16:25.880 --> 00:16:30.650 The other one the function is optional and we can use it here. 00:16:30.660 --> 00:16:36.200 In our case so this function is going to be executed when we leave the elements. 00:16:36.220 --> 00:16:46.410 So let's just copy the same function and place it in the second parameter. 00:16:46.630 --> 00:16:53.740 But rather than using the that goes with the pawpaws with the carousel method we'll use another prompt 00:16:53.770 --> 00:16:59.260 so it's cycle so that when we leave the elements we're going to start cycling cycling and get the rest 00:16:59.270 --> 00:17:00.380 right and make sure it's working. 00:17:00.380 --> 00:17:03.290 So let's refresh the page. 00:17:03.980 --> 00:17:05.770 Now we can see those we are cycling. 00:17:06.080 --> 00:17:07.600 We're going to hoover on the slide. 00:17:07.630 --> 00:17:08.210 OK. 00:17:08.360 --> 00:17:12.040 If we leave it start cycling again. 00:17:12.080 --> 00:17:12.420 All right