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

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

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

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

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

Loved it!! you made it super easy to understand

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

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

Thank youuu

where is the link for source code

the code is not working 😕

awesome...bohot sahi

super

if you provide source code then it will easy bro

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.

how can I make them switch automatically

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

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

Where is the github link?

Welcome and Thanks a Lot.

I tried it as it is but not working

Please avoid text display on screen at code editor page

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

code to stop the blank image that is when it is on 0 index previous button will be disabled , at the last index next button will be disabled ; I have done this - const slides = document.querySelectorAll(".slide");
let counter = 0;
const prevButton = document.querySelector(".prev");
const nextButton = document.querySelector(".next");
slides.forEach(
(slide, index)=>{
slide.style.left = `${index * 100}%`

})

const goPrevious =()=> {
nextButton.disabled = false;
if(counter === 0){
prevButton.disabled = true;
console.log(prevButton);
}
else{
prevButton.disabled = false;
counter = counter -1;
slideImage();


}
}
const goNext= ()=>{
prevButton.disabled = false;
if(counter === slides.length-1){
nextButton.disabled = true;

}
else{
nextButton.disabled = false;
counter = counter+1;
slideImage();
}

}

const slideImage = ()=>{
slides.forEach(
(slide)=>{
slide.style.transform = `translateX(-${counter * 100}%)`
}
)
}

Excellent Explanation Sir!!!

Awesome, very clear and easy

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

Jquery se slick skider kese lagaye

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

}
)
}

Thanks bro )

If you want the slide to start again after end, then you can use this code..😇😇
Thank You Everyone❣❣

const goNext = () => {
(counter == 3)? counter = -1: counter;
counter++;
slideImage();
};

const goPrev = () => {
(counter == 0)? counter = 4: counter;
counter--;
slideImage();
};

source code?

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

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

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

Sir iska source code kha Mila ga

GitHub link???

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

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

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!

What level of project should we done for internship

nextbtn.addEventListener("click", () => {
counter = (counter + 1) % totalSlides;
changeSlide();
console.log(counter);
});
prevbtn.addEventListener("click", () => {
counter = (counter - 1 + totalSlides) % totalSlides;
changeSlide();
console.log(counter);

});

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

nice

Waste of time. Incomplete

Not working

sir pehle haddi to banalo fir style lagana!

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

Thank you for this video 🙏🏻

it doesn't work thank you for wasting my time

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

good work help to me.