title
How To Create An Image Slider In HTML, CSS & Javascript

description
Check out my courses and become more creative! https://developedbyed.com Today we are going to build an image carousel similar to the one in bootstrap. However this one is going to be built in pure html css and javascript. For any questions or problems you might be having, make sure to leave it down bellow. -~-~~-~~~-~~-~- Follow my Twitter: https://twitter.com/DevEd94 Please watch: "Should You Become A Software Engineer?" https://www.youtube.com/watch?v=V_kTl0eIJ4A -~-~~-~~~-~~-~-

detail
{'title': 'How To Create An Image Slider In HTML, CSS & Javascript', 'heatmap': [{'end': 255.829, 'start': 223.915, 'weight': 0.723}, {'end': 549.502, 'start': 516.914, 'weight': 1}, {'end': 983.223, 'start': 960.022, 'weight': 0.817}], 'summary': 'This tutorial demonstrates building a simple vanilla javascript carousel with infinite transitions, reverse navigation, and image cloning to create an infinite loop, providing a comprehensive guide for creating a functional carousel without relying on bootstrap.', 'chapters': [{'end': 83.071, 'segs': [{'end': 50.957, 'src': 'embed', 'start': 5.523, 'weight': 0, 'content': [{'end': 11.451, 'text': "Hello everybody, how are you guys doing today? Okay, so we're going to build a simple vanilla JavaScript carousel with a slider.", 'start': 5.523, 'duration': 5.928}, {'end': 16.958, 'text': 'And this one is similar to the bootstrap one.', 'start': 12.232, 'duration': 4.726}, {'end': 23.446, 'text': 'So the way this is, is basically we have this image here with the road and we can go through it nicely like this.', 'start': 17.639, 'duration': 5.807}, {'end': 28.428, 'text': "And once we get to the last picture, it's going to go back to the original one.", 'start': 24.247, 'duration': 4.181}, {'end': 31.95, 'text': "So it's going to transition like this infinitely.", 'start': 28.909, 'duration': 3.041}, {'end': 35.751, 'text': "So we can click it as many times and it's just going to loop over all the images.", 'start': 32.009, 'duration': 3.742}, {'end': 37.952, 'text': 'We can also do it in reverse.', 'start': 36.431, 'duration': 1.521}, {'end': 41.173, 'text': 'So everything works all nicely and beautifully.', 'start': 38.592, 'duration': 2.581}, {'end': 48.256, 'text': "So, Hey, if you don't want to use bootstrap, or you find yourself using bootstrap just to get a carousel going, uh,", 'start': 41.793, 'duration': 6.463}, {'end': 50.957, 'text': "I'm going to show you a way to do it all in vanilla JavaScript.", 'start': 48.256, 'duration': 2.701}], 'summary': 'Build a simple vanilla javascript carousel with a slider, similar to bootstrap, transitioning infinitely through images.', 'duration': 45.434, 'max_score': 5.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw5523.jpg'}], 'start': 5.523, 'title': 'Building vanilla javascript carousel', 'summary': 'Demonstrates the creation of a simple vanilla javascript carousel with a slider, similar to the bootstrap one, allowing for infinite transitions and reverse navigation, enabling users to avoid using bootstrap and achieve carousel functionality solely in vanilla javascript.', 'chapters': [{'end': 83.071, 'start': 5.523, 'title': 'Building vanilla javascript carousel', 'summary': 'Demonstrates the creation of a simple vanilla javascript carousel with a slider, similar to the bootstrap one, allowing for infinite transitions and reverse navigation, enabling users to avoid using bootstrap and achieve carousel functionality solely in vanilla javascript.', 'duration': 77.548, 'highlights': ['Creation of vanilla JavaScript carousel with slider The chapter focuses on building a simple vanilla JavaScript carousel with a slider, resembling the bootstrap one.', 'Infinite transitions and reverse navigation The carousel supports infinite transitions and reverse navigation, enabling seamless looping through all the images.', 'Promotion of vanilla JavaScript over bootstrap The chapter promotes the use of vanilla JavaScript for creating carousels as an alternative to using bootstrap, offering a more lightweight solution.']}], 'duration': 77.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw5523.jpg', 'highlights': ['Creation of vanilla JavaScript carousel with slider The chapter focuses on building a simple vanilla JavaScript carousel with a slider, resembling the bootstrap one.', 'Infinite transitions and reverse navigation The carousel supports infinite transitions and reverse navigation, enabling seamless looping through all the images.', 'Promotion of vanilla JavaScript over bootstrap The chapter promotes the use of vanilla JavaScript for creating carousels as an alternative to using bootstrap, offering a more lightweight solution.']}, {'end': 258.81, 'segs': [{'end': 109.194, 'src': 'embed', 'start': 83.832, 'weight': 0, 'content': [{'end': 89.598, 'text': "So we're going to build up the, we're going to say carousel container.", 'start': 83.832, 'duration': 5.766}, {'end': 93.871, 'text': "So we're gonna create a div called carousel container.", 'start': 91.567, 'duration': 2.304}, {'end': 97.697, 'text': "And in this div, we're gonna create another div called carousel slide.", 'start': 94.031, 'duration': 3.666}, {'end': 100.321, 'text': 'So this is where the actual images go.', 'start': 98.538, 'duration': 1.783}, {'end': 103.405, 'text': "So we're gonna say image, and we're gonna slide the first one.", 'start': 100.341, 'duration': 3.064}, {'end': 109.194, 'text': "and I'm just gonna duplicate this one so we don't waste so much time.", 'start': 104.91, 'duration': 4.284}], 'summary': 'Creating a carousel container with a carousel slide for images.', 'duration': 25.362, 'max_score': 83.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw83832.jpg'}, {'end': 255.829, 'src': 'heatmap', 'start': 198.244, 'weight': 2, 'content': [{'end': 201.978, 'text': 'Good Now this is where the magic happens.', 'start': 198.244, 'duration': 3.734}, {'end': 204.9, 'text': "We're going to say carousel slide.", 'start': 201.998, 'duration': 2.902}, {'end': 213.306, 'text': "So we're going to select the inner div here, and we're going to just say display flex here and boom.", 'start': 205.561, 'duration': 7.745}, {'end': 218.389, 'text': 'We got all the images, one next to each other.', 'start': 216.248, 'duration': 2.141}, {'end': 221.551, 'text': "And now we're going to add a width 100 to this.", 'start': 218.409, 'duration': 3.142}, {'end': 228.897, 'text': "And we're going to also add, let's add a default height here of 500 pixels.", 'start': 223.915, 'duration': 4.982}, {'end': 242.124, 'text': "Now this doesn't look good now, but when we add a overflow hidden to our container, Everything looks nice all of a sudden.", 'start': 229.477, 'duration': 12.647}, {'end': 246.585, 'text': 'All the images are hidden because we set the width to 100 here on the inner div.', 'start': 242.524, 'duration': 4.061}, {'end': 250.627, 'text': 'So yeah, everything just works.', 'start': 247.766, 'duration': 2.861}, {'end': 251.768, 'text': "It's awesome.", 'start': 251.247, 'duration': 0.521}, {'end': 255.829, 'text': "We're not gonna style these for now because these are just prototypal for now.", 'start': 252.388, 'duration': 3.441}], 'summary': 'Using css, created a carousel with images displayed in a row and hidden overflow, achieving a nice look.', 'duration': 30.653, 'max_score': 198.244, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw198244.jpg'}], 'start': 83.832, 'title': 'Building a carousel container', 'summary': 'Details the process of building a carousel container with five images arranged using css and html, including adding buttons and setting up default styling.', 'chapters': [{'end': 258.81, 'start': 83.832, 'title': 'Building a carousel container', 'summary': 'Details the process of building a carousel container with five images arranged using css and html, including adding buttons and setting up default styling.', 'duration': 174.978, 'highlights': ['Creating a div for carousel container and adding five images with different numbers and file formats The speaker creates a div for the carousel container and adds five images with different numbers and file formats, demonstrating the process of setting up the carousel.', 'Styling the carousel container and carousel slide using CSS to achieve a desired layout The speaker styles the carousel container and carousel slide using CSS, setting the width, margin, and display properties to achieve the desired layout.', 'Setting the default height and overflow hidden property to the inner div to finalize the carousel container appearance The speaker sets the default height and overflow hidden property to the inner div, finalizing the appearance of the carousel container.']}], 'duration': 174.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw83832.jpg', 'highlights': ['Creating a div for carousel container and adding five images with different numbers and file formats', 'Styling the carousel container and carousel slide using CSS to achieve a desired layout', 'Setting the default height and overflow hidden property to the inner div to finalize the carousel container appearance']}, {'end': 459.473, 'segs': [{'end': 319.492, 'src': 'embed', 'start': 291.079, 'weight': 0, 'content': [{'end': 294.163, 'text': 'make a clone out of the first image and the last image.', 'start': 291.079, 'duration': 3.084}, {'end': 301.452, 'text': "And we can do this in JavaScript, but it's gonna take too much time and we're just gonna overcomplicate everything for no reason.", 'start': 294.724, 'duration': 6.728}, {'end': 305.496, 'text': "So we're just gonna make it in our HTML.", 'start': 302.232, 'duration': 3.264}, {'end': 311.463, 'text': "So go back to your HTML and add a image and we're gonna select the last one here.", 'start': 305.536, 'duration': 5.927}, {'end': 315.187, 'text': "So for our first image, it's gonna be the last image again.", 'start': 312.244, 'duration': 2.943}, {'end': 319.492, 'text': "And we're gonna add an ID to this called last clone.", 'start': 315.207, 'duration': 4.285}], 'summary': "In javascript, cloning the first and last images is overcomplicated, so we're doing it in html instead.", 'duration': 28.413, 'max_score': 291.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw291079.jpg'}, {'end': 459.473, 'src': 'embed', 'start': 343.49, 'weight': 1, 'content': [{'end': 348.193, 'text': 'This first image, second, three, four, five, and then it clones the first one again.', 'start': 343.49, 'duration': 4.703}, {'end': 351.128, 'text': 'and we have the last one here again.', 'start': 349.026, 'duration': 2.102}, {'end': 358.753, 'text': "so we ideally want to start on this one, but if we click on the previous button, it's going to smoothly go to this one.", 'start': 351.128, 'duration': 7.625}, {'end': 361.315, 'text': "hope that hope, that's clear.", 'start': 358.753, 'duration': 2.562}, {'end': 365.538, 'text': 'good, okay, so i promise that should be it for html.', 'start': 361.315, 'duration': 4.223}, {'end': 367.92, 'text': 'now we can start working on our javascript.', 'start': 365.538, 'duration': 2.382}, {'end': 380.727, 'text': 'okay, so we are gonna select the the carousel slide, carousel slide document dot query selector,', 'start': 367.92, 'duration': 12.807}, {'end': 385.268, 'text': "and I believe we named this carousel slide if I'm not mistaken.", 'start': 380.727, 'duration': 4.541}, {'end': 388.509, 'text': "Yes, that's correct.", 'start': 387.429, 'duration': 1.08}, {'end': 396.051, 'text': "Good Let's go back here and we're going to say const carousel images.", 'start': 388.969, 'duration': 7.082}, {'end': 398.351, 'text': 'This is going to be all of the images.', 'start': 396.831, 'duration': 1.52}, {'end': 402.852, 'text': "So we're going to say document dot query selector all on this one.", 'start': 399.071, 'duration': 3.781}, {'end': 409.445, 'text': "And we're going to select the carousel slide again, and we're going to say image.", 'start': 404.181, 'duration': 5.264}, {'end': 411.908, 'text': 'Okay So this gives us all the images.', 'start': 409.746, 'duration': 2.162}, {'end': 414.81, 'text': "Okay Let's select the buttons as well.", 'start': 412.948, 'duration': 1.862}, {'end': 422.516, 'text': "So we're going to say const prev button is document dot query selector.", 'start': 415.631, 'duration': 6.885}, {'end': 427.22, 'text': 'And I believe we call this prev button just like that.', 'start': 423.838, 'duration': 3.382}, {'end': 431.324, 'text': 'Yep Good copy.', 'start': 428.942, 'duration': 2.382}, {'end': 436.568, 'text': 'This is next, next.', 'start': 433.447, 'duration': 3.121}, {'end': 440.009, 'text': 'Good Awesome.', 'start': 438.688, 'duration': 1.321}, {'end': 448.61, 'text': 'And now, since we want to start, uh, we want to monitor on which picture we are on.', 'start': 440.869, 'duration': 7.741}, {'end': 450.151, 'text': 'We need some sort of a counter.', 'start': 448.67, 'duration': 1.481}, {'end': 451.651, 'text': "So that's exactly what we're going to do.", 'start': 450.251, 'duration': 1.4}, {'end': 458.453, 'text': "We're going to say counter and I'm going to put let here because we're going to update this and we're going to start on the first image.", 'start': 451.691, 'duration': 6.762}, {'end': 459.473, 'text': "So I'm just going to put one.", 'start': 458.493, 'duration': 0.98}], 'summary': 'Setting up html and javascript for carousel slide with image counters.', 'duration': 115.983, 'max_score': 343.49, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw343490.jpg'}], 'start': 259.25, 'title': 'Creating a javascript carousel', 'summary': 'Discusses adding cloned images in html to create an infinite loop for a carousel, saving time and simplifying the process, before transitioning to working on javascript. it also outlines the javascript setup for selecting carousel elements, including the carousel slide, images, prev and next buttons, and initializing a counter to start on the first image.', 'chapters': [{'end': 367.92, 'start': 259.25, 'title': 'Adding clones for carousel', 'summary': 'Discusses adding cloned images in html to create an infinite loop for a carousel, saving time and simplifying the process, before transitioning to working on javascript.', 'duration': 108.67, 'highlights': ['Adding cloned images in HTML to create an infinite loop for a carousel, saving time and simplifying the process.', 'Transitioning to working on JavaScript to continue the development process.']}, {'end': 459.473, 'start': 367.92, 'title': 'Javascript carousel setup', 'summary': 'Outlines the javascript setup for selecting carousel elements, including the carousel slide, images, prev and next buttons, and initializing a counter to start on the first image.', 'duration': 91.553, 'highlights': ['The chapter discusses the process of selecting carousel elements using JavaScript, including the carousel slide, images, prev and next buttons, and initializing a counter to start on the first image.', "The script demonstrates the use of 'document.querySelector' and 'document.querySelectorAll' to select specific elements within the carousel, ensuring comprehensive control over the carousel functionality.", 'The importance of establishing a counter to track the current image is emphasized, with the counter initialized to start at the first image, providing a clear starting point for the carousel functionality.']}], 'duration': 200.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw259250.jpg', 'highlights': ['Adding cloned images in HTML to create an infinite loop for a carousel, saving time and simplifying the process.', 'The chapter discusses the process of selecting carousel elements using JavaScript, including the carousel slide, images, prev and next buttons, and initializing a counter to start on the first image.', "The script demonstrates the use of 'document.querySelector' and 'document.querySelectorAll' to select specific elements within the carousel, ensuring comprehensive control over the carousel functionality.", 'Transitioning to working on JavaScript to continue the development process.', 'The importance of establishing a counter to track the current image is emphasized, with the counter initialized to start at the first image, providing a clear starting point for the carousel functionality.']}, {'end': 770.777, 'segs': [{'end': 623.473, 'src': 'heatmap', 'start': 516.914, 'weight': 0, 'content': [{'end': 522.195, 'text': 'So this is gonna be 1,000 whatever minus 1,000 whatever times one.', 'start': 516.914, 'duration': 5.281}, {'end': 526.916, 'text': "It's gonna be now, right? So it's gonna move one picture forward.", 'start': 522.475, 'duration': 4.441}, {'end': 532.457, 'text': "And then we're gonna say plus and we're gonna say pixels, just like that.", 'start': 527.856, 'duration': 4.601}, {'end': 534.337, 'text': "So let's see and look at that.", 'start': 532.557, 'duration': 1.78}, {'end': 539.418, 'text': 'We started on our original picture and not on our duplicate one.', 'start': 534.397, 'duration': 5.021}, {'end': 540.599, 'text': 'Good, awesome.', 'start': 539.838, 'duration': 0.761}, {'end': 542.179, 'text': "So that's a good start.", 'start': 541.239, 'duration': 0.94}, {'end': 549.502, 'text': 'Alright, so now we can start adding our button listeners.', 'start': 543.539, 'duration': 5.963}, {'end': 551.983, 'text': "So I'm going to name this button listeners.", 'start': 549.562, 'duration': 2.421}, {'end': 553.983, 'text': "Alright, let's see.", 'start': 553.343, 'duration': 0.64}, {'end': 555.464, 'text': 'Next button.', 'start': 554.144, 'duration': 1.32}, {'end': 558.345, 'text': 'Next button.', 'start': 557.045, 'duration': 1.3}, {'end': 563.467, 'text': 'What am I doing? Next button dot add event listener.', 'start': 559.266, 'duration': 4.201}, {'end': 565.508, 'text': 'And we want to listen on a click.', 'start': 563.727, 'duration': 1.781}, {'end': 568.429, 'text': 'There we go.', 'start': 567.809, 'duration': 0.62}, {'end': 570.13, 'text': "We're going to add a function here.", 'start': 568.649, 'duration': 1.481}, {'end': 577.73, 'text': "And you can do function here if you want like this, but I'm going to do ES six way.", 'start': 571.728, 'duration': 6.002}, {'end': 588.434, 'text': "And here we're going to say carousel slide dot style dot trends.", 'start': 579.231, 'duration': 9.203}, {'end': 590.595, 'text': "We're not going to worry about transition for now.", 'start': 588.454, 'duration': 2.141}, {'end': 598.678, 'text': "Um, actually, yeah, let's add this carousel slide dot transition style.", 'start': 591.876, 'duration': 6.802}, {'end': 599.518, 'text': 'Oh my God.', 'start': 598.858, 'duration': 0.66}, {'end': 600.719, 'text': 'That transition.', 'start': 599.859, 'duration': 0.86}, {'end': 607.054, 'text': 'because we also want to add the transition to this is equal to transform.', 'start': 601.903, 'duration': 5.151}, {'end': 614.248, 'text': "um, let's see 0.4, ease and out.", 'start': 608.644, 'duration': 5.604}, {'end': 623.473, 'text': "you can also make a class and just add the class here and css, if you wish to, i'm just gonna add it here, so we can see everything.", 'start': 614.248, 'duration': 9.225}], 'summary': 'Developing code for image carousel with button listeners and transition styles.', 'duration': 162.71, 'max_score': 516.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw516914.jpg'}, {'end': 770.777, 'src': 'embed', 'start': 741.922, 'weight': 7, 'content': [{'end': 754.132, 'text': 'So for not leaving the container, we can just say for now you can go up here, so up before all of this, and we can just do an if statement.', 'start': 741.922, 'duration': 12.21}, {'end': 760.114, 'text': "So we're gonna say if counter is smaller or equal than zero, then we can just return.", 'start': 754.152, 'duration': 5.962}, {'end': 762.635, 'text': 'So this is basically not gonna do anything.', 'start': 760.614, 'duration': 2.021}, {'end': 770.777, 'text': "Good Actually, we're gonna add this later on because I wanna explain something here.", 'start': 766.275, 'duration': 4.502}], 'summary': 'Using an if statement to check for counter value and return if it is less than or equal to zero.', 'duration': 28.855, 'max_score': 741.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw741922.jpg'}], 'start': 460.763, 'title': 'Creating image carousel and javascript implementation', 'summary': 'Covers creating an image carousel and adding button listeners, including setting column size, sliding images, and appending transformation. it also explains creating a carousel with javascript, including next and previous buttons, transitions, and counter handling, providing a comprehensive guide for building a functional carousel.', 'chapters': [{'end': 551.983, 'start': 460.763, 'title': 'Creating image carousel and adding button listeners', 'summary': 'Explains the process of creating an image carousel and adding button listeners, including setting the column size, sliding the carousel image, and appending transformation to move to the next picture.', 'duration': 91.22, 'highlights': ['Setting the column size to carousel image client width to obtain the original width back.', 'Sliding the carousel to move to the next picture by translating the X and appending the transformation.', 'Starting on the original picture and not on the duplicate one by using the appropriate code.', 'Initiating the process of adding button listeners to the image carousel.']}, {'end': 770.777, 'start': 553.343, 'title': 'Creating a carousel with javascript', 'summary': 'Focuses on creating a carousel with javascript, covering the implementation of next and previous buttons, adding transitions, and handling counter increment and decrement. the code snippets and explanations provide a comprehensive guide for building a functional carousel.', 'duration': 217.434, 'highlights': ['The chapter covers creating a carousel with JavaScript, including implementing next and previous buttons, adding transitions, and handling counter increment and decrement, providing a comprehensive guide for building a functional carousel.', 'The code demonstrates the use of event listeners for next and previous buttons, along with the implementation of counter increment and decrement, offering practical insights into carousel development.', 'The transcript includes explanations on adding transitions to the carousel slide, such as setting transition styles and addressing potential issues, contributing to a thorough understanding of carousel design and functionality.', 'The speaker discusses the use of if statements to prevent leaving the carousel container, ensuring a seamless user experience and providing insights into handling boundary conditions within the carousel implementation.']}], 'duration': 310.014, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw460763.jpg', 'highlights': ['The chapter covers creating a carousel with JavaScript, including implementing next and previous buttons, adding transitions, and handling counter increment and decrement, providing a comprehensive guide for building a functional carousel.', 'The code demonstrates the use of event listeners for next and previous buttons, along with the implementation of counter increment and decrement, offering practical insights into carousel development.', 'The transcript includes explanations on adding transitions to the carousel slide, such as setting transition styles and addressing potential issues, contributing to a thorough understanding of carousel design and functionality.', 'Setting the column size to carousel image client width to obtain the original width back.', 'Sliding the carousel to move to the next picture by translating the X and appending the transformation.', 'Starting on the original picture and not on the duplicate one by using the appropriate code.', 'Initiating the process of adding button listeners to the image carousel.', 'The speaker discusses the use of if statements to prevent leaving the carousel container, ensuring a seamless user experience and providing insights into handling boundary conditions within the carousel implementation.']}, {'end': 959.082, 'segs': [{'end': 902.529, 'src': 'embed', 'start': 772.117, 'weight': 0, 'content': [{'end': 786.62, 'text': "Good Now, the problem is, is how do we loop back to our original picture? Well, for that, we're going to use something called transition end.", 'start': 772.117, 'duration': 14.503}, {'end': 793.545, 'text': "It's basically an event listener that's going to trigger after a transition finishes.", 'start': 786.64, 'duration': 6.905}, {'end': 800.729, 'text': 'So after our transform finishes here, We, that listener basically fires off.', 'start': 794.225, 'duration': 6.504}, {'end': 804.072, 'text': 'So to demonstrate that we can say carousel slide.', 'start': 800.889, 'duration': 3.183}, {'end': 808.476, 'text': "So we're going to select the carousel slide here and we're going to say dot,", 'start': 804.973, 'duration': 3.503}, {'end': 817.523, 'text': "add event listener and we're going to say transition and and we're going to do a function here.", 'start': 808.476, 'duration': 9.047}, {'end': 823.808, 'text': "Good And to demonstrate, I'm just going to say console log fired.", 'start': 818.203, 'duration': 5.605}, {'end': 828.022, 'text': "relatable Okay, let's see.", 'start': 825.7, 'duration': 2.322}, {'end': 834.886, 'text': 'Next So it basically fires every time the animation stops.', 'start': 829.303, 'duration': 5.583}, {'end': 837.528, 'text': 'There we go.', 'start': 837.168, 'duration': 0.36}, {'end': 845.299, 'text': 'So we want that basically so we can reset the transition here.', 'start': 839.136, 'duration': 6.163}, {'end': 854.503, 'text': "So what we're gonna do is reset the transition and if our image is the cloned one,", 'start': 846.339, 'duration': 8.164}, {'end': 858.985, 'text': "we're basically gonna reset the transition and we're gonna jump back to our original picture.", 'start': 854.503, 'duration': 4.482}, {'end': 863.17, 'text': "So I know that sounds confusing, but we're gonna see it visually.", 'start': 859.685, 'duration': 3.485}, {'end': 864.872, 'text': "It's gonna be quite nice.", 'start': 863.31, 'duration': 1.562}, {'end': 868.837, 'text': "So we're gonna say if, and we're gonna say carousel images.", 'start': 865.152, 'duration': 3.685}, {'end': 871.18, 'text': "So we're gonna select all the images here.", 'start': 868.857, 'duration': 2.323}, {'end': 879.916, 'text': "And to select the specific image that we are on, we're gonna say counter, because we have this counter that keeps track of everything.", 'start': 872.671, 'duration': 7.245}, {'end': 892.166, 'text': 'And if the ID here is equal to last clone, okay, we have that clone picture here, this one.', 'start': 881.358, 'duration': 10.808}, {'end': 902.529, 'text': 'So if the ID equals to the last clone, then we want the carousel slide style.transition.', 'start': 894.587, 'duration': 7.942}], 'summary': "Using 'transitionend' event to reset transition and jump back to original picture after animation finishes.", 'duration': 130.412, 'max_score': 772.117, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw772117.jpg'}, {'end': 959.082, 'src': 'embed', 'start': 933.047, 'weight': 5, 'content': [{'end': 943.432, 'text': "So here, if we say counter, equals to let's see, which one is that last clone? We say carousel images.", 'start': 933.047, 'duration': 10.385}, {'end': 946.614, 'text': 'So we select all the images, the length.', 'start': 943.532, 'duration': 3.082}, {'end': 954.279, 'text': "So we get the length and we're going to say minus two, because we have the duplicate, right? We have the duplicate and this one.", 'start': 946.894, 'duration': 7.385}, {'end': 959.082, 'text': "So we're going to say carousel images, the length minus two.", 'start': 954.299, 'duration': 4.783}], 'summary': 'Using javascript, the code selects images for a carousel and adjusts the length by subtracting two.', 'duration': 26.035, 'max_score': 933.047, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw933047.jpg'}], 'start': 772.117, 'title': 'Using transition end event listener and resetting transition', 'summary': 'Explains using the transition end event listener to loop back to the original picture after a transition finishes and resetting transitions by manipulating the transition effect and moving to the previous image position.', 'chapters': [{'end': 837.528, 'start': 772.117, 'title': 'Using transition end event listener', 'summary': 'Explains how to use the transition end event listener to loop back to the original picture after a transition finishes, triggering the event every time the animation stops.', 'duration': 65.411, 'highlights': ['Transition end event listener triggers after a transition finishes. This feature allows for the execution of code after the completion of a transition, providing a way to loop back to the original picture.', 'Using add event listener with transitionend to execute a function. Demonstrates the usage of add event listener to handle the transition end event and execute a function when the transition finishes.', 'The transition end event fires every time the animation stops. Provides information on the behavior of the transition end event, indicating that it fires every time the animation stops.']}, {'end': 959.082, 'start': 839.136, 'title': 'Resetting transition and image jump', 'summary': 'Discusses resetting transitions and jumping back to the original picture by using the clone image and counter to manipulate the transition effect and move to the previous image position.', 'duration': 119.946, 'highlights': ['Using the ID and last clone to reset transition and move back to the original picture position.', 'Utilizing the counter and carousel images to select the specific image and manipulate the transition.', 'Adjusting the length of carousel images to account for duplicates and move to the previous image position.']}], 'duration': 186.965, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw772117.jpg', 'highlights': ['Transition end event listener triggers after a transition finishes. This feature allows for the execution of code after the completion of a transition, providing a way to loop back to the original picture.', 'Using add event listener with transitionend to execute a function. Demonstrates the usage of add event listener to handle the transition end event and execute a function when the transition finishes.', 'The transition end event fires every time the animation stops. Provides information on the behavior of the transition end event, indicating that it fires every time the animation stops.', 'Using the ID and last clone to reset transition and move back to the original picture position.', 'Utilizing the counter and carousel images to select the specific image and manipulate the transition.', 'Adjusting the length of carousel images to account for duplicates and move to the previous image position.']}, {'end': 1228.939, 'segs': [{'end': 1023.898, 'src': 'heatmap', 'start': 960.022, 'weight': 3, 'content': [{'end': 965.446, 'text': "So we update the counter here, and then we're going to just copy this again.", 'start': 960.022, 'duration': 5.424}, {'end': 968.28, 'text': "Now let's see what we have so far.", 'start': 966.96, 'duration': 1.32}, {'end': 973.621, 'text': 'Bam, and look at that.', 'start': 972.321, 'duration': 1.3}, {'end': 977.562, 'text': 'We jumped all the way here.', 'start': 975.001, 'duration': 2.561}, {'end': 983.223, 'text': "Now if we go, it's going to jump again.", 'start': 980.822, 'duration': 2.401}, {'end': 985.583, 'text': "It's going to jump again.", 'start': 983.243, 'duration': 2.34}, {'end': 990.444, 'text': 'Now if we remove this transition, we are going to have this ugly effect.', 'start': 986.103, 'duration': 4.341}, {'end': 994.845, 'text': "So this is why we added, see? This is basically what's happening.", 'start': 991.004, 'duration': 3.841}, {'end': 999.84, 'text': "But we just removed the transition so it doesn't look like that.", 'start': 995.445, 'duration': 4.395}, {'end': 1001.701, 'text': 'Okay, awesome.', 'start': 1000.681, 'duration': 1.02}, {'end': 1003.622, 'text': 'And now we just need to do it.', 'start': 1002.261, 'duration': 1.361}, {'end': 1006.283, 'text': "Now we're gonna fix that bug too, so don't worry.", 'start': 1004.222, 'duration': 2.061}, {'end': 1009.165, 'text': 'There we go.', 'start': 1008.685, 'duration': 0.48}, {'end': 1013.107, 'text': 'And now we need to do this with the other one too.', 'start': 1010.206, 'duration': 2.901}, {'end': 1020.191, 'text': "So I'm just gonna copy this again, remove this, console.log, we don't need it.", 'start': 1013.987, 'duration': 6.204}, {'end': 1023.898, 'text': 'good, good, add this back, okay.', 'start': 1021.297, 'duration': 2.601}], 'summary': 'Updating counters and fixing bugs in the code, ensuring smooth transitions and effects.', 'duration': 63.876, 'max_score': 960.022, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw960022.jpg'}, {'end': 1116.66, 'src': 'embed', 'start': 1053.336, 'weight': 1, 'content': [{'end': 1061.446, 'text': "And if we go the other way too, it's also gonna, again, we still have this bug, but let's see.", 'start': 1053.336, 'duration': 8.11}, {'end': 1063.328, 'text': 'Bam Okay.', 'start': 1062.507, 'duration': 0.821}, {'end': 1066.511, 'text': 'Great So we jump back again.', 'start': 1063.388, 'duration': 3.123}, {'end': 1068.433, 'text': "We're not loading everything here again.", 'start': 1066.551, 'duration': 1.882}, {'end': 1070.496, 'text': "We're just jumping the position.", 'start': 1068.454, 'duration': 2.042}, {'end': 1077.12, 'text': 'Good So now we can finally set overflow hidden.', 'start': 1072.178, 'duration': 4.942}, {'end': 1079.603, 'text': "So it doesn't look disgusting.", 'start': 1078.081, 'duration': 1.522}, {'end': 1087.992, 'text': 'Go back to carousel container over overflow hidden, and it looks nicer now.', 'start': 1080.584, 'duration': 7.408}, {'end': 1089.133, 'text': 'And there we go.', 'start': 1088.592, 'duration': 0.541}, {'end': 1090.094, 'text': 'We have the effect.', 'start': 1089.173, 'duration': 0.921}, {'end': 1093.657, 'text': "Now there's a bug.", 'start': 1092.556, 'duration': 1.101}, {'end': 1097.101, 'text': 'If we click the next button really fast.', 'start': 1094.558, 'duration': 2.543}, {'end': 1100.796, 'text': "We're going to go all the way to this.", 'start': 1099.056, 'duration': 1.74}, {'end': 1106.198, 'text': 'Now, the reason that happens is because we update everything.', 'start': 1101.777, 'duration': 4.421}, {'end': 1116.66, 'text': "So the counter is going off, right? Like it's going off like crazy, but this only jumps after the transition ends, right? So we don't give it time.", 'start': 1106.218, 'duration': 10.442}], 'summary': 'Fixing bugs and improving user experience in carousel code.', 'duration': 63.324, 'max_score': 1053.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw1053336.jpg'}, {'end': 1171.388, 'src': 'embed', 'start': 1144.886, 'weight': 5, 'content': [{'end': 1148.527, 'text': 'So if we check now, click, like, like super fast.', 'start': 1144.886, 'duration': 3.641}, {'end': 1150.467, 'text': 'Actually, I need to go the other way.', 'start': 1149.327, 'duration': 1.14}, {'end': 1153.108, 'text': "I think it's the correct notes that that's not correct.", 'start': 1150.508, 'duration': 2.6}, {'end': 1156.709, 'text': 'Okay Again.', 'start': 1153.968, 'duration': 2.741}, {'end': 1160.02, 'text': "Let's try to debug this.", 'start': 1158.739, 'duration': 1.281}, {'end': 1163.783, 'text': "That's what we do most of the time, right? Nothing's perfect.", 'start': 1161.141, 'duration': 2.642}, {'end': 1166.284, 'text': 'Okay, next button.', 'start': 1164.904, 'duration': 1.38}, {'end': 1168.546, 'text': 'Okay, I made a mistake.', 'start': 1167.565, 'duration': 0.981}, {'end': 1171.388, 'text': 'So this needs to go to previous button.', 'start': 1168.986, 'duration': 2.402}], 'summary': 'Debugging process involves clicking fast, making mistakes, and correcting notes.', 'duration': 26.502, 'max_score': 1144.886, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw1144886.jpg'}, {'end': 1228.939, 'src': 'embed', 'start': 1197.787, 'weight': 0, 'content': [{'end': 1207.169, 'text': "We're going to say if counter is bigger or equal to carousel images, the length.", 'start': 1197.787, 'duration': 9.382}, {'end': 1212.81, 'text': "And again, we're going to say minus one here and we're going to say return again.", 'start': 1207.729, 'duration': 5.081}, {'end': 1216.655, 'text': "Good Let's see.", 'start': 1214.89, 'duration': 1.765}, {'end': 1219.396, 'text': 'Click, click, click, click, click.', 'start': 1218.336, 'duration': 1.06}, {'end': 1222.437, 'text': 'So this works, this one, click, click, click, click, click, click, click.', 'start': 1219.796, 'duration': 2.641}, {'end': 1224.938, 'text': "All right, we don't have that issue anymore, so we can..", 'start': 1222.957, 'duration': 1.981}, {'end': 1228.939, 'text': 'It works, awesome, good.', 'start': 1224.938, 'duration': 4.001}], 'summary': 'Code successfully iterates through carousel images.', 'duration': 31.152, 'max_score': 1197.787, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw1197787.jpg'}], 'start': 960.022, 'title': 'Updating counter and creating carousel effect', 'summary': 'Involves updating a counter and removing a transition effect, as well as creating a carousel effect using javascript. it includes fixing bugs, making further adjustments, handling overflow, and achieving a functional carousel effect.', 'chapters': [{'end': 1023.898, 'start': 960.022, 'title': 'Updating counter and removing transition', 'summary': 'Involves updating a counter and removing a transition effect to improve the functionality of the program, with the speaker assuring to fix bugs and make further adjustments.', 'duration': 63.876, 'highlights': ["The speaker updates the counter to improve the program's functionality.", 'Removal of transition effect is discussed to avoid an undesired visual impact.', 'The speaker addresses the need to fix bugs and make further adjustments.']}, {'end': 1228.939, 'start': 1023.898, 'title': 'Creating carousel effect with javascript', 'summary': 'Discusses creating a carousel effect using javascript, including duplicating the transition, handling overflow, and fixing bugs related to fast clicking, resulting in a functional carousel effect.', 'duration': 205.041, 'highlights': ['The counter is updated to carousel images length minus counter to create the desired effect.', 'Implementing overflow hidden on the carousel container improves the visual appearance.', "A bug related to fast clicking causing unexpected behavior is identified and fixed by implementing conditions to check the counter's value.", 'The process of debugging and identifying mistakes in the code is emphasized to demonstrate the iterative nature of development.']}], 'duration': 268.917, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw960022.jpg', 'highlights': ['The counter is updated to carousel images length minus counter to create the desired effect.', 'Implementing overflow hidden on the carousel container improves the visual appearance.', "A bug related to fast clicking causing unexpected behavior is identified and fixed by implementing conditions to check the counter's value.", "The speaker updates the counter to improve the program's functionality.", 'Removal of transition effect is discussed to avoid an undesired visual impact.', 'The speaker addresses the need to fix bugs and make further adjustments.', 'The process of debugging and identifying mistakes in the code is emphasized to demonstrate the iterative nature of development.']}, {'end': 1480.661, 'segs': [{'end': 1289.472, 'src': 'embed', 'start': 1261.285, 'weight': 0, 'content': [{'end': 1264.507, 'text': 'Awesome here, but you can keep the buttons.', 'start': 1261.285, 'duration': 3.222}, {'end': 1266.889, 'text': 'You can also make your own SVG.', 'start': 1264.547, 'duration': 2.342}, {'end': 1270.512, 'text': "I'm just going to add this now for, so we can finish this fast.", 'start': 1267.109, 'duration': 3.403}, {'end': 1274.395, 'text': 'So just add the font.', 'start': 1271.273, 'duration': 3.122}, {'end': 1275.016, 'text': 'Awesome here.', 'start': 1274.535, 'duration': 0.481}, {'end': 1279.549, 'text': 'And now we need the actual icon.', 'start': 1276.837, 'duration': 2.712}, {'end': 1281.076, 'text': "So I'm going to say font awesome.", 'start': 1279.59, 'duration': 1.486}, {'end': 1284.391, 'text': "Actually, I'm just going to add them because I already made this.", 'start': 1282.031, 'duration': 2.36}, {'end': 1289.472, 'text': "So if we're going to say icons, you're going to find the arrows here.", 'start': 1285.512, 'duration': 3.96}], 'summary': 'Using font awesome icons to find arrows for svg creation.', 'duration': 28.187, 'max_score': 1261.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw1261285.jpg'}, {'end': 1353.278, 'src': 'embed', 'start': 1318.163, 'weight': 1, 'content': [{'end': 1318.904, 'text': 'Good Awesome.', 'start': 1318.163, 'duration': 0.741}, {'end': 1321.086, 'text': 'Now in our CSS.', 'start': 1319.625, 'duration': 1.461}, {'end': 1323.047, 'text': 'So we make things a bit nicer.', 'start': 1321.446, 'duration': 1.601}, {'end': 1325.329, 'text': 'We need to do two things here.', 'start': 1323.627, 'duration': 1.702}, {'end': 1328.291, 'text': 'So I added some basic style here.', 'start': 1326.369, 'duration': 1.922}, {'end': 1330.652, 'text': "I'm going to say previous button.", 'start': 1328.311, 'duration': 2.341}, {'end': 1333.795, 'text': "We're going to say position absolute on this.", 'start': 1331.753, 'duration': 2.042}, {'end': 1341.152, 'text': "We're gonna say top 50, z index 10.", 'start': 1335.469, 'duration': 5.683}, {'end': 1344.213, 'text': 'So this goes on top so we can see it.', 'start': 1341.152, 'duration': 3.061}, {'end': 1347.575, 'text': "I'm gonna say left 5% for this.", 'start': 1344.233, 'duration': 3.342}, {'end': 1351.977, 'text': "Font size, I'm gonna do 30 pixels so it's nice and big.", 'start': 1348.496, 'duration': 3.481}, {'end': 1353.278, 'text': 'Color, white.', 'start': 1352.578, 'duration': 0.7}], 'summary': 'Applying css styles: positioned previous button, top 50, z index 10, left 5%, font size 30px, color white.', 'duration': 35.115, 'max_score': 1318.163, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw1318163.jpg'}, {'end': 1474.772, 'src': 'embed', 'start': 1446.143, 'weight': 2, 'content': [{'end': 1449.384, 'text': 'If you have any questions, make sure to leave it down in the comments below.', 'start': 1446.143, 'duration': 3.241}, {'end': 1454.666, 'text': "Sorry if it took too long, but yeah, that's how you build a simple carousel.", 'start': 1449.844, 'duration': 4.822}, {'end': 1462.529, 'text': 'If you want a challenge, you can also start, you can work on adding those little bubble buttons.', 'start': 1456.267, 'duration': 6.262}, {'end': 1467.491, 'text': "So that's a challenge that I'm going to give you guys if you want to finish.", 'start': 1463.91, 'duration': 3.581}, {'end': 1472.428, 'text': 'In the next video, I might add it in the comments on how I would do it.', 'start': 1468.442, 'duration': 3.986}, {'end': 1474.772, 'text': 'But yeah, hope you enjoyed this video.', 'start': 1472.929, 'duration': 1.843}], 'summary': 'Tutorial on building a simple carousel, with a challenge to add bubble buttons.', 'duration': 28.629, 'max_score': 1446.143, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw1446143.jpg'}], 'start': 1229.699, 'title': 'Enhancing buttons and building carousel', 'summary': 'Includes adding font awesome icons to buttons, emphasizing efficiency, styling css for previous and next buttons, and building a simple carousel with plans for additional guidance.', 'chapters': [{'end': 1317.423, 'start': 1229.699, 'title': 'Adding font awesome icons to buttons', 'summary': 'Focuses on adding font awesome icons to buttons and explains the process of finding and adding the icons, emphasizing the efficiency and speed of the process.', 'duration': 87.724, 'highlights': ['The process of finding and adding Font Awesome icons to buttons is explained, highlighting the efficiency and speed of the process.', 'The speaker demonstrates how to search for specific icons and copy them for use, emphasizing the ease of implementation.', 'Experimenting with the speed of the process is encouraged, allowing for customization and efficiency in adding icons to buttons.']}, {'end': 1445.863, 'start': 1318.163, 'title': 'Styling css for previous and next buttons', 'summary': 'Covers the addition of basic styles to previous and next buttons in css, including setting position, size, color, opacity, and cursor, to enhance the visual appeal of the buttons within the carousel container.', 'duration': 127.7, 'highlights': ['Basic styles added to previous and next buttons The speaker added basic styles to the previous and next buttons, including setting position absolute, top 50, z index 10, left 5%, font size 30 pixels, color white, opacity 0.5, and cursor pointer.', 'Adjusting opacity for visual appeal The speaker mentioned adjusting the opacity of the buttons, initially setting it to 0.5 and later experimenting with higher values, finally opting to remove the opacity adjustment for the desired effect.', "Fixing naming inconsistency The speaker identified and corrected a naming inconsistency for the 'previous' button, referring to it initially as 'preview' and making the necessary adjustment."]}, {'end': 1480.661, 'start': 1446.143, 'title': 'Building a simple carousel', 'summary': 'Demonstrates how to build a simple carousel and challenges viewers to add bubble buttons, with plans to provide further guidance in the next video.', 'duration': 34.518, 'highlights': ['The chapter demonstrates how to build a simple carousel.', 'Viewers are challenged to add bubble buttons to the carousel.', 'The next video will provide guidance on adding bubble buttons.', 'The speaker encourages viewers to leave questions and comments for additional content.']}], 'duration': 250.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcdBOoK3Pfw/pics/KcdBOoK3Pfw1229699.jpg', 'highlights': ['The process of finding and adding Font Awesome icons to buttons is explained, highlighting the efficiency and speed of the process.', 'The speaker added basic styles to the previous and next buttons, including setting position absolute, top 50, z index 10, left 5%, font size 30 pixels, color white, opacity 0.5, and cursor pointer.', 'The chapter demonstrates how to build a simple carousel.']}], 'highlights': ['The chapter covers creating a carousel with JavaScript, including implementing next and previous buttons, adding transitions, and handling counter increment and decrement, providing a comprehensive guide for building a functional carousel.', 'The code demonstrates the use of event listeners for next and previous buttons, along with the implementation of counter increment and decrement, offering practical insights into carousel development.', 'The transcript includes explanations on adding transitions to the carousel slide, such as setting transition styles and addressing potential issues, contributing to a thorough understanding of carousel design and functionality.', 'Adding cloned images in HTML to create an infinite loop for a carousel, saving time and simplifying the process.', 'The chapter discusses the process of selecting carousel elements using JavaScript, including the carousel slide, images, prev and next buttons, and initializing a counter to start on the first image.', "The script demonstrates the use of 'document.querySelector' and 'document.querySelectorAll' to select specific elements within the carousel, ensuring comprehensive control over the carousel functionality.", 'The importance of establishing a counter to track the current image is emphasized, with the counter initialized to start at the first image, providing a clear starting point for the carousel functionality.', 'The process of finding and adding Font Awesome icons to buttons is explained, highlighting the efficiency and speed of the process.', 'The speaker added basic styles to the previous and next buttons, including setting position absolute, top 50, z index 10, left 5%, font size 30 pixels, color white, opacity 0.5, and cursor pointer.']}