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

[@anumshehzadi-r3o]

VERY GOOD EXPLANATION, no destructive music, clear voice no jargon, no beating around the bush straight to the point every line explained THANK YOU VERY MUCH.

[@MaanIsMe]

It's was easy😅, just takes a little thinking. const goNext = () => { if (counter < slides.length - 1) { counter++; slideImage(); } }; const goPrev = () => { if (counter != 0) { counter--; slideImage(); } };

[@Himanshua09]

I did the same as shown in video but I am getting error. When I checked in console it is showing slides.forEach is not a function. Please help

[@CodeWithMaahzaib1]

Yeh tw Galat code hai try kia but hua he nahi😊

[@geeksrahul]

@@Himanshua09 make sure you used querySelectorAll() not querySelector()

[@strangequard5702]

function gonext() { if(count == 3){ return } count++ slider() } function gopreview() { if(count == 0){ return } count-- slider() }

[@adeebkhan8531]

Following changes must be done in 'goPrev' and 'goNext' functions to fix this BUG: const goPrev = () => { if (counter == 0) { counter = slides.length - 1; slideShow(); } else { counter--; slideShow(); } } const goNext = () => { if (counter == slides.length - 1) { counter = 0; slideShow(); } else { counter++; slideShow(); } }

[@saquibansari7866]

Thanx buddy

[@Himanshua09]

I did the same as shown in video but I am getting error. When I checked in console it is showing slides.forEach is not a function. Please help

[@zaryabimran7303]

Can anyone tell me how he hoisted arrow function (slideImage()) 🤔🤔🤔

[@thesocialtok]

use array from() method to fix this foEeach loop error@@Himanshua09

[@MajorInflation]

OKAY I HAVE BEEN TRYING TO RECREATE THIS WITH A DIFFERENT FUNCTION AND IT DID NOT WORK I AM LOSING MY MINF BUT THANKS FOR THIS CODE I AM SO DAMN GRATEFUL BECAUSE I HAVE A WEBSITE TO MAKE AND SUBMIT IN 5 DAYS FOR A PROJECT AND I HAVE BEEN STUCK AT MAKING THIS CARSOUEL FOR 2 DAYS BECAUSE MY JAVA SCRIPT IS BAD HOWEVER I KNOW THAT YOU DON'T CARE SO THANKS THANKS THANKS THANKS THANKS ALSO THANKS TO THE VIDEO MAKER GUY FOR THE OG CODE CUZ I DON'T KNOW JS THAT WELL AND UR EXPLAINATION WAS GREAT OKAY IM RUNNING OUTTA TIME BY THANKS THANKS THANKS THANKS THANKS THANKS THANKS THANKS THANKS THANKS THANKS THANKS THANKS

[@sajadhamid2000]

My favourite tutor on internet

[@HassaanHaider313]

my also

[@Lyrics_Editz2005]

Inki GitHub I'd kya h

[@Lyrics_Editz2005]

​@@HassaanHaider313 inki GitHub I'd kya h

[@AnonymousMaiden]

thanks a lot sir, this video helped me a lot i regret why haven't i came here before wasting my hours on coding

[@srinivasaraoyp3640]

Aapka explain karnay ka tarika bahuth badiya. Thank you very much.

[@MuhammadWaqas-eb1uu]

This project help me. And I create with help of slider automatically slide prev and Next. Thanks Sir!

[@SurajMule-i8o]

Wa wa wa kya teaching mja aa gya ❤❤ 1 no sir 🎉

[@NANIANTIC]

const prev = () => { if (counter > 0) { counter--; slideimg(); } } const nxt = () => { if (counter < slides.length - 1) { counter++; slideimg(); } }

[@OneXHacker001]

best javascript playlist which have helped me in getting a grip on javascript.

[@FrameFablesTV]

Excellent Explanation Sir!!!

[@Sunny-cx8ki]

Seriously man, this helped me a lot, thank you very much

[@shivam3839]

this series was pretty helpful, now i am comfortable in javascript

[@Himanshua09]

I did the same as shown in video but I am getting error. When I checked in console it is showing slides.forEach is not a function. Please help

[@shivam3839]

