title
Full Screen Image Slider With HTML, CSS & JS
description
In this video we will be creating a full screen image slider with HTML, CSS and JavaScript. We will not be using any 3rd party libraries like jQuery. All Images are free stock images from pexels.com
SPONSOR:
Check out Coding Dojo - http://www.codingdojo.com/l/yt/tr
CODE:
https://codepen.io/bradtraversy/pen/boydaE
BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia
ONE TIME DONATIONS:
http://www.paypal.me/traversymedia
VISIT MY WEBISTE: Check Out My Udemy Courses
http://www.traversymedia.com
FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia
https://discord.gg/traversymedia
detail
{'title': 'Full Screen Image Slider With HTML, CSS & JS', 'heatmap': [{'end': 395.962, 'start': 310.204, 'weight': 0.755}, {'end': 1009.508, 'start': 984.079, 'weight': 0.804}], 'summary': 'Learn to create a full-screen image slider using javascript and responsive design, with tutorials on html, css, and javascript, including css arrows and javascript variables for targeting elements. the video includes an ad for coding dojo programming school.', 'chapters': [{'end': 78.703, 'segs': [{'end': 78.703, 'src': 'embed', 'start': 23.338, 'weight': 0, 'content': [{'end': 28.503, 'text': 'then i did the full screen video background and i was asked a few times to do a full screen image slider.', 'start': 23.338, 'duration': 5.165}, {'end': 30.064, 'text': "so that's what we're going to do.", 'start': 28.503, 'duration': 1.561}, {'end': 32.165, 'text': "we're not going to be using jquery or anything.", 'start': 30.064, 'duration': 2.101}, {'end': 33.668, 'text': "it's going to be straight javascript.", 'start': 32.165, 'duration': 1.503}, {'end': 39.39, 'text': "We're also not going to use any like advanced CSS transitions or anything or animations.", 'start': 34.048, 'duration': 5.342}, {'end': 43.171, 'text': "Basically, we'll just click on the arrow and it's just going to switch the image.", 'start': 39.75, 'duration': 3.421}, {'end': 43.631, 'text': 'All right.', 'start': 43.391, 'duration': 0.24}, {'end': 45.352, 'text': 'So you can see it takes up the whole screen.', 'start': 43.671, 'duration': 1.681}, {'end': 47.133, 'text': 'We have three images here.', 'start': 45.372, 'duration': 1.761}, {'end': 48.753, 'text': 'We can go forward and backward.', 'start': 47.173, 'duration': 1.58}, {'end': 53.695, 'text': 'And if I resize the browser, the image is always going to be full screen.', 'start': 49.353, 'duration': 4.342}, {'end': 56.444, 'text': 'Alright, so hopefully you guys enjoy this.', 'start': 54.522, 'duration': 1.922}, {'end': 57.304, 'text': 'Something simple.', 'start': 56.544, 'duration': 0.76}, {'end': 58.305, 'text': "It's a Sunday night.", 'start': 57.365, 'duration': 0.94}, {'end': 61.628, 'text': 'Just, you know, relaxing and wanted to make a video.', 'start': 58.926, 'duration': 2.702}, {'end': 63.21, 'text': "So let's get started.", 'start': 62.109, 'duration': 1.101}, {'end': 68.314, 'text': 'Coding Dojo is a programming school that turns beginners into developers in only 14 weeks.', 'start': 63.63, 'duration': 4.684}, {'end': 74.619, 'text': 'Over 90% of their grads land jobs within 3 months of graduating, often making over $70k per year.', 'start': 68.754, 'duration': 5.865}, {'end': 78.703, 'text': 'To learn more, visit CodingDojo.com or click the link in the description below.', 'start': 74.92, 'duration': 3.783}], 'summary': 'Demonstrating full screen image slider using pure javascript, no jquery, with responsive design. coding dojo graduates land jobs with 90% success rate, often making over $70k per year.', 'duration': 55.365, 'max_score': 23.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY23338.jpg'}], 'start': 7.304, 'title': 'Full screen image slider tutorial', 'summary': 'Introduces a tutorial on building a full-screen image slider using javascript, without jquery or advanced css, allowing navigation through images and responsive resizing, with emphasis on simplicity and practicality. an ad for coding dojo programming school is included.', 'chapters': [{'end': 78.703, 'start': 7.304, 'title': 'Full screen image slider tutorial', 'summary': 'Introduces a tutorial on building a full-screen image slider using javascript, without jquery or advanced css, allowing navigation through images and responsive resizing, with emphasis on simplicity and practicality. additionally, an ad for coding dojo programming school is included.', 'duration': 71.399, 'highlights': ['The tutorial focuses on building a full-screen image slider using JavaScript, without relying on jQuery or advanced CSS, for simple and practical functionality.', 'The slider allows navigation through three images, with the ability to move forward and backward, and maintains full-screen display even when the browser is resized.', 'Coding Dojo, a programming school, is promoted with the claim that over 90% of their graduates secure jobs within 3 months of graduating, often with salaries exceeding $70k per year.']}], 'duration': 71.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY7304.jpg', 'highlights': ['The tutorial focuses on building a full-screen image slider using JavaScript, without relying on jQuery or advanced CSS, for simple and practical functionality.', 'The slider allows navigation through three images, with the ability to move forward and backward, and maintains full-screen display even when the browser is resized.', 'Coding Dojo, a programming school, is promoted with the claim that over 90% of their graduates secure jobs within 3 months of graduating, often with salaries exceeding $70k per year.']}, {'end': 685.797, 'segs': [{'end': 135.711, 'src': 'embed', 'start': 106.381, 'weight': 2, 'content': [{'end': 107.641, 'text': 'And of course you can use any image.', 'start': 106.381, 'duration': 1.26}, {'end': 108.602, 'text': "You don't have to use these.", 'start': 107.661, 'duration': 0.941}, {'end': 114.484, 'text': "And I'm going to grab the 1920 by 1280 version and download.", 'start': 109.282, 'duration': 5.202}, {'end': 120.366, 'text': 'All right, now I have a folder right here open in VS Code called Full Screen Slider.', 'start': 114.964, 'duration': 5.402}, {'end': 122.286, 'text': "That's where we're going to put our application.", 'start': 120.406, 'duration': 1.88}, {'end': 124.007, 'text': "So I'm going to navigate to that.", 'start': 122.307, 'duration': 1.7}, {'end': 126.208, 'text': 'I have that in my Code Production folder.', 'start': 124.047, 'duration': 2.161}, {'end': 130.008, 'text': "And I'm going to just create a folder called Images.", 'start': 127.188, 'duration': 2.82}, {'end': 134.591, 'text': "I don't know what's up with my OS here doing this.", 'start': 130.029, 'duration': 4.562}, {'end': 135.711, 'text': 'There we go.', 'start': 135.311, 'duration': 0.4}], 'summary': 'Demonstrating downloading 1920x1280 image and creating folder for application', 'duration': 29.33, 'max_score': 106.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY106381.jpg'}, {'end': 395.962, 'src': 'heatmap', 'start': 310.204, 'weight': 0.755, 'content': [{'end': 314.806, 'text': "so in the middle here we're going to create an id of slider that's going to wrap around everything,", 'start': 310.204, 'duration': 4.602}, {'end': 318.788, 'text': "and then we're going to have three different slide classes.", 'start': 314.806, 'duration': 3.982}, {'end': 321.029, 'text': "So we'll say slide.", 'start': 319.989, 'duration': 1.04}, {'end': 326.672, 'text': "And then I'm also going to give this a class of slide one because we need a target for the images.", 'start': 321.13, 'duration': 5.542}, {'end': 327.312, 'text': 'All right.', 'start': 326.692, 'duration': 0.62}, {'end': 328.252, 'text': 'So slide one.', 'start': 327.372, 'duration': 0.88}, {'end': 335.576, 'text': "And then in here we're going to have a class of slide content and then a span.", 'start': 328.272, 'duration': 7.304}, {'end': 336.676, 'text': 'All right.', 'start': 335.596, 'duration': 1.08}, {'end': 338.517, 'text': 'And this is this is where the text will go.', 'start': 336.756, 'duration': 1.761}, {'end': 340.818, 'text': "So for the text, I'm just going to say image.", 'start': 338.597, 'duration': 2.221}, {'end': 342.718, 'text': "We'll just say image one.", 'start': 340.838, 'duration': 1.88}, {'end': 343.579, 'text': 'All right.', 'start': 342.739, 'duration': 0.84}, {'end': 346.14, 'text': "And then what we're going to do is just copy the slide div.", 'start': 343.659, 'duration': 2.481}, {'end': 349.897, 'text': "Okay, so we'll copy what I do here.", 'start': 347.875, 'duration': 2.022}, {'end': 355.024, 'text': "Let's just copy that and we'll go ahead and paste it in twice.", 'start': 351.339, 'duration': 3.685}, {'end': 360.29, 'text': "The second one we're going to change to slide two, we'll change the text to image two.", 'start': 355.885, 'duration': 4.405}, {'end': 362.833, 'text': 'And then this one will be slide three.', 'start': 361.011, 'duration': 1.822}, {'end': 366.017, 'text': "And we'll change the text to image three.", 'start': 363.454, 'duration': 2.563}, {'end': 368.799, 'text': "Alright, and that's it for the HTML.", 'start': 366.858, 'duration': 1.941}, {'end': 370.901, 'text': "So let's save this and it should look like this.", 'start': 368.819, 'duration': 2.082}, {'end': 373.382, 'text': "Alright, we haven't linked any images yet.", 'start': 370.921, 'duration': 2.461}, {'end': 375.984, 'text': "We're going to do that inside of our CSS.", 'start': 373.402, 'duration': 2.582}, {'end': 377.825, 'text': "So let's go to our style sheet.", 'start': 376.044, 'duration': 1.781}, {'end': 381.567, 'text': "And we're going to start off with the body styles.", 'start': 378.905, 'duration': 2.662}, {'end': 389.672, 'text': 'Okay, so this is going to be the body, the slider ID, the wrap, and the slide content.', 'start': 381.687, 'duration': 7.985}, {'end': 394.16, 'text': 'All right, so all these styles are going to apply to these elements here.', 'start': 390.495, 'duration': 3.665}, {'end': 395.962, 'text': "So I'm going to just margin.", 'start': 394.8, 'duration': 1.162}], 'summary': 'Creating html with slider id and three slide classes.', 'duration': 85.758, 'max_score': 310.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY310204.jpg'}, {'end': 602.889, 'src': 'embed', 'start': 570.509, 'weight': 1, 'content': [{'end': 572.79, 'text': "So they're all going to be piled on top of each other now.", 'start': 570.509, 'duration': 2.281}, {'end': 578.533, 'text': "It's going to be like that until we get to our JavaScript and we start hiding images and showing one at a time.", 'start': 573.331, 'duration': 5.202}, {'end': 585.227, 'text': "So now we're going to do the slide content, which you can see is way up here.", 'start': 580.6, 'duration': 4.627}, {'end': 585.968, 'text': "It's black.", 'start': 585.427, 'duration': 0.541}, {'end': 587.17, 'text': 'You can barely see it.', 'start': 585.988, 'duration': 1.182}, {'end': 591.396, 'text': 'It says image one, image two, and image three.', 'start': 587.19, 'duration': 4.206}, {'end': 593.018, 'text': 'So we want to take care of that.', 'start': 591.796, 'duration': 1.222}, {'end': 595.802, 'text': 'So that has a class of slide content.', 'start': 593.158, 'duration': 2.644}, {'end': 602.889, 'text': "So for slide content, I'm actually going to display as flex.", 'start': 597.845, 'duration': 5.044}], 'summary': 'Javascript will handle slide content by using flex display.', 'duration': 32.38, 'max_score': 570.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY570509.jpg'}, {'end': 695.407, 'src': 'embed', 'start': 665.122, 'weight': 0, 'content': [{'end': 667.023, 'text': 'So REM is a relative unit.', 'start': 665.122, 'duration': 1.901}, {'end': 675.91, 'text': "Basically, we're saying that we want it to be five times the the, the font size of the core HTML element, or the root element,", 'start': 667.203, 'duration': 8.707}, {'end': 677.351, 'text': 'which by default is 16 pixels.', 'start': 675.91, 'duration': 1.441}, {'end': 678.712, 'text': 'All right.', 'start': 677.471, 'duration': 1.241}, {'end': 683.836, 'text': 'If you want to learn more about RAM and M units, I just did a video probably about two weeks ago on it.', 'start': 678.732, 'duration': 5.104}, {'end': 684.896, 'text': 'If you want to check that out.', 'start': 683.896, 'duration': 1}, {'end': 685.797, 'text': 'All right.', 'start': 685.577, 'duration': 0.22}, {'end': 687.919, 'text': "And then we're just going to set the color to white.", 'start': 685.837, 'duration': 2.082}, {'end': 691.423, 'text': "All right, so let's go ahead and save that.", 'start': 689.361, 'duration': 2.062}, {'end': 695.407, 'text': "And now you can see the words are in the middle and they're big and white.", 'start': 691.623, 'duration': 3.784}], 'summary': 'Set rem unit to 5 times the root font size (16px), with white color.', 'duration': 30.285, 'max_score': 665.122, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY665122.jpg'}], 'start': 79.827, 'title': 'Creating image sliders', 'summary': 'Covers creating a full screen slider with images from pexels.com using html and css, and demonstrates the creation of a simple image slider with html, css, and javascript, while emphasizing the importance of responsive design.', 'chapters': [{'end': 266.887, 'start': 79.827, 'title': 'Creating full screen slider', 'summary': 'Covers the process of downloading and organizing images from pexels.com and setting up the basic html and css files for a full screen slider, using vs code and live server.', 'duration': 187.06, 'highlights': ['Downloading images from pexels.com The speaker downloads three images from pexels.com, each sized 1920 by 1280, and saves them in a folder called Full Screen Slider.', "Setting up HTML and CSS files The speaker creates an index.html file with title 'Full Screen Slider' and links a style.css file, and demonstrates using the Live Server extension in VS Code to view the application.", 'Using VS Code and Live Server extension The speaker uses VS Code to organize files and the Live Server extension to view the application on localhost.']}, {'end': 685.797, 'start': 268.257, 'title': 'Creating a simple slider with html, css, and javascript', 'summary': 'Demonstrates how to create a simple image slider using html, css, and javascript, involving the creation of slide structure, applying styles to the elements, and the importance of relative units in css, with a focus on creating a responsive design for the slider.', 'duration': 417.54, 'highlights': ['The chapter focuses on creating a simple image slider using HTML, CSS, and JavaScript, involving the creation of slide structure and applying styles to the elements. The tutorial covers the process of creating a slider with left and right arrows, three different slides, and styling the slide content using HTML and CSS.', 'The explanation includes the importance of relative units in CSS and demonstrates the use of viewport heights (VH) and relative units (REM) for creating a responsive design for the slider. The tutorial emphasizes the use of relative units in CSS, such as VH and REM, to achieve a responsive design for the slider, ensuring the elements adapt effectively to different viewport sizes.']}], 'duration': 605.97, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY79827.jpg', 'highlights': ['The tutorial emphasizes the use of relative units in CSS, such as VH and REM, to achieve a responsive design for the slider, ensuring the elements adapt effectively to different viewport sizes.', 'The chapter focuses on creating a simple image slider using HTML, CSS, and JavaScript, involving the creation of slide structure and applying styles to the elements.', 'Downloading images from pexels.com The speaker downloads three images from pexels.com, each sized 1920 by 1280, and saves them in a folder called Full Screen Slider.']}, {'end': 1089.501, 'segs': [{'end': 719.181, 'src': 'embed', 'start': 685.837, 'weight': 1, 'content': [{'end': 687.919, 'text': "And then we're just going to set the color to white.", 'start': 685.837, 'duration': 2.082}, {'end': 691.423, 'text': "All right, so let's go ahead and save that.", 'start': 689.361, 'duration': 2.062}, {'end': 695.407, 'text': "And now you can see the words are in the middle and they're big and white.", 'start': 691.623, 'duration': 3.784}, {'end': 700.297, 'text': 'So next thing we want to do is the arrows.', 'start': 696.808, 'duration': 3.489}, {'end': 703.398, 'text': 'So the arrows are actually going to be pure CSS.', 'start': 700.377, 'duration': 3.021}, {'end': 709.099, 'text': "We're going to do it using border width and border color.", 'start': 703.798, 'duration': 5.301}, {'end': 712.2, 'text': "So let's first do the arrow class.", 'start': 709.999, 'duration': 2.201}, {'end': 719.181, 'text': 'Remember we have the arrow class on both and then we also have an ID of left arrow or arrow left and arrow right.', 'start': 712.48, 'duration': 6.701}], 'summary': 'Creating visual elements using css, including white text and pure css arrows.', 'duration': 33.344, 'max_score': 685.837, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY685837.jpg'}, {'end': 1009.508, 'src': 'heatmap', 'start': 984.079, 'weight': 0, 'content': [{'end': 989.328, 'text': 'All right, so now what I want to do is start to add our JavaScript.', 'start': 984.079, 'duration': 5.249}, {'end': 994.458, 'text': "So we're going to go to our HTML file, go down to the bottom here, and let's put in our script tags.", 'start': 989.348, 'duration': 5.11}, {'end': 996.902, 'text': 'all right.', 'start': 996.502, 'duration': 0.4}, {'end': 999.503, 'text': "so first thing we'll do is create some variables.", 'start': 996.902, 'duration': 2.601}, {'end': 1009.508, 'text': "we're going to have one called slider images and we want to set this to document dot query selector.", 'start': 999.503, 'duration': 10.005}], 'summary': 'Adding javascript to html file, creating variables for slider images.', 'duration': 25.429, 'max_score': 984.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY984079.jpg'}], 'start': 685.837, 'title': 'Css arrows and javascript variables', 'summary': 'Covers creating arrows using css border properties and setting up javascript variables to target specific elements on the webpage, including classes and ids.', 'chapters': [{'end': 1089.501, 'start': 685.837, 'title': 'Css arrows and javascript variables', 'summary': 'Covers creating arrows using css border properties and setting up javascript variables to target specific elements on the webpage, including classes and ids.', 'duration': 403.664, 'highlights': ['Creating arrows using CSS border properties with specific dimensions and colors, and explaining the process of achieving arrow shapes using border settings.', 'Setting up JavaScript variables to target elements using querySelector and querySelectorAll to select classes and IDs on the webpage.']}], 'duration': 403.664, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY685837.jpg', 'highlights': ['Setting up JavaScript variables to target elements using querySelector and querySelectorAll to select classes and IDs on the webpage.', 'Creating arrows using CSS border properties with specific dimensions and colors, and explaining the process of achieving arrow shapes using border settings.']}, {'end': 1644.322, 'segs': [{'end': 1145.94, 'src': 'embed', 'start': 1090.241, 'weight': 0, 'content': [{'end': 1094.542, 'text': "And this is going to represent what image we're on or what slide we're on.", 'start': 1090.241, 'duration': 4.301}, {'end': 1096.223, 'text': "It's going to be zero by default.", 'start': 1094.582, 'duration': 1.641}, {'end': 1099.044, 'text': 'Okay So those are our variables.', 'start': 1097.223, 'duration': 1.821}, {'end': 1103.765, 'text': "Now what we want to do is I'm going to create a function here called reset.", 'start': 1099.064, 'duration': 4.701}, {'end': 1113.143, 'text': 'because each time we change a slide, we want to basically clear out all the images, set them all to display none.', 'start': 1105.717, 'duration': 7.426}, {'end': 1118.967, 'text': "So we're going to call this reset function before every slide left, slide right.", 'start': 1113.703, 'duration': 5.264}, {'end': 1126.013, 'text': "So to do that, we're going to loop through the collection of slides.", 'start': 1120.468, 'duration': 5.545}, {'end': 1128.094, 'text': "So let's do a simple for loop.", 'start': 1126.493, 'duration': 1.601}, {'end': 1131.097, 'text': "We'll say let i equals zero.", 'start': 1128.114, 'duration': 2.983}, {'end': 1145.94, 'text': "We're going to say as long as i is less than slider images, slider images, dot length, and then we just want to increment i by one, so i plus, plus,", 'start': 1131.117, 'duration': 14.823}], 'summary': 'Creating a reset function to clear images on slide change.', 'duration': 55.699, 'max_score': 1090.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY1090241.jpg'}, {'end': 1201.316, 'src': 'embed', 'start': 1175.657, 'weight': 6, 'content': [{'end': 1181.542, 'text': 'Now, when we reload, the images are still going to be there because all we did is define the function.', 'start': 1175.657, 'duration': 5.885}, {'end': 1185.865, 'text': "Now what we're going to do, let me just put a comment saying what this does actually.", 'start': 1182.122, 'duration': 3.743}, {'end': 1189.027, 'text': 'So this will clear all images.', 'start': 1185.965, 'duration': 3.062}, {'end': 1195.872, 'text': "And then we're going to create a function called start slide, which is basically our initializer.", 'start': 1189.928, 'duration': 5.944}, {'end': 1201.316, 'text': 'Okay, but before we do anything, we want to call reset.', 'start': 1195.892, 'duration': 5.424}], 'summary': 'Creating a function to clear images and initializing with a reset call.', 'duration': 25.659, 'max_score': 1175.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY1175657.jpg'}, {'end': 1303.508, 'src': 'embed', 'start': 1254.02, 'weight': 1, 'content': [{'end': 1256.742, 'text': "so let's go ahead and let's put a comment here.", 'start': 1254.02, 'duration': 2.722}, {'end': 1265.529, 'text': 'this basically initializes the slider and then we want to add our functionality to slide left and slide right.', 'start': 1256.742, 'duration': 8.787}, {'end': 1270.473, 'text': "so let's go under the start slide function and let's start with the.", 'start': 1265.529, 'duration': 4.944}, {'end': 1277.87, 'text': "we'll do the show previous, which will be slide left if we click the left arrow.", 'start': 1270.473, 'duration': 7.397}, {'end': 1282.313, 'text': "So we'll say function slide left.", 'start': 1278.43, 'duration': 3.883}, {'end': 1292.84, 'text': 'And then what we want to do here is, first of all, call reset because we want to wipe the slate clean.', 'start': 1285.055, 'duration': 7.785}, {'end': 1295.502, 'text': "And then we're going to say slider images.", 'start': 1293.421, 'duration': 2.081}, {'end': 1303.508, 'text': 'And then for the index, we want to take the current, whatever the current image is, and we want to take away one from it.', 'start': 1295.522, 'duration': 7.986}], 'summary': 'Initializing slider, adding functionality to slide left and slide right.', 'duration': 49.488, 'max_score': 1254.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY1254020.jpg'}, {'end': 1384.573, 'src': 'embed', 'start': 1355.488, 'weight': 3, 'content': [{'end': 1361.133, 'text': "Let's say left arrow click and we're going to grab the left arrow.", 'start': 1355.488, 'duration': 5.645}, {'end': 1371.602, 'text': "So remember we gave that a variable of arrow left and we're going to say dot add event listener and we're going to listen for a click event.", 'start': 1361.193, 'duration': 10.409}, {'end': 1376.367, 'text': "And once it's clicked, it's going to call this function.", 'start': 1373.064, 'duration': 3.303}, {'end': 1384.573, 'text': "Okay, and then in this function, what we want to do before we actually call slide left, we want to check to see if it's at zero.", 'start': 1377.99, 'duration': 6.583}], 'summary': 'Add event listener to left arrow click, call function if clicked, check if at zero before sliding left.', 'duration': 29.085, 'max_score': 1355.488, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY1355488.jpg'}, {'end': 1592.476, 'src': 'embed', 'start': 1570.982, 'weight': 2, 'content': [{'end': 1579.588, 'text': "right, because when we get to the last image, we want it to go go back to the the first image, all right, and then we're going to call slide right.", 'start': 1570.982, 'duration': 8.606}, {'end': 1585.912, 'text': "i probably should have tested the left one first, but whatever, we'll just test them at the same time.", 'start': 1579.588, 'duration': 6.324}, {'end': 1587.233, 'text': "so let's go ahead and save that.", 'start': 1585.912, 'duration': 1.321}, {'end': 1592.476, 'text': "let's, let's click on the left one goes back to image three, two, one, and it just keeps going.", 'start': 1587.233, 'duration': 5.243}], 'summary': 'Testing slide transitions: left goes back to image 321, right loops', 'duration': 21.494, 'max_score': 1570.982, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY1570982.jpg'}], 'start': 1090.241, 'title': 'Creating javascript slider function', 'summary': "Discusses creating javascript functions 'reset' and 'start slide' to clear and display images in a slider, emphasizing seamless transitions, loop functionality, and handling arrow clicks.", 'chapters': [{'end': 1254.02, 'start': 1090.241, 'title': 'Javascript slider function', 'summary': "Discusses creating javascript functions 'reset' and 'start slide' to clear and display images in a slider, with 'reset' clearing all images and 'start slide' displaying the first image.", 'duration': 163.779, 'highlights': ["Creating a function 'reset' to clear all images by setting their display to none The function 'reset' loops through the collection of slides and sets the style of each image to display none.", "Calling the 'reset' function before initializing the slider Before doing anything, the 'reset' function is called to clear all images.", "Creating a function 'start slide' to display the first image in the slider The 'start slide' function sets the display style of the first image to block, showing it as the initial image in the slider."]}, {'end': 1644.322, 'start': 1254.02, 'title': 'Javascript slider function', 'summary': 'Explains how to create a javascript slider function to navigate through images, including handling left and right arrow clicks, with an emphasis on resetting and updating the current image position, ensuring seamless transitions and loop functionality.', 'duration': 390.302, 'highlights': ['Creating JavaScript slider function to navigate through images The tutorial focuses on creating a JavaScript slider function to navigate through a series of images, with an emphasis on its application and functionality.', 'Handling left and right arrow clicks for seamless transitions The script covers the implementation of left and right arrow click functionality to smoothly transition between images, ensuring a user-friendly experience.', 'Resetting and updating current image position The tutorial emphasizes the importance of resetting and updating the current image position to ensure the slider function operates seamlessly and accurately.', 'Ensuring loop functionality for continuous image navigation The chapter demonstrates the implementation of loop functionality to ensure continuous navigation through the images, providing a seamless user experience.']}], 'duration': 554.081, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7ZO2RTMNSAY/pics/7ZO2RTMNSAY1090241.jpg', 'highlights': ["Creating a function 'reset' to clear all images by setting their display to none", 'Creating JavaScript slider function to navigate through images', 'Ensuring loop functionality for continuous image navigation', 'Handling left and right arrow clicks for seamless transitions', "Calling the 'reset' function before initializing the slider", 'Resetting and updating current image position', "Creating a function 'start slide' to display the first image in the slider"]}], 'highlights': ['The tutorial focuses on building a full-screen image slider using JavaScript, without relying on jQuery or advanced CSS, for simple and practical functionality.', 'The slider allows navigation through three images, with the ability to move forward and backward, and maintains full-screen display even when the browser is resized.', 'The tutorial emphasizes the use of relative units in CSS, such as VH and REM, to achieve a responsive design for the slider, ensuring the elements adapt effectively to different viewport sizes.', 'Setting up JavaScript variables to target elements using querySelector and querySelectorAll to select classes and IDs on the webpage.', "Creating a function 'reset' to clear all images by setting their display to none", 'Creating JavaScript slider function to navigate through images', 'Ensuring loop functionality for continuous image navigation', 'Handling left and right arrow clicks for seamless transitions', "Calling the 'reset' function before initializing the slider", 'Resetting and updating current image position', "Creating a function 'start slide' to display the first image in the slider", 'Coding Dojo, a programming school, is promoted with the claim that over 90% of their graduates secure jobs within 3 months of graduating, often with salaries exceeding $70k per year.', 'Downloading images from pexels.com The speaker downloads three images from pexels.com, each sized 1920 by 1280, and saves them in a folder called Full Screen Slider.', 'Creating arrows using CSS border properties with specific dimensions and colors, and explaining the process of achieving arrow shapes using border settings.']}