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

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.

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

📞 For more info about the courses, call us: [phone], [phone]

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

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

--------------------------------------| Thanks |---------------------------
#JavaScript #JavaScriptProjects #ImageSlider

[anumshehzadi-ro]

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

[MuhammadWaqas-ebuu]

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

[adeebkhan]

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

[Sunny-cxki]

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

[krishnaghosh]

This is a very very helpful video
Thanks for sharing

[srinivasaraoyp]

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

[strangequard]

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

[hammadrehmani]

great job brother...its very helpful for me

[jokieme]

Sir please make a video on responsive nav bar

[SurajMule-io]

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

[omprakashsuthar]

This is a very helpful video.
Thanks sir

[OneXHacker]

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

[gaurangmore]

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

[Shahid-ztmg]

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

[sumitgupta]

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

[randykeetley]

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

[NANIANTIC]

const prev = () => {
if (counter > 0) {
counter--;
slideimg();
}
}

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

[kinzasheikh-xnoe]

const slides =
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}%)`

}
)
}

[shivam]

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