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

Подписаться 3,3 млн

Просмотров 180 тыс.

50% 1

In this video, learn How to Create an Image Slider in HTML, CSS & JS - Step by Step | JavaScript Projects. Find all the videos of the JavaScript Projects in this playlist: • JavaScript Project Beg...
💎 Get Access to Premium Videos and Live Streams: / @wscubetech
WsCube Tech is a leading Web, Mobile App & 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: 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: 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: bit.ly/2M3oYOs
📞 For more info about the courses, call us: +91-7878985501, +91-9269698122
✅ CONNECT WITH THE FOUNDER (Mr. Kushagra Bhatia) -
👉 Instagram - / kushagrabhatiaofficial
👉 LinkedIn - / kushagra-bhatia
Connect with WsCube Tech on social media for the latest offers, promos, job vacancies, and much more:
► Subscribe: bit.ly/wscubechannel
► Facebook: / wscubetech.india
► Twitter: / wscubetechindia
► Instagram: / wscubetechindia
► LinkedIn : / wscubetechindia
► RU-vid: / wscubetechjodhpur
► Website: wscubetech.com
-------------------------------------| Thanks |--------------------------
#JavaScript #JavaScriptProjects #ImageSlider

Опубликовано:

10 май 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 132

@user-yt9pf7kw7u 7 месяцев назад

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.

@srinivasaraoyp3640 Год назад

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

@fightforfitness2256 9 месяцев назад

Very nicely explained sir.

@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 9 месяцев назад

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 9 дней назад

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

@krishnaghosh8393 Год назад

This is a very very helpful video Thanks for sharing

@anjaanmusafir9977 6 месяцев назад

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

@hammadrehmani2666 Год назад

great job brother...its very helpful for me

@Shahid-zt7mg Год назад

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

@_justacoder_ 8 месяцев назад

Loved it!! you made it super easy to understand

@harisrehman7090 Год назад

REALLY HELPFULL THANKU!❣

@omprakashsuthar7218 10 месяцев назад

This is a very helpful video. Thanks sir

@vatsvlogs6110 4 месяца назад

Very nice explanation sir.. thanks 🙏🏼

@skygrace8459 Год назад

Excellent, thank sir. Would you please make autoplay list

@sumitgupta7419 Год назад

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

@harikyt 7 месяцев назад

awesome...bohot sahi

@sajadhamid2000 Год назад

My favourite tutor on internet

@HassaanHaider313 3 месяца назад

my also

@MuhammadWaqas-eb1uu 16 дней назад

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

@Chain25 6 месяцев назад

Welcome and Thanks a Lot.

@gaurangmore9413 Год назад

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

@jokieme1184 2 года назад

Sir please make a video on responsive nav bar

@mystudy6114 2 года назад

Please make a separate playlist for this

@FrameFablesTV 3 месяца назад

Excellent Explanation Sir!!!

@shivam3839 9 месяцев назад

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

@Himanshua09 9 месяцев назад

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 9 месяцев назад

@@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 8 месяцев назад

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

@pankaj_9998 6 месяцев назад

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

@VishalSharma-rn7mt 3 месяца назад

Awesome, very clear and easy

@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 9 месяцев назад

Thanx buddy

@Himanshua09 9 месяцев назад

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 8 месяцев назад

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

@thesocialtok 7 месяцев назад

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

@P05ITRON 7 месяцев назад

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

@talibhusain3335 Год назад

Nice explanation

@lyrichives7859 8 месяцев назад

Thank youuu

@RamChander-ng1de 2 года назад

Sir kon s theam use karte hoo in vs code

@samandartursunov7205 Месяц назад

Thanks bro )

@yashghugardare519 Год назад

very helpfull

@MienVuThi-uf9hf Год назад

great video

@nikitashirke6025 2 года назад

Superb

@nitishkumar4633 Год назад

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

@026maheshkumars7 7 месяцев назад

super

@strangequard5702 2 месяца назад

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

@itskishorstatus962 Год назад

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

@akhilch3684 Год назад

Wow great explanation

