Animated Responsive Image Slider With Next And Previous Buttons Using HTML CSS JS || Autoplay Slider

How to make an animated responsive image website slider with next and previous buttons and autoplay slides effects using html css and vanilla javascript.
create a responsive animated slider with controls, next and preview buttons and auto play slides animation effects using pure vanilla javascript.
pure javascript image slider with auto-play and manual buttons effects.
download and edit images form here:
storyset.com/illustration/res...
storyset.com/illustration/dev...
storyset.com/illustration/web...
New To My Channel Subscribe Now And See More Stuff Like This:
/ @mrwebdesigneranas
#JavascriptSlider
#AnimatedSlider
#AutoPlaySlider

[@takayumaja_4338]

Thank you so much Mr. Web Designer

[@byronloarte]

Excelent my dear friend, it's really nice and short the video

[@jcare07]

Excelente como siempre. Todo un artista. 👍

[@twowrld2]

Amazing 👍

[@mzaw3112]

Your videos is very helpful for me and I love it very much. It is really easy to learn slider animation.

[@mosesimmanuel1591]

Super sir. thanks For Video Sir..

[@kumarrounak774]

Amazing 🤩🤩

[@Vishal-fz8ug]

Helpful 😀😀

[@sh9vch9nk0]

Very useful, thank you! 🤓🤓👍👍

[@rizkyhidayat6494]

Thank you🥺🥺

[@arielgomez7832]

excelente! Thanks

[@alfredosanchez6355]

Thank you so much for inspire us

[@MrWebDesignerAnas]

It's my pleasure

[@yeasinarafat1694]

Good video

[@TechnicalScienceCreation]

Love you dear. Thanks a lot for this video

[@MrWebDesignerAnas]

My pleasure 😊

[@xiuqingli4001]

I have a question not related to this particular video but your other excellent videos. How do you decide what font size to use/that looks good and what padding or margin to use? Did you just pick a number and see if it looks good and if not, either decrease or increase it?

[@MrWebDesignerAnas]

I would prefer to put font size to the medium level so that user can easily read the text without any difficulties
and yeah, font size has to be decreased according to the screen size of device

[@robinncode]

Thanks a lot

[@MrWebDesignerAnas]

Most welcome

[@robyadiputra6683]

Amazing sir, please source code ☺️🙏

[@sallytavkhelidze1276]

I added it on my website after some content and it didn't work at all :((

[@shivambhaumik_b_877]

how can i use mouse scroll function in this

[@niyassby9345]

i cant use this code
show this err
Uncaught TypeError: Cannot read properties of undefined (reading 'classList')

[@aguswidiarsanatv8052]

please help me, why doesn't "cursor: pointer" appear on my website

[@MrWebDesignerAnas]

your browser might not support the property
update your browser or use -webkit- prefix

[@aguswidiarsanatv8052]

@@MrWebDesignerAnas how to?, please help me🙏🙏

[@ZakirHossain-nq8jp]

Soft song

[@natashakainat337]

Sir i got stuck in js coding would you like to guide me?

[@MrWebDesignerAnas]

what happen? which part is not working? did you write the exact javascript code with same classes?

[@joseceless6929]

Code please! Thank you bro!

[@MrWebDesignerAnas]

thank you
sorry but most of the sort videos doesn't contains source code my up coming latest videos does.

[@0108ben]

Java script does not seem to work, is there any way you can help me?

[@MrWebDesignerAnas]

show me your javascript code in the reply

[@0108ben]

Hiya, sorry I fixed the issue, I had named one of the functions wrong lol, thank you anyway, have a good day :D

[@ninogogoladze7614]

@@0108ben Can you show me javascript?

[@ninogogoladze7614]

Javascript doesn't seem to be working for me, can you help me please?

[@ninogogoladze7614]

let slides = document.querySelectorAll('.slide-container');
let index = 0;
function next(){
slides [index].classList.remove('active');
index = (index + 1) % slides.length;
slides [index].classList.add('active');
}
function prev(){
slides [index].classList.remove('active');
index = (index - 1 + slides.length) % slides.length;
slides [index].classList.add('active');
}
setInterval(next, 7000);

[@MrWebDesignerAnas]

select the childrens as well
let slides = document.querySelectorAll('.slide-container .slide');

[@ninogogoladze7614]

@@MrWebDesignerAnas Still not working 🥺

[@aogiriyomi3364]

sir can you make the source code ?

[@creativeconnect10]

Give code link

[@user-wd7wp1bx4x]

sir please sourch code provide

[@vv-so4em]

can i contact you?

[@Ranjeetkumar-ct2zn]

Please provide me javascript carousel source code

[@MrWebDesignerAnas]

its in the descriptions

[@kamashobingo2583]

@@MrWebDesignerAnas You are a selfish liar and you are looking for the number of views only where is the code

[@tanmaybhuwad1201]

let slides = document.querySelectorAll('.slide-container');
let index = 0;

// next function
function next(){
slides[index].classList.remove('active');
index = (index + 1) % slides.length;
slides[index].classList.add('active');
}
// previous function
function prev(){
slides[index].classList.remove('active');
index = (index - 1 + slides.length) % slides.length;
slides[index].classList.add('active');
}
Not working sir?

[@madhukolluru2124]

setInterval(next,5000); try this