@@Himanshua09 const slides=document.querySelectorAll('.slide') let counter=0 slides.forEach((slide,index)=>{ slide.style.left=`${index*100}%` }) const slideImage=()=>{ slides.forEach((slide)=>{ slide.style.transform=`translateX(-${counter*100}%)` }) } const goNext=()=>{ counter++ if(counter>3) counter=3 slideImage() } const goPrev=()=>{ counter-- if(counter

[@zaryabimran7303]

@@Himanshua09 console and check that have you selected all the slides in the slide variable ...

[@pankaj_9998]

@@Himanshua09 check slides is array of images items or not.

[@Chain25]

Welcome and Thanks a Lot.

[@kinzasheikh-xn9oe]

const slides = document.querySelectorAll(".slide") var counter = 0; slides.forEach( (slide, index) =>{ slide.style.left = `$(index * 100)%` } ) const goPrev = () => { counter-- slideImage() } const goNext = () => { counter++ slideImage() } const slideImage = () => { slides.forEach( (slide) => { slide.style.transform = `translateX(-${counter * 100}%)` } ) }

[@VishalSharma-rn7mt]

Awesome, very clear and easy

[@Rahmanullah-iu9tf]

sir this is very helpful

[@krishnaghosh8393]

This is a very very helpful video Thanks for sharing

[@hammadrehmani2666]

great job brother...its very helpful for me

[@amir8reza536]

Thank you for this video 🙏🏻

[@omprakashsuthar7218]

This is a very helpful video. Thanks sir

[@gaurangmore9413]

thanks a lot buddy,this video really saved my ass.

[@Shahid-zt7mg]

This is really very very very helpful for me using this concept I make better the my UI

[@harisrehman7090]

REALLY HELPFULL THANKU!❣

[@jokieme1184]

Sir please make a video on responsive nav bar

[@harikyt]

awesome...bohot sahi

[@randykeetley9780]

I did exactly what you did, and I even made sure that I did by checking my code. However, when I hit the next and previous buttons, you can tell they are being pressed however, the images don’t change at all

[@hassansmma]

check again with zoom

[@Poojayadav_11-m9c]

Yes even I got this issue, images doesn't change after clicking next and prev

[@Vikrant_Dubey]

slide.style.transform = `translateX(-${counter * 100}%)`; may be in this line you are using single quotes use tilde copy paste this code line

[@anjalimishra455]

​@@Vikrant_DubeyI ha have same issue 😔 Maine check Kiya to console me error hai goNext is not defined at HTMLbuttonElement.onclick aa raha hai please help 😢

[@Lyrics_Editz2005]

I also

[@sumitgupta7419]

Thanks sir please keep making video and explaining everything very neatly step by step

[@akhilch3684]

Wow great explanation

[@Himanshua09]

I did the same as shown in video but I am getting error. When I checked in console it is showing slides.forEach is not a function. Please help

[@fightforfitness2256]

Very nicely explained sir.

[@samandartursunov7205]

Thanks bro )

[@MienVuThi-uf9hf]

great video

[@crazytthings47]

Sir this video help me a lot but meko js bilkul nhi samajta😢

[@CrazyvlogsH]

Js apko nhi smjhega apko js ko smjhna pdega😂

[@Dipankar_Barmaan]

😂😂😂​@@CrazyvlogsH

[@dhfabricsports81]

Try kart rhy

[@nehaartgallery6319]

What level of project should we done for internship

[@talibhusain3335]

Nice explanation

[@abhinavyadav6821]

Sir pls make video on ping pong game by javascript , pleaseee sir it will be very helpful

[@abhishektiwari2643]

Aapko JavaScript aata hai

[@yashghugardare519]

very helpfull

[@mahadevmushrooms]

mere hisab se bright theme better hai

[@imihere5103]

Sir me ne fiverr pe six months pehly account bnaya tha, kisi waja se kam start na kr ska, WordPress se related gigs bnai thi Now i want to start freelancing again because im free now Pochna just ye he k muje new account bnana chahye ya wohi purana account Agr wohi account use kru to kya customer ko ye ni lge ga k is ne to six months se ak b order complete ni kya, customer negative ni ho jay ga? Pls guide me

[@abhishektiwari2643]

Freelancing me kya karna hota hai Kya programing language aana chahiye Esme kya karna hota hai Kya kya aana chahiye

[@advanbhatti6063]

Big fan

[@_justacoder_]

Loved it!! you made it super easy to understand

[@ashutoshswain6206]

Dear sir, Thanks for this type of video but please provide it's source code

[@zaryabimran7303]

Can anyone tell me how he hoisted arrow function (slideImage()) 🤔🤔🤔

[@vasudevpareek2862]

const slideImage = ( ) => { //code for functions }

[@visheshkumar8015]

Can use this for the first the slide after last slide translateX(-${(counter%4)*100}%)

[@listenbeautiful9512]

Yes bro...👍

[@aftabshaikh305]

bro but in my laptop this ${} does not work i dont know why

[@Dev-Phantom]

easy to understand

[@zaryabimran7303]

Can anyone tell me how he hoisted arrow function (slideImage()) 🤔🤔🤔

[@nitishkumar4633]

Sir where this code is available, may you please provide the link?

[@skygrace8459]

Excellent, thank sir. Would you please make autoplay list

[@hello_Subham]

please send us logic that empty box which is not found in the github link I really need that code ..

[@LizanSarkar-e5e]

good work help to me.

[@integrate2945]

Could you please provide some php project????? Please....

[@digitalaayam2503]

Ye example to automatically chalta hai bro, however, good job

[@mystudy6114]

Please make a separate playlist for this

[@RamChander-ng1de]

Sir kon s theam use karte hoo in vs code

[@avinashhemanth4145]

in script code why this is not working for me slides.forEach( (slide,index) =>{ slide.style.left=`$(index*100)%` } )

[@brijeshpoojary1791]

It's brackets should be changed to ${index*100}%

[@avinashhemanth4145]

@@brijeshpoojary1791 kk thnks

[@saquibansari7866]

After dollar sign use curly braces {}, not parenthesise (), while using template literal...

[@nishagawade3248]

why do we need to write slide image function twice?

[@avishekadhikary3677]

Coz first we have to arrange the images in a systematic way, in a line. Then we have to slide those images on that line of images. In these case the first slide function arranges the images and the second one is the function for the slider Hope these helps 🙂✊

[@Himanshua09]

I did the same as shown in video but I am getting error. When I checked in console it is showing slides.forEach is not a function. Please help

[@Ranaali069]

nice

[@beinglearner8543]

Error Index is not recognize const slides = document.querySelectorAll(".slide") var counter = 0; console.log(slides) slides.forEach( (slide,index) => { slide.style.bottom = '${index * 100}%' } ) index Error

[@manishpanchal1098]

nice video

[@chunmunjain3490]

my javascript code is not working plz share the code

[@kholoudbelhadj]

how can I make them switch automatically

[@026maheshkumars7]

super

[@lyrichives7859]

Thank youuu

[@Arbazbabu033]

Jquery se slick skider kese lagaye

[@nikitashirke6025]

Superb

[@MrJayantchaudhary]

Sir can you please make it infinite.that after last image first image will run.

[@phpmysql2518]

where is your github link

[@Irshadali121-ng6rr]

Slide end kaise hoga

[@peculiar_psa]

bhai kiska ye transition effect aa rah hai kya ?? mera pata nhi kyu sirf image change ho raha hai but transition me slide nhi ho rah!

[@Lyrics_Editz2005]

Sir iska source code kha Mila ga

[@BRAND_OF_UTTARPRADESH]

Please avoid text display on screen at code editor page

[@TusharKumarPatel-ns1lo]

I tried it as it is but not working

[@_justacoder_]

where is the link for source code

[@banihin]

I cannot use .style.left or .style.transform. There seems to be an error with the "slide" variable but I've followed every step.

[@heeraraghuvanshi8985]

same problem

[@gkandcurrentaffairs7151]

if you provide source code then it will easy bro

[@nabilaakhtar818]

Where is the github link?

[@rajputfitness8641]

how to make this auto change😅

[@mdirshadkhan6124]

Can you share code of this image slider

[@MUHAMMADUMAR-fe7ec]

ye tatto hai nai kare ga

[@bollybuck]

@@MUHAMMADUMAR-fe7ec yr img slider ki koi range hi ni h Back krty rho hota rhy ga

[@MaanIsMe]

Here you go, const goNext = () => { if (counter < slides.length - 1) { counter++; slideImage(); } }; const goPrev = () => { if (counter != 0) { counter--; slideImage(); } };

[@ManmohanBhardwaj-ft2hu]

Sir code not working

[@parthdashore46]

clean

[@Rameshpuri81]

" 0 * 100 " = zero "0" hota h sir ,"1*100"= 100 hota h sir

[@advanbhatti6063]

Sir g me ne like subscribe or share kr ke apni fee pay krdi hy

[@scriptpriest]

What if we want the image slider to be like a wheel. So that when you click on the next button after the last image, the slider still slides forward but shows the first image instead of sliding backwards to the first image. And vice versa

[@pankaj_9998]

i was also looking solution for this case

[@its_adesh]

Use modulo on counter

[@manojrawat5756]

❤❤❤

[@priyamittal8302]

source code?

[@vasudevpareek2862]

the code is not working 😕

[@harikyt]

it is working for me

[@aarushirajput7821]

translate spelling mistake😅

[@bhumikasethi7175]

Not working

[@Devyadav0007]

Ye Jo aap bolte h to likh jata h isse kafi dikkat hoti h

[@Lets_develop_it]

here is the solution for this bug function Prev() { if (counter == 0) { } else { counter++ slideimage() } }; function Next() { if (counter == (slides.length*-1)+1) { } else { counter-- slideimage() } }

[@scriptpriest]

What if we want the image slider to be like a wheel. So that when you click on the next button after the last image, the slider still slides forward but shows the first image instead of sliding backwards to the first image. And vice versa

[@rb.rana1993]

Sir please give this projector source code or GitHub link

[@MuntasirMamunRony]

sir pehle haddi to banalo fir style lagana!

[@alilatif2467]

❤️❤️❤️❤️

[@Himanshua09]

I did the same as shown in video but I am getting error. When I checked in console it is showing slides.forEach is not a function. Please help

[@kumaxFPS]

check in console, u may not be assigning the images in slides variable.

[@kumaxFPS]

alos check JS connection

[@nistaff9319]

it doesn't work thank you for wasting my time

[@apaarjain]

Waste of time. Incomplete

[@itskishorstatus962]

Sir can you please make it infinite.that after last image first image will run.

[@manishagurjar9058]

my javascript code is not working plz share the code.