How to Create Image Slider in HTML, CSS & JS - Step by Step | JavaScript Projects

Aug 15, 2023

How to Create Image Slider in HTML, CSS & JS - Step by Step | JavaScript Projects

In this video, learn How to Create an Image Slider in HTML, CSS \u0026 JS - Step by Step | JavaScript Projects. Find all the videos of the JavaScript Projects in this playlist:    • JavaScript Project Beginners to Advan…

💎 Get Access to Premium Videos and Live Streams:    / @wscubetech

WsCube Tech is a leading Web, Mobile App \u0026 Digital Marketing company, and institute in India.

We help businesses of all sizes to build their online presence, grow their business, and reach new heights.

👉For Digital Marketing services (Brand Building, SEO, SMO, PPC, SEM, Content Writing), Web Development and App Development solutions, visit our website: https://www.wscubetech.com/

👉Want to learn new skills and improve existing ones with in-depth and practical sessions? Enroll in our advanced online courses now and make yourself job-ready: https://courses.wscubetech.com/s/store

All the courses are job-oriented, up-to-date with the latest algorithms and modules, fully practical, and provide you hands-on projects.

👉 Want to learn and acquire skills in English? Visit WsCube Tech English channel: https://bit.ly/2M3oYOs

📞 For more info about the courses, call us: +91-7878985501, +91-9269698122

✅ CONNECT WITH THE FOUNDER (Mr. Kushagra Bhatia) -

👉 Instagram - https://www.instagram.com/kushagrabha…
👉 LinkedIn - https://www.linkedin.com/in/kushagra-…

Connect with WsCube Tech on social media for the latest offers, promos, job vacancies, and much more:

► Subscribe: http://bit.ly/wscubechannel
► Facebook: https://www.facebook.com/wscubetech.i…
► Twitter: https://twitter.com/wscubetechindia
► Instagram: https://www.instagram.com/wscubetechi…
► LinkedIn : https://www.linkedin.com/company/wscu…
► Youtube:    / wscubetechjodhpur
► Website: http://wscubetech.com
-------------------------------------| Thanks |--------------------------
#JavaScript #JavaScriptProjects #ImageSlider

Content

0 -> Hello guys! In this video we are going to talk about how to create

3.18 -> custom slider with the help of HTML, CSS and Javascript.

12.05 -> We are going to make some sliders like this. I have kept basic UI because I am going to explain the main logic.

19.9 -> This type will create a slider on which the user can click on Next and Previous

25.08 -> and the images will keep changing. I have done the basic setup. Index.html file is there. We have made CSS & JS files.

32.91 -> This is a CSS file. This is app.js. First, we write the code of the CSS. I reset some CSS like padding: 0 & margin: 0.

43.17 -> Margins and paddings should be nothing. In box-sizing, keeps the border box.

46.86 -> This has become our basic stuff. Now I will create the main div; its width will be 70%, 70% of the entire screen.

58.86 -> Its height will be 500px, I am also applying box-shadow, 0px 0px 3px grey. Come to index.html

72.73 -> and create a div. Now I open it on the live server from vscode, and you can see that a div is created in this way.

81.79 -> A section has been created. What shall we do now? Now we will give it a margin from the top of 100px.

92.53 -> Now it will come down from the top, and here you will give margin-auto so that it becomes auto from the X and Y-axis

101.03 -> i.e., it comes in the middle. So now this section is ready. I make it a little smaller so that its visibility is not hidden.

113.47 -> This is part of our slider i.e. it is the main container of the slider

119.2 -> in which the images are going to slide. Now here we come. You must have thought many times

124.69 -> that how sliders are made, then you will also understand today. This is a straightforward concept. You posted images.

130.24 -> What I have to do I have to put a class inside the image called a slide. This is a slide.

136.3 -> And I want to have four slides like this.

141.82 -> Now we will take some random images. So I go to Google and write

147.16 -> 'lorem ipsum images.' 'Picsumphotos' is a website, you have to go there and from there

