Hi everybody, welcome everyone back to loondevs youtube channel. In this video, let's create an extremely beautiful slider together, using extremely simple HTML, CSS and JavaScript code. First, let's look at the results of this project. In slider. There will always be a large image displayed.
Along with that, there will be corresponding content pieces for it. Below there will be a list of thumbnail images representing the items. In addition, there will be a horizontal bar used to count down the animation runtime.
When clicking the next button. The thumbnail image will be enlarged and become the active image on the slider. An extremely beautiful effect.
Besides, the corresponding content is also displayed with a blur effect. If now, I click the back button. Large images in the slider will be scaled down.
It will then be moved into the thumbnail images list area. At this time, another image will be activated instead. And other corresponding pieces of content also appear.
Additionally, we will be able to continue clicking the next or back button forever without ever running out of sliders. Because this slider is designed to form a loop that never ends. It doesn't stop there.
Even if you don't press the button. After 7 seconds, this slider will automatically run to display the next image. Final.
This design has been edited so that it can work well on all different screens such as. PC, Laptop, iPad and Mobile. If people find this project interesting. Don't forget to like and subscribe to the channel to continuously update new videos and new ideas every day. Thanks everyone.
Now let's get started. I have prepared some images to create sliders with the theme of animals. I will send you the link to use these images if everyone wants to use them.
Now, I will create 3 files. HTML CSS JavaScript Then proceed to embed the CSS and JavaScript paths into the HTML file. And this is my website currently. The first thing I need to do is create the header.
In the header there will be a navigation with three links. Home, Contacts and Info. I will proceed with the CSS for this section before we move on to the main task of designing the slider. Font is also an extremely important factor that determines whether your design is beautiful or not. I will go to, Google Fonts, to choose a more beautiful font.
The font I want to use is Poppins. Here, you can choose the font weights you will use in the project. or you can choose all of them like me. Then, click Import.
Copy this line of code and paste it at the top of your CSS file. Then at Body. Declare Font Family.
Poppins to use this new font. And it worked. I keep giving it a black background color. White color. Margin.
I will give it a width size when accessed on devices with large screens of 1140 pixels. As for devices with smaller screens. Its maximum size will be 80% of the screen.
Margin. Auto to put the header in the middle. Height.
50px. Use Flex and Align item. Center to move the menu to the middle of the row.
As for the ingredients in the menu. Use margin right to create spacing. And that's all the CSS for the header. Now we will come to the main task of creating a slider.
I have a carousel class, it will contain the entire content of the slider. The first component is the sliders list of items. They will be in the class list. For each item, they will include. One image.
One piece of content includes. Author name, project name, topic, Description and Buttons. These are just sample content, you can create other content as you like.
Then I will create 3 more items similar to this one. For each item there will be different images and content. We will now proceed to write the first lines of CSS for the carousel. With Width and Height, I will make it equal to the size of the screen. Overflow.
Hidden to remove content outside the frame. Now, I want to put this carousel class at the top of the page but it is currently occupied by the header. So pay attention to this paragraph.
Our header has a height of 50 pixels. So in the carousel, I just declare margin top, minus 50 pixels to move it up. So it's already on top of the page.
However, the header has been covered by the carousel so it cannot be seen. So now, in header, use position combined with z-index to make the header overlap the carousel class. with the rule that the element with the larger Z index will be placed on top of the other element.
Next are the items inside. I want them to overlap each other so I will use Position, Absolute. By default, it will be positioned according to the body.
If you want it to align the position according to the Carousel class. Let's add Position to this class. At this time, the items will be separated from the top, left, bottom, and right margins of the Carousel class with a value of zero. You can also write more concisely using Inset. It will have the same result.
The images inside will be the same size as the items themselves. At this time, the images will appear distorted. Use Object Fix. Cover to avoid this. With Class content inside each item.
Use Position. Absolute to move it. I want it to move to a position 20% away from the top of the item.
Width on large screens will be 1140 pixels. For smaller screens, the width will be 80%. Use Left, 50% and Translatex, minus 50%, to center this element.
Add Padding Right, 30% to shrink the element. Note that a class that declares width combined with padding needs to declare Box Sizing. Border Box to not change the size of the width.
Color the text white and create a shadow for the text to help the content stand out more. Go to each content inside. First as the author. Highlight the subject.
And set the distance between words to be 10 pixels. For title and topic. Highlight it boldly. The specified letter size is 5em. Line spacing is 1.3em.
As for the topic class, I'll use the text as the title. I will give it orange to stand out more. Finally, there is a list of buttons.
Use Display. Grid to divide columns. I will divide it into two equal columns of 130 pixels. The height of each button is 40 pixels.
The distance of the two buttons is 5 pixels. Margin Top. L20 pixels.
With each button, I erase the border. Make the background white. The spacing is 3 pixels.
Font family. Poppins. Font weight. 500. But with the second button, I'll give it a transparent background color. Accompanied by that, the text color and border color are white.
The next component we will make is the list of thumbnail images. I will create a thumbnail class. In the thumbnail there will be many items. Each item will have images and content corresponding to each item in the class list. So if in the class list there are 4 items.
So in the thumbnail class there will also be 4 items. With class thumbnail. I keep using position.
Absolute to move its position. It will be 50 pixels from the bottom of the carousel class. And 50% left.
Width. Max content, so it will scale according to the content inside. Z index so that it overlaps the items in the class list.
Display. Flex so that the items inside are in the same row. Gap.
Is the distance of items. With items inside thumbnails. I set the width to 150 pixels. Height. 220 pixels.
I set the width to 150 pixels. Height. 220 pixels.
Flex Shrink. 0 so that the size does not shrink on small screens. Position. Relative so that the content inside can rely on it to move position.
The image inside the item will be the same size as that item. Add the object fix. Cover attribute to prevent the image from breaking.
With content. Use Position. Absolute to move the position. The distance from the bottom.
left and right of the class item is 10 pixels respectively. Finally, the class title will be bolded to make it stand out. And that's the CSS for the thumbnail image.
Next will be two buttons used to navigate the slider transition. I will create a class arrows. Inside there will be two buttons with id's previous and next. CSS side.
To move the position, we will use position, absolute. The top distance of the carousel class is 80%. Right is 52%.
Width has a value of 300 pixels. Maximum is 30%. Use display.
Flex so that the two buttons are always in the same row. With a distance of 10 pixels. With each button.
Maximum width and height is 40 pixels. Use border radius. 50% to create a circle.
The background color is white but blurred. Border. None.
Font family. Monospace. Color white. Bold. And large size.
Transition to create a changing effect when the user hovers over it within 0.5 seconds. Specifically, when the user hovers over the button. I will change the background color and text color for this button.
So that is the basic frame of this design. Now we will go into details. In this design.
I will stipulate that the item that is in the first position will always be the item that is in active state. So to make the first item always appear. I will give it a Z index so that it overlaps all other items. And the item you are seeing on the screen is the first item. With the contents of the first item.
I will create an animation effect to make it appear more beautiful. As follows. The contents inside are.
Author, Title, Topic, Description and Buttons. Initially they will be shifted down 50 pixels. Use 20 pixel blur.
And Opacity 0 to hide it. At this point, I run an animation called Show Content. Specifically, I will use the Animation Show Content will display content with opacity, 1. Blur is 0 to clearly see the content.
And Translate Y equals 0 to return the content to its original position. The effect is quite nice. However, I will intentionally let the following content display 0.2s slower than the previous content to create a more fancy effect by using Animation Delay. Our two buttons have been hidden for some time. That's because when the first item is activated, it overlaps these buttons.
So on the button, I will make its Z index higher than the first item so it will be displayed. Next. We will create an effect for the slider when the user clicks on the next button.
Basically, when the user clicks on the next button. I will assign the carousel class 1 next class. Imagine this. When the user clicks the next button. The thumbnail image in the first position will be enlarged to a large image.
So in CSS, at the moment the user presses the next button. I return to the image located in the first item. I resize it by thumbnail image.
And move it to the position of the first thumbnail image. So that these two images overlap each other. At this point, I run an animation called show image.
In show image, I changed the image's size and position back to the original. When the user looks at it, it will feel like the thumbnail image has been enlarged. We have deliberately deceived the user's eyes into thinking that this thumbnail image has been enlarged.
So when it zooms in, this thumbnail image should no longer be here. That is, when an image is activated. Then its thumbnail image must move to the end like this. So from the beginning, The first thumbnail item should be placed at the end like this.
And this is it. It was pushed out last. Because when we press next button. The list of thumbnail images has had their position changed.
Specifically, the first thumbnail image has moved to the last. Then I will create an animation effect for the thumbnail image at the last position to make it appear more beautiful. As follows.
When the user presses the next button. I call the item thumbnail at the last position. Give Width. 0 to hide it.
Overflow. Hidden to make the text outside also disappear. At this point, I proceed to run an animation show thumbnail.
In this animation, I changed its width back to the original. It has not stopped here. With class thumbnail, which contains all thumbnail images. When the user clicks next I will also move it 150 pixels to the left.
Then run an animation to move it back to its original position. And here is the result. Next is when the user presses the back button.
Then in the carousel class, a class named previous is added. We know that the first item is always the active item. So that means the second item is the item that has just been deleted from the active state.
So when the user presses the back button. I'll point to the image of the second item to create the disappearing effect. As follows. In order to initially be able to see the second item, we must make the Z index of the second two items higher than the first item. The image in this second item will initially have the same size and position as a normal active item.
However, this time it will run an out image animation. In out image. I'll scale this image down to the size of the thumbnail image. Then move it to the position of the first thumbnail item. If like when the user clicks the next button.
Then we will create animation for the final thumbnail. So when the user presses the back button. Let's do the opposite. We will animate the first thumbnail image. So when the user presses the previous button.
Points to the first thumbnail item. Set width to 0 to hide it. Then run the show thumbnail animation to display it. And it worked.
However, at this time the content of the second item is overriding the content of the currently active item. So I had to create an animation to hide it. As follows.
When the user presses the back button, I refer to the content inside the content including, author, title, topic, description and buttons. To run an animation named out content. In this animation. Use transform to move it. Blur to blur it.
And opacity to hide it. If you want it to move up, just change 150 to minus 150. It has been working fine. Besides, when the user presses the next or back button, during the slider process, the animation is performed.
I will not let the user click this button until the animation runs parallel. By using pointer event. None.
The last element I want to add to this slider, is a time class. This class is used to check the running time of an animation. As follows.
I use position. Absolute to shift its position. Give the background an orange color to make it stand out. It will initially have width 0. However, when the user presses next or previous button, I will change its width to 100% so users can see it. Then I will run an animation.
In this animation, width will gradually decrease until it reaches 0 to signal that the slider animation is complete. That's all the code for the animation I want. In HTML. I will delete this previous class.
Because it will only appear here when the user presses the previous button. Before working with JavaScript. Try testing it with other screen sizes.
What will this slider look like? I find most other screens are fine except mobile. So we will make mobile responsive for it. First is the content. I will remove the original padding right and replace it with zero.
Next is the title. I will also shrink the text so that it fits the mobile screen. So that is the responsive process.
Now we will go through JavaScript to make this project actually run. First I need to call back HTML elements that I need to work with JavaScript. The first is the next button.
Next is the previous button. Class carousel. Class List, which contains items.
And the Thumbnail Class, which contains a list of thumbnail images. When the user clicks the Next button. I will run a function with a variable whose value is Next.
In Function Show Slider. First I will get the list of all slider items. And list of thumbnail images.
Let's review this principle. We default to the item in the first position as the active item, currently the red item. So when the user clicks next, The next orange item will be replaced in the first position.
So what about this red item? It cannot stand here, because the orange item is the top item. So I will move this first item to the last position.
That's the principle when clicking the next button. So now, if the user clicks on the next button. I will use append child to move the first item to the end of the row.
At this point the second item will become the first item. Everyone can see it work. Many people always think that a pen child will create more elements rather than move them. In fact, when you use a pen child on an existing DOM object, here item slider, its function is just to move the position. I will also use a pen child to move the first thumbnail image to the end.
Then add the next class to the carousel class to run the corresponding animation. It worked. Now if I specify that the animation when the user presses the next button should run for 3 seconds, that is 3000 milliseconds.
Then I will create another runTimeout variable to use the setTimeout function. setTimeout will remove the next class from the carousel class after 3 seconds. The use of clearTimeout is to ensure that each time the show slider function is run, The countdown time will always start from the beginning. So if the user clicks on the previous. I will also run the show slider function but pass in a previous value.
Imagine it like this. Initially I have a slider with the active position being a yellow item. So when the user presses the previous button.
The previous item will be moved to the active position. Specifically here will be the red item. Right.
But if now, I continue to press the previous button. But in front of the red item there is no other item. So at this point it will take the last item and put it on top.
And put it into active state. That is the principle for this previous button. So now, in case the user clicks on the previous button.
I will move the last item to the first position using the prepend function. With the variable position last item being the last item position. Likewise, I'll also move the last thumbnail image to the first position.
The operating principle of prepend in this case is the same as append child, it only changes position and does not generate new elements. Then, I added the previous class to the carousel class so that the system runs the animation for this case. And will also delete the previous class after 3 seconds.
so our previous and next buttons are working fine. If you want our slider to be able to automatically change the active position without pressing a button, then continue watching this paragraph. I created a variable time auto next to specify the time the slider will run automatically. And an auto run variable to write content for this action. Use clear timeout to ensure that each time the slider runs, the 7 second count will start again from the beginning.
In autorun variable, I use set timeout function. To specify that the system will automatically click the next button after 7 seconds. It worked. However, it is not correct.
This autorun behavior is only called when at least once the show slider function is run. And this show slider function only runs when the user presses the previous or next button. So from the beginning, let's write the set timeout content outside the show slider function. So that it can run as soon as the website loads.
this is the entire content of this project if anyone has any questions please leave a comment and i will answer don't forget to subscribe to the channel to follow new videos thank you very much see you again in the next video bye bye