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

awesome...bohot sahi

the code is not working 😕

where is the link for source code

Thank youuu

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

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

Loved it!! you made it super easy to understand

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

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

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

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

Very nicely explained sir.

translate spelling mistake😅

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

This is a very helpful video.
Thanks sir

Sir code not working

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

Slide end kaise hoga

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

very helpfull

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

mere hisab se bright theme better hai

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

To reset the slider-Image use this code!!

const goNext = () => {

counter++;

if(counter === slider.length){
counter = 0;
}

slideImage();
}

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

sir this is very helpful

how to make this auto change😅

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

My favourite tutor on internet

❤❤❤

my javascript code is not working plz share the code.

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

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

aap bole github ka link denge diye kha link bhejo

REALLY HELPFULL THANKU!❣

why do we need to write slide image function twice?

great video

This is a very very helpful video
Thanks for sharing

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

great job brother...its very helpful for me

my javascript code is not working plz share the code

Wow great explanation

Can you share code of this image slider

Nice explanation

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

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

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

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

Big fan

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