154.21 -> you have to pick up random images. Random images come based on ID. You copy this URL,

161.74 -> you have to take it here & paste it here. We are creating images with a width of 1000 pixels and a height of 500 pixels.

180.83 -> Now, we see four images visible her. You can see. It's the same images right now.

189.32 -> Change ID if you want. Do 236, 237, 238 & 239. This is the concept of where the image is coming from.

199.91 -> You cannot apply this to any image. See these 4 images are visible. Now, what should I do next?

207.12 -> Now we target the Slide to the CSS. Here we take width & height 100% & position will be absolute.

225.93 -> If you have read about positions, then you must have the idea that it will leave its place as soon as you give position: adjusted.

233.49 -> Position relative to be given to the parent. This is your position absolute and the

239.94 -> above one is position relative. Let's refresh it once; I think there is some issue here.

244.74 -> 'position: absolute'. What is happening now is that, it is a stack of images.

252.36 -> If I inspect and show it, then the image would have come up one on the other.

259.18 -> How will we manage this now? I Will manage it with the help of JavaScript.

265.08 -> So far, I'm done, now let's move on to the JavaScript part.

274.34 -> Here I create a constant variable. 'const slides = document.querySelectorAll(".slide").

286.18 -> Please pick up the element in which the class named Slide is attached and put it in this variable. I will also show you

293.47 -> what is coming in which variable by doing 'console.log'. See, the node list is visible in the console; there are four elements.

299.86 -> We'll run a loop in it. I will create a variable before running the loop 'counter=0'. The counter will already have a value of zero.

307.46 -> We will run the loop of 'forEach.'

312.46 -> Write 'slides.forEach'. What the foreach loop does is ask for your call back, but I will provide you with two things in the callback.

320.34 -> What the for-each loop does is that if there are four elements, it will go to the first, go to the second, go to the third, then go to the fourth.

326.87 -> When he goes to the first, it means it refers to the first Slide. Its key is zero up to forth.

336.6 -> 0,1,2,3 are keys. Here it gives the key by the index name. Images will appear in the slides,

343.6 -> it means the object of that image will come, and the image will come.

346.69 -> Very simple concept. 'slide.style'. I'll go to Slide. And what will I do from the left,

356.54 -> because the position has been given, how much percent should I keep away from the left?

362.84 -> '${index * 100}%', far.

373.07 -> What will the first Slide get '0 * 100', then it will go away 0%. If the second Slide gets '0 * 1' then it will go away 100%.

382.4 -> If the third Slide gets '0 * 2' then it will go away by 200%. Now here we come.

391.76 -> Once I do the doc, let's see what the problem is. Nothing is the problem now. You can see the whole image has appeared.

401.35 -> As soon as I give overflow:hidden to this parent(main), then you will stop seeing extra images.

409.24 -> Where are they? So as soon as we run JavaScript, we said give 0*100 to the 0th element, i.e, 0%,

417.24 -> give 1*100 to the 1st element, give 2*100 to the 2nd element & give 3*100 to the 3rd element. In this way, you can see that

426.84 -> all the images have been ported from the left. Now we have to think that in this way they should be moved.

434.4 -> I will also give it a transition because we have to bring some changes to it.

439.05 -> 'transition: 1s'. We will make a constant function here 'slideImage'.

449.2 -> This is a function named 'slideImage'. This slideImage function will go on each Slide

458.38 -> which means we are running the forEach loop all over the Slide. It will go to the first Slide and

465.35 -> apply Transform by going to Style on the Slide. 'TransalteX()' will be used in Transform. 'TransalteX()' means will move the X-axis back.

479.35 -> 'TransalteX(-${})'. '${}' represents the variable.

495.25 -> Write '-${counter*100}%'.

499.87 -> What will happen with this if the counter is zero first, then 0 * 100 will come to the first one.

505.95 -> In this way, counter * 100 will be put on everyone. Maybe you don't understand this right now

513.95 -> but as soon as I call the slideImage function, I have to step the counter value up and down before calling it.