@Himanshua09 9 месяцев назад

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

@advanbhatti6063 Год назад

Big fan

@ashutoshswain6206 Год назад

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

@Dev-Phantom Год назад

easy to understand

@zaryabimran7303 8 месяцев назад

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

@manishpanchal1098 Год назад

nice video

@hello_Subham Год назад

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

@imihere5103 2 года назад

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 2 года назад

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

@parthdashore46 Год назад

clean

@randykeetley9780 7 месяцев назад

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 6 месяцев назад

check again with zoom

@NexusVisions164 6 месяцев назад

Same issue, did you find any solution?

@Poojayadav-zm1hq 5 месяцев назад

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

@Vikrant_Dubey 3 месяца назад

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

@anjalimishra455 3 месяца назад

@@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 😢

@crazytthings47 4 месяца назад

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

@CrazyvlogsH Месяц назад

Js apko nhi smjhega apko js ko smjhna pdega😂

@beinglearner8543 17 дней назад

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

@digitalaayam2503 2 года назад

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

@integrate2945 Год назад

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

@_justacoder_ 8 месяцев назад

where is the link for source code

@abhinavyadav6821 2 года назад

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

@abhishektiwari2643 2 года назад

Aapko JavaScript aata hai

@scriptpriest 8 месяцев назад

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 6 месяцев назад

i was also looking solution for this case

@its_adesh 3 месяца назад

Use modulo on counter

@mahadevmushrooms Год назад

mere hisab se bright theme better hai

@zaryabimran7303 8 месяцев назад

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

@vasudevpareek2862 8 месяцев назад

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

@gkandcurrentaffairs7151 7 месяцев назад

if you provide source code then it will easy bro

@banihin 10 месяцев назад

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 6 месяцев назад

same problem

@manishagurjar9058 Год назад

my javascript code is not working plz share the code.

@Rahmanullah-iu9tf Год назад

sir this is very helpful

@kholoudbelhadj 7 месяцев назад

how can I make them switch automatically

@manojrawat5756 Год назад

❤❤❤

@Arbazbabu033 2 месяца назад

Jquery se slick skider kese lagaye

@vatsvlogs6110 4 месяца назад

Sir full source code pls share in desc .

@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 9 месяцев назад

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

@BRAND_OF_UTTARPRADESH 5 месяцев назад

Please avoid text display on screen at code editor page

@Rameshpuri81 9 месяцев назад

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

@avinashhemanth4145 10 месяцев назад

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

@brijeshpoojary1791 10 месяцев назад

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

@avinashhemanth4145 10 месяцев назад

@@brijeshpoojary1791 kk thnks

@saquibansari7866 9 месяцев назад

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

@alilatif2467 2 года назад

❤️❤️❤️❤️

@phpmysql2518 Год назад

where is your github link

@visheshkumar8015 Год назад

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

@listenbeautiful9512 Год назад

Yes bro...👍

@aftabshaikh305 7 месяцев назад

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

@TusharKumarPatel-ns1lo 6 месяцев назад

I tried it as it is but not working

@Irshadali121-ng6rr 11 месяцев назад

Slide end kaise hoga

@ManmohanBhardwaj-ft2hu 10 месяцев назад

Sir code not working

@mdirshadkhan6124 Год назад

Can you share code of this image slider

@MUHAMMADUMAR-fe7ec Год назад

ye tatto hai nai kare ga

@mrs-samaxy Год назад

@@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(); } };

@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}%)` } ) }

@advanbhatti6063 Год назад

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

@nabilaakhtar818 6 месяцев назад

Where is the github link?

@Himanshua09 9 месяцев назад

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 8 месяцев назад

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

@kumaxFPS 8 месяцев назад

alos check JS connection

@rajputfitness8641 Год назад

how to make this auto change😅

@priyamittal8302 19 дней назад

source code?

@Lets_develop_it 9 месяцев назад

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 8 месяцев назад

@vasudevpareek2862 8 месяцев назад

the code is not working 😕

@harikyt 7 месяцев назад

it is working for me