title
Build a Touch Slider with HTML, CSS & JavaScript

description
Build a full screen touch slider with HTML, CSS & JavaScript Full Screen Touch Slider Repo: https://github.com/bushblade/Full-Screen-Touch-Slider React Component Repo: https://github.com/bushblade/react-touch-drag-slider YouTube Video Codepen: https://codepen.io/bradtraversy/pen/ExNVwgZ Handmade Knives By Will Adams: https://bushblade.co.uk/ Timestamps: 0:00 - Intro 1:49 - The HTML 3:32 - The CSS 10:57 - The JavaScript

detail
{'title': 'Build a Touch Slider with HTML, CSS & JavaScript', 'heatmap': [{'end': 650.183, 'start': 622.54, 'weight': 0.706}, {'end': 1452.26, 'start': 1415.462, 'weight': 0.934}, {'end': 1678.696, 'start': 1565.012, 'weight': 0.989}], 'summary': 'Learn how to create a full screen touch slider with html, css, and vanilla javascript for smooth transition between slides using mouse and touch events, and test on different devices via chrome devtools. also covers creating a custom knives website with a simple touch slider, styling elements, handling events in javascript, implementing user interaction and smooth animations, and implementing slide snap in javascript for responsive and interactive slide transition.', 'chapters': [{'end': 46.882, 'segs': [{'end': 46.882, 'src': 'embed', 'start': 7.31, 'weight': 0, 'content': [{'end': 13.592, 'text': "Hey, what's going on, guys? In this video, we're going to be creating a full screen touch slider with HTML, CSS and vanilla JavaScript.", 'start': 7.31, 'duration': 6.282}, {'end': 16.473, 'text': 'So as you can see here, I just have an Apple product.', 'start': 13.872, 'duration': 2.601}, {'end': 21.074, 'text': "And if I click and grab and slide it over, it'll go to the next slide and the next one.", 'start': 16.533, 'duration': 4.541}, {'end': 25.356, 'text': 'Now, it works in the browser with mouse events, but it also works with touch events.', 'start': 21.534, 'duration': 3.822}, {'end': 30.797, 'text': "So if you're on a mobile mobile device and take your finger and swipe, it's going to do the same thing.", 'start': 25.796, 'duration': 5.001}, {'end': 36.099, 'text': 'And we can kind of mimic that using the device tab in the Chrome DevTools.', 'start': 30.817, 'duration': 5.282}, {'end': 36.779, 'text': 'All right.', 'start': 36.579, 'duration': 0.2}, {'end': 38.36, 'text': 'And you can use whatever device you want.', 'start': 36.799, 'duration': 1.561}, {'end': 40.86, 'text': "iPhone X doesn't have the chrome around it.", 'start': 38.96, 'duration': 1.9}, {'end': 42.601, 'text': "That's why I'm using the six, seven, eight.", 'start': 40.9, 'duration': 1.701}, {'end': 45.222, 'text': 'But you can test it on different devices.', 'start': 43.401, 'duration': 1.821}, {'end': 46.882, 'text': 'So Galaxy.', 'start': 45.982, 'duration': 0.9}], 'summary': 'Creating a full screen touch slider with html, css and vanilla javascript, working on both desktop and mobile devices.', 'duration': 39.572, 'max_score': 7.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo7310.jpg'}], 'start': 7.31, 'title': 'Full screen touch slider tutorial', 'summary': 'Demonstrates how to create a full screen touch slider with html, css, and vanilla javascript, enabling smooth transition between slides using mouse and touch events, and testing on different devices via chrome devtools.', 'chapters': [{'end': 46.882, 'start': 7.31, 'title': 'Full screen touch slider tutorial', 'summary': 'Demonstrates creating a full screen touch slider with html, css, and vanilla javascript, allowing for smooth transition between slides using both mouse and touch events, and the ability to test on different devices via chrome devtools.', 'duration': 39.572, 'highlights': ['The tutorial showcases creating a full screen touch slider with HTML, CSS, and vanilla JavaScript, enabling smooth transition between slides with mouse and touch events.', 'It demonstrates the functionality of the touch slider, allowing users to swipe on mobile devices for seamless transition between slides and the ability to mimic touch events using Chrome DevTools.', 'The chapter highlights the capability to test the touch slider on different devices through Chrome DevTools, ensuring cross-device functionality and user experience.']}], 'duration': 39.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo7310.jpg', 'highlights': ['The tutorial showcases creating a full screen touch slider with HTML, CSS, and vanilla JavaScript, enabling smooth transition between slides with mouse and touch events.', 'It demonstrates the functionality of the touch slider, allowing users to swipe on mobile devices for seamless transition between slides and the ability to mimic touch events using Chrome DevTools.', 'The chapter highlights the capability to test the touch slider on different devices through Chrome DevTools, ensuring cross-device functionality and user experience.']}, {'end': 392.016, 'segs': [{'end': 85.753, 'src': 'embed', 'start': 48.003, 'weight': 0, 'content': [{'end': 49.263, 'text': "So it's going to work the same way.", 'start': 48.003, 'duration': 1.26}, {'end': 50.163, 'text': 'All right.', 'start': 49.923, 'duration': 0.24}, {'end': 53.624, 'text': 'Now, I want to give credit to Will Adams, who is actually a friend of mine.', 'start': 50.263, 'duration': 3.361}, {'end': 57.966, 'text': 'He helps out a lot with my Udemy Q&A on my Udemy courses.', 'start': 53.664, 'duration': 4.302}, {'end': 59.286, 'text': 'And he created this.', 'start': 58.446, 'duration': 0.84}, {'end': 61.947, 'text': "So I'm going to put his GitHub repo in the description.", 'start': 59.306, 'duration': 2.641}, {'end': 65.367, 'text': 'I did change up the CSS and the images and stuff.', 'start': 62.327, 'duration': 3.04}, {'end': 70.997, 'text': 'You can see he has a demo here and it actually features his own custom knives that he makes.', 'start': 65.788, 'duration': 5.209}, {'end': 74.042, 'text': "So I'm going to put his his website in the description.", 'start': 71.117, 'duration': 2.925}, {'end': 74.903, 'text': 'Really cool stuff.', 'start': 74.142, 'duration': 0.761}, {'end': 80.172, 'text': 'And he also has a react component that is based on that as well, which you can check out.', 'start': 75.304, 'duration': 4.868}, {'end': 81.91, 'text': "I'll have that link in the description.", 'start': 80.609, 'duration': 1.301}, {'end': 85.753, 'text': 'You can install it with NPM and you can use it really easily.', 'start': 81.99, 'duration': 3.763}], 'summary': 'Will adams created a react component, featuring his custom knives, and it can be easily installed with npm.', 'duration': 37.75, 'max_score': 48.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo48003.jpg'}, {'end': 160.684, 'src': 'embed', 'start': 131.385, 'weight': 3, 'content': [{'end': 133.807, 'text': 'And the HTML here in the body is going to be really simple.', 'start': 131.385, 'duration': 2.422}, {'end': 135.788, 'text': "It's a slider container.", 'start': 133.827, 'duration': 1.961}, {'end': 137.529, 'text': 'So class of slider container.', 'start': 136.048, 'duration': 1.481}, {'end': 140.651, 'text': 'And then each slide is going to be wrapped in a class of slide.', 'start': 137.889, 'duration': 2.762}, {'end': 145.334, 'text': "And you can put whatever you want in here, a single image or other content, whatever you'd like.", 'start': 140.671, 'duration': 4.663}, {'end': 150.617, 'text': "I'm going to put an H2 with the name of the product, AirPods, and then an H4 with the price.", 'start': 145.354, 'duration': 5.263}, {'end': 157.442, 'text': "And then let's do the image, which is image one dot PNG.", 'start': 151.638, 'duration': 5.804}, {'end': 160.684, 'text': "And then let's do a link with a class of BTN.", 'start': 158.062, 'duration': 2.622}], 'summary': 'Creating a simple html slider with product details: airpods, price, image, and link.', 'duration': 29.299, 'max_score': 131.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo131385.jpg'}, {'end': 310.839, 'src': 'embed', 'start': 282.309, 'weight': 4, 'content': [{'end': 284.989, 'text': 'Now the next thing we want to style is the slider container.', 'start': 282.309, 'duration': 2.68}, {'end': 286.57, 'text': "So let's do that.", 'start': 285.009, 'duration': 1.561}, {'end': 293.266, 'text': 'So the slider container, this is gonna have a height of 100 VH, which is viewport height.', 'start': 287.782, 'duration': 5.484}, {'end': 295.147, 'text': "So it's gonna take up the whole height of the browser.", 'start': 293.386, 'duration': 1.761}, {'end': 298.77, 'text': "And then let's display this as inline flex.", 'start': 295.628, 'duration': 3.142}, {'end': 303.894, 'text': 'So if I save that, all the slides are now gonna be in a horizontal row.', 'start': 299.491, 'duration': 4.403}, {'end': 310.839, 'text': "In fact, if I uncomment my overflow hidden here, so we have some scroll bars, you'll see that now they're all side by side.", 'start': 303.954, 'duration': 6.885}], 'summary': 'Styling the slider container to have a height of 100 vh and display as inline flex.', 'duration': 28.53, 'max_score': 282.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo282309.jpg'}, {'end': 355.016, 'src': 'embed', 'start': 329.502, 'weight': 5, 'content': [{'end': 334.104, 'text': "but this is the property that we're going to be animating when we get into our javascript.", 'start': 329.502, 'duration': 4.602}, {'end': 341.348, 'text': 'basically, we want to have some events a mouse, you know mouse events as well as touch events for mobile that will manipulate this.', 'start': 334.104, 'duration': 7.244}, {'end': 346.531, 'text': "you'll see, if i put in here like 200 pixels, that'll push it over to the right 200 pixels.", 'start': 341.348, 'duration': 5.183}, {'end': 348.472, 'text': 'if you want to go to the left, it would be a negative.', 'start': 346.531, 'duration': 1.941}, {'end': 351.274, 'text': 'so that will push it to the left 200 pixels.', 'start': 348.872, 'duration': 2.402}, {'end': 355.016, 'text': "but that's going to start at zero and then it's going to be dynamic later on.", 'start': 351.274, 'duration': 3.742}], 'summary': 'Animating property with mouse and touch events, manipulating by 200 pixels.', 'duration': 25.514, 'max_score': 329.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo329502.jpg'}], 'start': 48.003, 'title': 'Creating custom knives website and simple touch slider', 'summary': 'Discusses creating a custom knives website with a demo and a react component by will adams and installation instructions for npm. it also covers creating a simple touch slider using html, css, and javascript, including setting up the html structure, styling with css, and implementing dynamic animation and events in javascript.', 'chapters': [{'end': 85.753, 'start': 48.003, 'title': 'Custom knives website', 'summary': 'Discusses the creation of a custom knives website, featuring a demo with custom knives and a react component, created by will adams and with installation instructions for npm.', 'duration': 37.75, 'highlights': ['Will Adams created a custom knives website with a demo that features his own custom knives.', 'There is a react component based on the custom knives website, available for installation using NPM.', 'The chapter author modified the CSS and images of the custom knives website created by Will Adams.']}, {'end': 392.016, 'start': 85.813, 'title': 'Creating a simple touch slider', 'summary': 'Covers creating a simple touch slider using html, css, and javascript, including setting up the html structure, styling with css, and implementing dynamic animation and events in javascript.', 'duration': 306.203, 'highlights': ['Creating HTML structure for slider with multiple slides The HTML structure includes a slider container and multiple slides for different products, such as AirPods, iPhone 12, and iPad.', 'Styling slider container and slides using CSS CSS styling involves setting the slider container to take up the entire browser height, displaying slides in a horizontal row using inline flex, and applying animations and transitions for smooth slide transitions.', 'Implementing dynamic animation and events using JavaScript JavaScript will be used to implement dynamic animation and events for mouse and touch interactions, including manipulating the transform property for slide movement and changing the cursor style based on user interactions.']}], 'duration': 344.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo48003.jpg', 'highlights': ['Will Adams created a custom knives website with a demo that features his own custom knives.', 'There is a react component based on the custom knives website, available for installation using NPM.', 'The chapter author modified the CSS and images of the custom knives website created by Will Adams.', 'Creating HTML structure for slider with multiple slides The HTML structure includes a slider container and multiple slides for different products, such as AirPods, iPhone 12, and iPad.', 'Styling slider container and slides using CSS CSS styling involves setting the slider container to take up the entire browser height, displaying slides in a horizontal row using inline flex, and applying animations and transitions for smooth slide transitions.', 'Implementing dynamic animation and events using JavaScript JavaScript will be used to implement dynamic animation and events for mouse and touch interactions, including manipulating the transform property for slide movement and changing the cursor style based on user interactions.']}, {'end': 727.335, 'segs': [{'end': 460.225, 'src': 'embed', 'start': 392.036, 'weight': 0, 'content': [{'end': 393.838, 'text': 'So now for the individual slides.', 'start': 392.036, 'duration': 1.802}, {'end': 402.58, 'text': "So for the individual slides, let's set a max height of, we'll do 100 VH, 100 viewport heights.", 'start': 395.618, 'duration': 6.962}, {'end': 408.542, 'text': "And then we're gonna set a width of 100 viewport widths.", 'start': 403.821, 'duration': 4.721}, {'end': 410.523, 'text': 'We want this to take up the entire page.', 'start': 408.722, 'duration': 1.801}, {'end': 415.785, 'text': "And then we're going to display as flex box so that we can align everything.", 'start': 411.303, 'duration': 4.482}, {'end': 421.668, 'text': "Now, as soon as I say display flex, you'll see that the two headings in the image and the link are all now in a row.", 'start': 415.805, 'duration': 5.863}, {'end': 423.308, 'text': "And I don't want that each slide.", 'start': 421.708, 'duration': 1.6}, {'end': 425.809, 'text': 'The content should be going in a column.', 'start': 423.708, 'duration': 2.101}, {'end': 429.871, 'text': "So we're going to set the flex direction to column instead of row.", 'start': 425.869, 'duration': 4.002}, {'end': 431.852, 'text': 'All right.', 'start': 431.472, 'duration': 0.38}, {'end': 435.374, 'text': 'The next thing we want to do is align our items.', 'start': 432.392, 'duration': 2.982}, {'end': 437.254, 'text': "So let's say a line item center.", 'start': 435.474, 'duration': 1.78}, {'end': 439.615, 'text': 'I know that image is kind of big right now.', 'start': 437.775, 'duration': 1.84}, {'end': 440.536, 'text': "We'll fix that in a minute.", 'start': 439.656, 'duration': 0.88}, {'end': 443.77, 'text': "And let's also justify content to the center.", 'start': 441.408, 'duration': 2.362}, {'end': 447.393, 'text': "So it's going to be centered both horizontally and vertically.", 'start': 443.81, 'duration': 3.583}, {'end': 449.795, 'text': "And then we'll just add a little bit of padding.", 'start': 448.034, 'duration': 1.761}, {'end': 450.836, 'text': "We'll do one rem.", 'start': 449.936, 'duration': 0.9}, {'end': 460.225, 'text': "And then I'm also going to add I'm going to take away the select because if I you see, I don't want this to happen.", 'start': 453.058, 'duration': 7.167}], 'summary': 'Setting max height and width for individual slides, aligning items using flexbox.', 'duration': 68.189, 'max_score': 392.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo392036.jpg'}, {'end': 605.068, 'src': 'embed', 'start': 542.976, 'weight': 4, 'content': [{'end': 548.121, 'text': 'Slide H2 and just going to set the font size to be a bit bigger.', 'start': 542.976, 'duration': 5.145}, {'end': 556.989, 'text': "Let's do two point five rem and let's add a little bit of margin bottom just to move the price down a little.", 'start': 548.161, 'duration': 8.828}, {'end': 566.717, 'text': "We'll do point five rem and then for the H4, let's say slide H4 and the font size.", 'start': 557.009, 'duration': 9.708}, {'end': 569.94, 'text': "We're going to make that one point three rem.", 'start': 566.777, 'duration': 3.163}, {'end': 576.562, 'text': 'Good, Now for the button or the link which we want to format as a button.', 'start': 571.499, 'duration': 5.063}, {'end': 585.347, 'text': "we have a class of BTN and we're going to set the background color to 444, which is a bit brighter than the body background.", 'start': 576.562, 'duration': 8.785}, {'end': 587.568, 'text': 'Set the text color to white.', 'start': 586.047, 'duration': 1.521}, {'end': 591.81, 'text': 'Set the text decoration to none.', 'start': 588.489, 'duration': 3.321}, {'end': 592.971, 'text': 'Get rid of that underline.', 'start': 591.85, 'duration': 1.121}, {'end': 597.794, 'text': 'Padding will do one rem top and bottom and 1.5 rem on the sides.', 'start': 593.652, 'duration': 4.142}, {'end': 605.068, 'text': 'And I think that should do it as far as the button.', 'start': 600.985, 'duration': 4.083}], 'summary': 'Set font sizes for h2 and h4, adjust margin and format button styles.', 'duration': 62.092, 'max_score': 542.976, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo542976.jpg'}, {'end': 650.183, 'src': 'heatmap', 'start': 622.54, 'weight': 0.706, 'content': [{'end': 627.552, 'text': "So we'll say when we have the grabbing class on the slider container,", 'start': 622.54, 'duration': 5.012}, {'end': 636.316, 'text': 'we want to take the slide image and we want to transform and scale that down to one is the default.', 'start': 627.552, 'duration': 8.764}, {'end': 639.458, 'text': "we're going to do zero point nine, so it just gets scaled down a little bit.", 'start': 636.316, 'duration': 3.142}, {'end': 643.92, 'text': 'And if we manually add that class here on the slider container,', 'start': 639.858, 'duration': 4.062}, {'end': 650.183, 'text': "you'll see that it gets scaled down and our cursor is now the grabbing so that that'll happen when we click our mouse down.", 'start': 643.92, 'duration': 6.263}], 'summary': 'When the grabbing class is added to the slider container, the slide image is transformed and scaled down to 0.9.', 'duration': 27.643, 'max_score': 622.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo622540.jpg'}, {'end': 714.558, 'src': 'embed', 'start': 679.423, 'weight': 6, 'content': [{'end': 680.923, 'text': "I don't know what that is.", 'start': 679.423, 'duration': 1.5}, {'end': 688.525, 'text': "We're going to use document dot query selector all here because there's more than one slide.", 'start': 681.464, 'duration': 7.061}, {'end': 696.006, 'text': "Remember that's the class of slide and query selector all returns what's called the node list and it's similar to an array.", 'start': 688.765, 'duration': 7.241}, {'end': 706.195, 'text': "What we're going to do is wrap this in array dot from And make sure we add that ending parentheses.", 'start': 696.446, 'duration': 9.749}, {'end': 714.558, 'text': "So array dot from we'll just take an array like objects such as a Dom list and just turn it into an array or from an iterable object.", 'start': 706.355, 'duration': 8.203}], 'summary': 'Using document.queryselectorall to handle multiple slides, converting nodelist to array with array.from.', 'duration': 35.135, 'max_score': 679.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo679423.jpg'}], 'start': 392.036, 'title': 'Styling and selecting elements', 'summary': 'Covers setting up individual slides for web page, setting max height and width, using flexbox for alignment, and centering items. it also includes styling elements in css, adjusting font size and margin, and formatting a button. additionally, it covers selecting and transforming elements in javascript using queryselector and queryselectorall.', 'chapters': [{'end': 437.254, 'start': 392.036, 'title': 'Setting up individual slides for web page', 'summary': 'Explains how to set a max height and width for individual slides, use flexbox to align content in a column, and center the items on the web page.', 'duration': 45.218, 'highlights': ['Setting a max height and width of 100 VH and 100 VW for individual slides to take up the entire page', 'Using flexbox to align content in a column instead of a row', "Aligning items on the web page using the 'align-items: center' property"]}, {'end': 727.335, 'start': 437.775, 'title': 'Styling and selecting elements in css and javascript', 'summary': 'Covers styling elements in css including centering and sizing images, adjusting font size and margin for headings, and formatting a button. it also includes selecting and transforming elements in javascript using queryselector and queryselectorall.', 'duration': 289.56, 'highlights': ['Styling the image to be centered, set maximum width and maximum height The speaker discusses styling the image by setting it to be centered both horizontally and vertically, and setting a max width and max height to take up 60% of its container.', 'Adjusting font size and margin for headings The chapter includes setting the font size for H2 to 2.5 rem and adding a margin bottom of 0.5 rem, while setting the font size for H4 to 1.3 rem.', 'Formatting a button with specific styles The speaker covers formatting a button with a class of BTN by setting the background color, text color, text decoration, and padding to achieve a specific style.', 'Selecting elements in JavaScript using querySelector and querySelectorAll The chapter discusses using document.querySelector to select elements by class and using document.querySelectorAll to select multiple elements, which returns a node list that can be converted into an array using array.from.']}], 'duration': 335.299, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo392036.jpg', 'highlights': ['Setting a max height and width of 100 VH and 100 VW for individual slides to take up the entire page', 'Using flexbox to align content in a column instead of a row', "Aligning items on the web page using the 'align-items: center' property", 'Styling the image to be centered, set maximum width and maximum height', 'Adjusting font size and margin for headings', 'Formatting a button with specific styles', 'Selecting elements in JavaScript using querySelector and querySelectorAll']}, {'end': 1254.289, 'segs': [{'end': 758.703, 'src': 'embed', 'start': 727.335, 'weight': 0, 'content': [{'end': 729.137, 'text': 'So that will put that in that variable.', 'start': 727.335, 'duration': 1.802}, {'end': 733.2, 'text': "Now I'm going to set some global values here, some global variables.", 'start': 729.477, 'duration': 3.723}, {'end': 734.562, 'text': 'This is basically our state.', 'start': 733.22, 'duration': 1.342}, {'end': 738.185, 'text': 'The first one is going to be is dragging, which will be a Boolean.', 'start': 734.962, 'duration': 3.223}, {'end': 740.507, 'text': "It's going to be false by default.", 'start': 738.265, 'duration': 2.242}, {'end': 743.229, 'text': "And that's going to represent if we're actually,", 'start': 741.207, 'duration': 2.022}, {'end': 750.356, 'text': "if we have our finger on it on a mobile device or if we have our mouse click down in the browser and that's going to be set to false.", 'start': 743.229, 'duration': 7.127}, {'end': 752.378, 'text': "Let's have our start position.", 'start': 750.836, 'duration': 1.542}, {'end': 753.238, 'text': "So that's going to be.", 'start': 752.478, 'duration': 0.76}, {'end': 758.703, 'text': 'wherever we click in the browser or wherever we put our finger on the mobile device.', 'start': 754.139, 'duration': 4.564}], 'summary': 'Setting global variables for state: isdragging (false by default) and startposition.', 'duration': 31.368, 'max_score': 727.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo727335.jpg'}, {'end': 818.222, 'src': 'embed', 'start': 794.208, 'weight': 2, 'content': [{'end': 801.23, 'text': "So when we when we do our animation, we're going to use something called a request animation frame, which is it's a method on the window object.", 'start': 794.208, 'duration': 7.022}, {'end': 806.432, 'text': 'And that actually returns a specific ID that we can use to cancel the request frame.', 'start': 801.951, 'duration': 4.481}, {'end': 808.253, 'text': 'So we want a variable for that.', 'start': 806.832, 'duration': 1.421}, {'end': 813.698, 'text': 'And then lastly, we want the current index, which is going to just represent the current slide.', 'start': 808.654, 'duration': 5.044}, {'end': 816.34, 'text': 'So first one will be zero and one, two and so on.', 'start': 813.738, 'duration': 2.602}, {'end': 818.222, 'text': "So that's our state.", 'start': 816.921, 'duration': 1.301}], 'summary': 'Using requestanimationframe method to control animation and manage slide index.', 'duration': 24.014, 'max_score': 794.208, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo794208.jpg'}, {'end': 870.586, 'src': 'embed', 'start': 838.448, 'weight': 4, 'content': [{'end': 841.75, 'text': "And then in here the first thing I want to do we're going to have all of our events in here.", 'start': 838.448, 'duration': 3.302}, {'end': 844.873, 'text': 'But the first thing I want to do is get rid of this effect.', 'start': 842.351, 'duration': 2.522}, {'end': 848.876, 'text': 'If you have an image and you click and drag this happens by default.', 'start': 845.153, 'duration': 3.723}, {'end': 854.52, 'text': "So what we'll do is create a variable called let's call this slide image.", 'start': 849.056, 'duration': 5.464}, {'end': 864.484, 'text': "and set that to the individual slide and then we're going to use query selector because we want to grab the image that's inside of this,", 'start': 855.74, 'duration': 8.744}, {'end': 870.586, 'text': "whatever slide we're on, and then we'll take the slide image and add an event listener and the.", 'start': 864.484, 'duration': 6.102}], 'summary': 'Removing default click and drag effect by creating a variable slide image and using query selector.', 'duration': 32.138, 'max_score': 838.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo838448.jpg'}, {'end': 922.916, 'src': 'embed', 'start': 874.688, 'weight': 1, 'content': [{'end': 886.456, 'text': "and when that happens we're going to run a function And this function will take in an event object and then on that event object we can call prevent default,", 'start': 874.688, 'duration': 11.768}, {'end': 890.157, 'text': 'which is a function and that will just prevent the default behavior.', 'start': 886.456, 'duration': 3.701}, {'end': 894.079, 'text': "So now if I go and I click and move this you'll see I don't get that effect.", 'start': 890.478, 'duration': 3.601}, {'end': 896.42, 'text': "OK so that's the first thing we want to do.", 'start': 894.82, 'duration': 1.6}, {'end': 906.725, 'text': 'Then we want to add both our touch events and also our mouse events because this is going to work both in the browser and on mobile devices.', 'start': 896.58, 'duration': 10.145}, {'end': 912.91, 'text': "So first of all, for our touch events, let's do slide at event listener.", 'start': 907.887, 'duration': 5.023}, {'end': 916.572, 'text': 'And this event is going to be called touch start.', 'start': 913.23, 'duration': 3.342}, {'end': 922.916, 'text': 'So this this is basically when you put your finger on the mobile device, OK, when you just lay it down.', 'start': 917.313, 'duration': 5.603}], 'summary': 'Creating a function to prevent default behavior of touch and mouse events for browser and mobile devices.', 'duration': 48.228, 'max_score': 874.688, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo874688.jpg'}, {'end': 1173.796, 'src': 'embed', 'start': 1144.007, 'weight': 3, 'content': [{'end': 1147.969, 'text': "we only want that to run when we're actually clicking and dragging.", 'start': 1144.007, 'duration': 3.962}, {'end': 1152.893, 'text': "So that's where this is dragging comes in this value right here that we set to false.", 'start': 1148.45, 'duration': 4.443}, {'end': 1166.788, 'text': "So once we touch start, which is either putting your finger on or or clicking the mouse down, let's set is dragging to true, and then on end,", 'start': 1153.613, 'duration': 13.175}, {'end': 1173.796, 'text': "let's set is dragging to false, and then what we can do down here is say if.", 'start': 1166.788, 'duration': 7.008}], 'summary': 'The code sets dragging to true when clicking and dragging, and to false when not dragging.', 'duration': 29.789, 'max_score': 1144.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo1144007.jpg'}], 'start': 727.335, 'title': 'Handling events in javascript', 'summary': 'Covers setting global variables, handling events for slide manipulation, using requestanimationframe for animation, and dragstart event listener. it also discusses touch and mouse events, including touch start, touch end, touch move, mouse down, mouse up, mouse leave, and preventing default behavior and propagation.', 'chapters': [{'end': 874.688, 'start': 727.335, 'title': 'Setting global variables and handling events', 'summary': 'Introduces the process of setting global variables for state management and handling events for slide manipulation, emphasizing the use of requestanimationframe for animation and dragstart event listener.', 'duration': 147.353, 'highlights': ["The chapter emphasizes the importance of setting global variables for state management, including 'isDragging', 'startPosition', 'currentTranslate', 'previousTranslate', 'animationID', and 'currentIndex'.", "It explains the significance of using 'requestAnimationFrame' for animation and the need for a specific ID to cancel the request frame.", "The chapter highlights the use of 'dragstart' event listener to prevent the default effect when clicking and dragging an image within a slide."]}, {'end': 1254.289, 'start': 874.688, 'title': 'Event handling in javascript', 'summary': 'Discusses handling touch and mouse events in javascript, including touch start, touch end, touch move, mouse down, mouse up, mouse leave, and preventing default behavior and propagation, emphasizing the importance of distinguishing between mouse movement and dragging.', 'duration': 379.601, 'highlights': ['The chapter discusses handling touch and mouse events in JavaScript The chapter covers the handling of touch and mouse events in JavaScript, enabling the functionality for both mobile and browser environments.', "The chapter emphasizes distinguishing between mouse movement and dragging It underscores the importance of differentiating between mouse movement and dragging, and introduces the concept of setting a flag 'isDragging' to differentiate between the two actions.", 'The chapter explains preventing default behavior and propagation It explains the usage of event methods like preventDefault and stopPropagation to prevent default behavior and propagation of events in the DOM.']}], 'duration': 526.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo727335.jpg', 'highlights': ["The chapter emphasizes the importance of setting global variables for state management, including 'isDragging', 'startPosition', 'currentTranslate', 'previousTranslate', 'animationID', and 'currentIndex'.", 'The chapter discusses handling touch and mouse events in JavaScript, enabling the functionality for both mobile and browser environments.', "It explains the significance of using 'requestAnimationFrame' for animation and the need for a specific ID to cancel the request frame.", "The chapter emphasizes distinguishing between mouse movement and dragging, introducing the concept of setting a flag 'isDragging' to differentiate between the two actions.", "The chapter highlights the use of 'dragstart' event listener to prevent the default effect when clicking and dragging an image within a slide.", 'The chapter explains preventing default behavior and propagation, detailing the usage of event methods like preventDefault and stopPropagation to prevent default behavior and propagation of events in the DOM.']}, {'end': 1757.257, 'segs': [{'end': 1354.914, 'src': 'embed', 'start': 1307.661, 'weight': 2, 'content': [{'end': 1315.827, 'text': "so I just want to show you if we console log here on that event object that's passed in, we have type and we want to check to see,", 'start': 1307.661, 'duration': 8.166}, {'end': 1320.215, 'text': 'want to say includes And then just pass a string of mouse.', 'start': 1315.827, 'duration': 4.388}, {'end': 1322.396, 'text': "So that'll give us either a true or false.", 'start': 1320.695, 'duration': 1.701}, {'end': 1323.376, 'text': "It'll give us a Boolean.", 'start': 1322.456, 'duration': 0.92}, {'end': 1325.177, 'text': "So if I click you can see I'm getting true.", 'start': 1323.396, 'duration': 1.781}, {'end': 1330.78, 'text': 'But if I go to the mobile device here and click click and hold they should say we get false.', 'start': 1325.677, 'duration': 5.103}, {'end': 1341.084, 'text': "So what we'll do is our start position which is set to zero above is going to depend on this.", 'start': 1332.1, 'duration': 8.984}, {'end': 1344.366, 'text': 'Or I should say the way we get it is going to depend on that.', 'start': 1341.104, 'duration': 3.262}, {'end': 1346.847, 'text': "So we're going to add a ternary here.", 'start': 1345.225, 'duration': 1.622}, {'end': 1354.914, 'text': "So basically saying if we're using the mouse then let's get that with event dot page X that'll give us the X position else.", 'start': 1346.927, 'duration': 7.987}], 'summary': 'Using console log to check event type for mouse and setting start position based on it.', 'duration': 47.253, 'max_score': 1307.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo1307661.jpg'}, {'end': 1452.26, 'src': 'heatmap', 'start': 1400.858, 'weight': 1, 'content': [{'end': 1405.279, 'text': 'Actually, before we do that, this is going to be called elsewhere as well.', 'start': 1400.858, 'duration': 4.421}, {'end': 1408.52, 'text': "So we're going to put this into a specific function.", 'start': 1405.399, 'duration': 3.121}, {'end': 1414.821, 'text': "We're going to call it get position X, pass in the event because we need that to actually get it.", 'start': 1408.54, 'duration': 6.281}, {'end': 1424.004, 'text': "And then we'll create a function down here called get position X, takes in an event, and we're just going to return that.", 'start': 1415.462, 'duration': 8.542}, {'end': 1429.243, 'text': "OK, so that'll do the same thing.", 'start': 1426.437, 'duration': 2.806}, {'end': 1430.525, 'text': 'now for the animation.', 'start': 1429.243, 'duration': 1.282}, {'end': 1449.918, 'text': "we're going to be using something called request animation frame and basically What that does is it tells the browser that we want to perform an animation and also request a call to a specific function to update that animation before the next repaint.", 'start': 1430.525, 'duration': 19.393}, {'end': 1452.26, 'text': 'And you can do whatever kind of animation you want.', 'start': 1450.259, 'duration': 2.001}], 'summary': 'Creating a function to get position x, utilizing request animation frame for browser animation.', 'duration': 28.385, 'max_score': 1400.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo1400858.jpg'}, {'end': 1497.887, 'src': 'embed', 'start': 1452.6, 'weight': 4, 'content': [{'end': 1458.665, 'text': "What we're doing is animating the translate X value because we want this to move along the X axis.", 'start': 1452.6, 'duration': 6.065}, {'end': 1471.146, 'text': "All right now it actually returns an ID that we're going to set to animation ID and we can use that later on to end the animation frame in touch end.", 'start': 1459.451, 'duration': 11.695}, {'end': 1476.913, 'text': "So we're going to set this to request animation frame and the way it works is it takes in a function.", 'start': 1471.586, 'duration': 5.327}, {'end': 1483.698, 'text': "And in that function, which I'm just calling animation, we have to call this again to to basically to keep animating.", 'start': 1477.654, 'duration': 6.044}, {'end': 1486.42, 'text': 'And you could also do this with something like set interval.', 'start': 1484.098, 'duration': 2.322}, {'end': 1488.421, 'text': "But this is it's better performance.", 'start': 1486.46, 'duration': 1.961}, {'end': 1493.104, 'text': "There's actually a really good article that I'm going to paste a link to right here.", 'start': 1488.882, 'duration': 4.222}, {'end': 1494.925, 'text': "It's at CSS tricks dot com.", 'start': 1493.144, 'duration': 1.781}, {'end': 1497.887, 'text': 'And this tells you a lot about this method.', 'start': 1494.966, 'duration': 2.921}], 'summary': 'Animating translate x value using requestanimationframe for better performance.', 'duration': 45.287, 'max_score': 1452.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo1452600.jpg'}, {'end': 1700.469, 'src': 'heatmap', 'start': 1565.012, 'weight': 0, 'content': [{'end': 1568.274, 'text': "Now this we're also going to call this in another place as well.", 'start': 1565.012, 'duration': 3.262}, {'end': 1569.975, 'text': "So we're going to put this in its own function.", 'start': 1568.314, 'duration': 1.661}, {'end': 1575.638, 'text': "So we'll cut that and I'm going to call the function set slider position.", 'start': 1570.515, 'duration': 5.123}, {'end': 1584.462, 'text': "So right under here, let's say function set slider position and just paste that in.", 'start': 1576.638, 'duration': 7.824}, {'end': 1589.543, 'text': "OK, now let's see what I want to do.", 'start': 1586.28, 'duration': 3.263}, {'end': 1591.144, 'text': "This isn't going to do anything yet.", 'start': 1589.603, 'duration': 1.541}, {'end': 1594.067, 'text': 'We want to work on this move right here.', 'start': 1591.225, 'duration': 2.842}, {'end': 1595.989, 'text': "Right now we're just console logging move.", 'start': 1594.127, 'duration': 1.862}, {'end': 1604.276, 'text': "So what we'll do is get rid of this and I'm going to create a variable here called current position.", 'start': 1597.13, 'duration': 7.146}, {'end': 1613.182, 'text': "And we're going to call that get position X because we want to figure out where the mouse is clicking or where the finger is is touching and swiping.", 'start': 1605.376, 'duration': 7.806}, {'end': 1619.086, 'text': 'So this takes in event and we have to pass in event here.', 'start': 1613.722, 'duration': 5.364}, {'end': 1624.911, 'text': "OK, so that'll get the current position, and then we want to set the current translate value, because, remember,", 'start': 1620.47, 'duration': 4.441}, {'end': 1628.613, 'text': "that's what that's the value that this animation depends on.", 'start': 1624.911, 'duration': 3.702}, {'end': 1630.053, 'text': 'is that current translate?', 'start': 1628.613, 'duration': 1.44}, {'end': 1641.457, 'text': 'So we want to set that to whatever the previous translate is, which right now would be zero, zero by default, and then add the current position,', 'start': 1630.593, 'duration': 10.864}, {'end': 1644.458, 'text': 'and then we want to just take away whatever the start position is.', 'start': 1641.457, 'duration': 3.001}, {'end': 1651.049, 'text': 'OK, so now if I come over here and I click and I drag and see, I can I can actually move this.', 'start': 1645.947, 'duration': 5.102}, {'end': 1655.731, 'text': "OK, so it's animating that translate property.", 'start': 1651.069, 'duration': 4.662}, {'end': 1664.815, 'text': 'Now we want this to end when we either take our our mouse, our mouse button goes up or we take our finger off.', 'start': 1656.992, 'duration': 7.823}, {'end': 1668.897, 'text': "So that's going to be in touch end.", 'start': 1666.115, 'duration': 2.782}, {'end': 1678.696, 'text': 'And the way we can end a request frame is with cancel animation frame, or I should say animation frame, not request frame,', 'start': 1669.637, 'duration': 9.059}, {'end': 1684.883, 'text': 'and then we pass in the animation ID which was set right here.', 'start': 1678.696, 'duration': 6.187}, {'end': 1688.307, 'text': "OK so that'll officially cancel it whenever we let go.", 'start': 1685.604, 'duration': 2.703}, {'end': 1694.744, 'text': 'Now I want to apply that grabbing class.', 'start': 1688.327, 'duration': 6.417}, {'end': 1700.469, 'text': 'So when I click and hold we get the grabbing cursor also the image scales down a bit.', 'start': 1695.085, 'duration': 5.384}], 'summary': 'Creating a function to set slider position and enable dragging and animation for a web element.', 'duration': 59.012, 'max_score': 1565.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo1565012.jpg'}], 'start': 1254.829, 'title': 'Implementing user interaction and smooth animations', 'summary': 'Covers implementing touch and mouse events for drag and drop functionality, improving user experience. it also explains animating the translate x value using request animation frame for smooth performance and provides resources for further information.', 'chapters': [{'end': 1429.243, 'start': 1254.829, 'title': 'Drag and drop touch and mouse events', 'summary': 'Covers the implementation of touch and mouse events for drag and drop functionality, including determining start position based on the type of input device and the creation of a specific function to handle this functionality, aiming to improve user experience and interaction.', 'duration': 174.414, 'highlights': ['The implementation of touch and mouse events for drag and drop functionality, including determining start position based on the type of input device, is the key focus of the chapter, aiming to improve user experience and interaction.', 'The chapter emphasizes the creation of a specific function called get position X to handle the start position functionality, ensuring a modular and maintainable codebase.', 'The chapter also discusses the use of a ternary operator to differentiate between mouse and touch events, ensuring the appropriate start position is obtained for a consistent user experience.', 'The importance of console logging and checking event types to determine the input device (mouse or touch) and obtain the corresponding start position is highlighted for effective event handling.']}, {'end': 1757.257, 'start': 1429.243, 'title': 'Animating translate x value with request animation frame', 'summary': 'Covers the use of request animation frame to animate the translate x value, ensuring smooth performance and providing a link to a resource for further information. it also explains the use of canceling animation frame and adding a grabbing class for touch events.', 'duration': 328.014, 'highlights': ['The chapter covers the use of request animation frame to animate the translate X value The chapter explains how request animation frame is used to animate the translate X value, ensuring smooth performance for the animation.', 'Providing a link to a resource for further information A link to a resource at CSS tricks dot com is provided for further information on the request animation frame method.', 'Explaining the use of canceling animation frame and adding a grabbing class for touch events The chapter explains the use of canceling animation frame with cancel animation frame and adding a grabbing class for touch events to provide a smooth user experience.']}], 'duration': 502.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo1254829.jpg', 'highlights': ['The implementation of touch and mouse events for drag and drop functionality is the key focus of the chapter, aiming to improve user experience and interaction.', 'The chapter emphasizes the creation of a specific function called get position X to handle the start position functionality, ensuring a modular and maintainable codebase.', 'The chapter also discusses the use of a ternary operator to differentiate between mouse and touch events, ensuring the appropriate start position is obtained for a consistent user experience.', 'The importance of console logging and checking event types to determine the input device (mouse or touch) and obtain the corresponding start position is highlighted for effective event handling.', 'The chapter covers the use of request animation frame to animate the translate X value, ensuring smooth performance for the animation.', 'Explaining the use of canceling animation frame and adding a grabbing class for touch events to provide a smooth user experience.', 'Providing a link to a resource at CSS tricks dot com for further information on the request animation frame method.']}, {'end': 2088.65, 'segs': [{'end': 1956.904, 'src': 'embed', 'start': 1927.098, 'weight': 1, 'content': [{'end': 1932.624, 'text': 'Now we basically want to set the position by whatever the whatever the index of the slide.', 'start': 1927.098, 'duration': 5.526}, {'end': 1935.646, 'text': 'So we have zero one two in our case because we have three slides.', 'start': 1932.644, 'duration': 3.002}, {'end': 1940.871, 'text': 'So we have a function here called set position by index.', 'start': 1936.067, 'duration': 4.804}, {'end': 1949.459, 'text': "And let's go down here and we're going to create that function set position by index.", 'start': 1941.832, 'duration': 7.627}, {'end': 1956.904, 'text': "and we're gonna set the current translate property because that's what is being passed in here.", 'start': 1951.545, 'duration': 5.359}], 'summary': 'Function sets position by slide index, with 3 slides.', 'duration': 29.806, 'max_score': 1927.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo1927098.jpg'}, {'end': 2077.466, 'src': 'embed', 'start': 2050.074, 'weight': 0, 'content': [{'end': 2053.078, 'text': 'So this just kind of mimics if you were to touch it with your finger.', 'start': 2050.074, 'duration': 3.004}, {'end': 2056.481, 'text': "OK, we can't go over anymore because there's only three slides.", 'start': 2053.098, 'duration': 3.383}, {'end': 2057.641, 'text': "We can't go over anymore.", 'start': 2056.501, 'duration': 1.14}, {'end': 2062.966, 'text': "Good So that's yeah, that's pretty much it.", 'start': 2058.382, 'duration': 4.584}, {'end': 2064.728, 'text': 'And I think this is a cool little project.', 'start': 2063.107, 'duration': 1.621}, {'end': 2066.248, 'text': 'Hopefully you learn something from it.', 'start': 2064.788, 'duration': 1.46}, {'end': 2072.315, 'text': "If you're an advanced JavaScript developer, you probably knew all this, but it's fun little project anyway.", 'start': 2067.09, 'duration': 5.225}, {'end': 2077.466, 'text': "If you're new to JavaScript and a lot of this didn't make sense, don't worry about it.", 'start': 2073.284, 'duration': 4.182}], 'summary': 'Demonstration of a simple project with limited slides and advice for beginners.', 'duration': 27.392, 'max_score': 2050.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo2050074.jpg'}], 'start': 1757.277, 'title': 'Implementing slide snap in javascript', 'summary': 'Explains the process of implementing slide snapping in javascript, including checking the movement distance, updating the current index, and setting the slide position accordingly, resulting in a responsive and interactive slide transition for a total of three slides.', 'chapters': [{'end': 2088.65, 'start': 1757.277, 'title': 'Implementing slide snap in javascript', 'summary': 'Explains the process of implementing slide snapping in javascript, including checking the movement distance, updating the current index, and setting the slide position accordingly, resulting in a responsive and interactive slide transition for a total of three slides.', 'duration': 331.373, 'highlights': ['The chapter explains the process of implementing slide snapping in JavaScript It covers the detailed steps to enable slide snapping functionality in a JavaScript-based application.', 'Updating the current index based on movement distance and slide position The script checks the movement distance and updates the current index accordingly, ensuring smooth transition between slides.', "Setting the slide position based on the current index and window width The function 'set position by index' sets the position of the slide based on the current index and window width, resulting in a responsive and interactive slide transition."]}], 'duration': 331.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5bxFSOA5JYo/pics/5bxFSOA5JYo1757277.jpg', 'highlights': ['The chapter explains the process of implementing slide snapping in JavaScript It covers the detailed steps to enable slide snapping functionality in a JavaScript-based application.', 'Updating the current index based on movement distance and slide position The script checks the movement distance and updates the current index accordingly, ensuring smooth transition between slides.', "Setting the slide position based on the current index and window width The function 'set position by index' sets the position of the slide based on the current index and window width, resulting in a responsive and interactive slide transition."]}], 'highlights': ['The tutorial showcases creating a full screen touch slider with HTML, CSS, and vanilla JavaScript, enabling smooth transition between slides with mouse and touch events.', "The chapter emphasizes the importance of setting global variables for state management, including 'isDragging', 'startPosition', 'currentTranslate', 'previousTranslate', 'animationID', and 'currentIndex'.", 'The implementation of touch and mouse events for drag and drop functionality is the key focus of the chapter, aiming to improve user experience and interaction.', 'The chapter explains the process of implementing slide snapping in JavaScript It covers the detailed steps to enable slide snapping functionality in a JavaScript-based application.']}