524.93 -> So here I make two buttons. Make div.nav. Let's make two buttons in it.

532.37 -> You may not have understood what the function is doing right now. You will realize as soon as we

538.58 -> make the button. This is the button for the previous and the button for the next. We come inside the nav.

551.5 -> Give 'text-aling:center' inside nav. We exactly brought it to the center. 'margin-top: 15px'.

558.07 -> It is shifted from the top. Target the Nav button. We can do a lot to make this UI good, but I am not working on UI right now.

574.36 -> I am explaining to you the logic of JavaScript. As soon as there is a click on Previous and Next,

579.8 -> then we have to do minus and plus on the counter. Here we make the button 'onclick.' 'goPrev' is a function.

595.8 -> 'onclick-"goNext()" ' is also a function. goNext() & goPrev are two functions.

604.57 -> And we'll call it something like this 'const goNext = () =>?'. On goNext,

613.18 -> you have to do 'counter++' & call the slideImage fucntion. For goPrev,

628.3 -> you have to do 'counter--' & call the slideImage fucntion

635.14 -> जैसे आप काउंटर जीरो पर है ठीक है - - क्या होगा - बन जाएगा मतलब स्कूटर की बोली - हो जाएगी तो पहले what will happen now? As you counter is at zero, then the value of the counter will become -1.

642.43 -> वाले पर किया जाएगा - Android फिर दूसरा वाला - Android तीसरा लाइन एसेंडेंट चौथा लाइन सेंट्रल correction pahele wale par kya jaega -100 fir dusra wala -100 teesra wala -100, chotha wala -100 to sb jo 200% 300% 400% dur hai vo kya krenge -- aaenge.

647.65 -> तो सब जो सौ परसेंट 268 तीन सौ परसेंट चार सौ परसेंट दूर है वह क्या करेंगे - - आएंगे और इस वजह correction

654.58 -> Because of this, as soon as you click on Previous or Next. Once you see if there is any error in the console.

659.44 -> Go to main & see whether what we are trying to implement is being implemented or not.

670.6 -> Here we did goNext. 'goPrev,' should go on click of the previous button. 'goNext' should go on click of the following button.

684.64 -> Let's refresh it and check whether the change is coming or not. Maybe the button is not getting appropriately called.

694.72 -> I will do an alert and see whether this thing is actually there or not, or there is an issue in my logic.

702.92 -> The buttons of Next and Previous are working, it means that there is an issue in the logic somewhere,

709.56 -> Once, let's see where the error is in the logic and also, see whether the slideImage function is called or not.

712.74 -> 'slide.style'. You have to go in the Style of the Slide. 'transform = translateX'

729.15 -> The next image is coming when you click on Next & the previous image is coming when you click on Previous.

734.08 -> The problem here was that the spelling of the translate was wrong, so it was not working.

738.58 -> You can see that clicking on Next is going to next & by clicking on Previous is going to previous.

742.08 -> Now we want to not come from this side and from above. There is a very simple logic to doing this.

755.37 -> Here, do 'bottom.' Earlier, it was from the left. Now we have done it from the bottom.

763 -> Now we will do positive value on the Y-axis. Now if you click on Next, then see it is coming from above.

772 -> I was going to give you this logic in the last, which you have to do yourself that when Next is being clicked,

779.9 -> it continues to play even after the last image, when Previous is being clicked, it continues to play even after the last image.

786 -> You have to implement this logic yourself. When I upload it on GitHub. So I will upload it with the logic.

791.98 -> But you have to try by yourself; then you have to check whether your logic is working correctly or not.

796.27 -> You can do it from here. If we want, we can take it down from the top here by putting a minus in the Y.

803.83 -> Very simple concept. You have to apply some logic. Work done. You can bring it from left or right or any place.

814.62 -> You have to work on positions on top, bottom, left, and right and translate y and z in the Transform. And everything will happen automatically.

825.55 -> I hope you must have understood this concept very well. That's it for this video. Thank you so much for watching.

Source: https://www.youtube.com/watch?v=Emrbhrhp6BU