simple responsive Image slideshow in pure javascript

[@hmza-themes4786]

Thank you bro , can we make it auto-play ?

[@TheWebShala]

var slides=document.querySelector('.slider-items').children; var nextSlide=document.querySelector(".right-slide"); var prevSlide=document.querySelector(".left-slide"); var totalSlides=slides.length; var index=0; nextSlide.onclick=function () { next("next"); resetTimer(); } prevSlide.onclick=function () { next("prev"); resetTimer(); } function next(direction){ if(direction=="next"){ index++; if(index==totalSlides){ index=0; } } else{ if(index==0){ index=totalSlides-1; } else{ index--; } } for(i=0;i

[@AbdulrahmanBitar-k9j]

@@TheWebShala thank yoyu verry much

[@sahiraahamed]

Helpfulll😊✌

[@tranhai625]

83 / 5000 Kết quả dịch Thank you very much. Here is the most helpful slide show tutorial video I've ever seen.

[@TheWebShala]

Thank you too

[@zackmcintosh-west2211]

Thanks so much for your tutorial and source code! Really like what you have done - tidy, minimal and elegant. Could you please explain how to change the time that each slide is displayed?

[@ProOnlineLaravel]

You are a very smart programmer

[@TheWebShala]

thanks.

[@oguzturkyilmaz543]

Thank you very much

[@kaeftrinsandy985]

Thank you my brother

[@TheWebShala]

You are welcome

[@mpsamy_vj752]

Amezing 👏

[@TheWebShala]

Thank you

[@RendyEunike]

you got hi and thanks from indonesian! thank you so much for helping me learning

[@TheWebShala]

Happy to hear that!

[@karamveersachdeva935]

Simple and awesome

[@sandeshbhujang5397]

Good one

[@TheWebShala]

thank you

[@Gh8st]

wow! es increíble

[@TheWebShala]

Thank you

[@hemantsingh5913]

Very nice video 👌

[@TheWebShala]

Thanks a lot

[@ArtOfFun]

*Perfect work. Thanks!*

[@andreafilms_]

what can i do if the image is cropped cause it is too little?

[@TheWebShala]

Do Img width 100%

[@andreafilms_]

@@TheWebShala where? sry if i ask because it's not working

[@andreafilms_]

@@TheWebShala it worked thx

[@zainulkhan8381]

sir can u explain me what does next("next") next("prev")means

[@rafar9937]

very simple nice slider, how i can add fade effect to this? just to do something with opacity?

[@MdNaimurRahmanHera]

Thanks for the source codes ❤

[@Pablotroll100]

It's perfect thank u!!

[@katakslim]

Thank you sir for helping my project.

[@codeninja7653]

This is really simple and helpful for me. Thank you.🙏

[@TheWebShala]

Glad it was helpful!

[@jefrisaragih390]

can you help me? I am confused about making a slide show that can be clicked and brings up a lightbox

[@TheWebShala]

lightbox slideshow ?

[@brightamponsah7946]

impressive

[@ahmedkasu5207]

hi! i have used the code with about 7 pictures. it works well but the problem is it does not reset after you slide the last picture. how can i fix that?

[@TheWebShala]

any error in console ?

[@ahmedkasu5207]

@@TheWebShala no any errors on the console

[@elzovoz3039]

Me too, in console said slide[index] is undefined when I click on prevBtn.

[@TheWebShala]

Review your code, download source code From description

[@elzovoz3039]

@@TheWebShala fix already, it's because I use meta charset = utf-8. Sorry for troubling, I'm noob in this

[@foxtv7021]

Hi Please asked how to make smooth transition to another picture I keep picturesn in array[ ] And move it by increasing index by1 But i disnt now what to add for have smooth transition to another picture in the next and back buttons

[@raniaayad4285]

It's great thank you...but l need to put more than one slider in the same page but the second one is just not working ..can you help me please??

[@TheWebShala]

i will make this tutorial in future

[@raniaayad4285]

@@TheWebShala thank you

[@RandomGuy34-j1u]

Great

[@TheWebShala]

Thanks

[@karamveersachdeva935]

We can use translate in animation and make it look like a slider

[@TheWebShala]

Yes

[@AA-gt8rc]

Nice sir

[@TheWebShala]

Thank you

[@ahsaankhan3833]

Thank you bro, it's awesome

[@TheWebShala]

Welcome 😊

[@matheuseli165]

Thank you so much for this!

[@TheWebShala]

Glad it was helpful!

[@jahirrana8879]

Thank You 😍

[@princedube8332]

does it respond to screen size

[@TheWebShala]

?

[@RAVIABHISHEKme]

how to use it for blogger post?

[@gouravahuja3652]

When i click on next button , it shows "next" in console and when i click on prev button , it shows "prev" It must have been from next ("next")

[@TheWebShala]

check code link in description

[@anirajshahi1036]

I copied all your codes but error was shown in the console. Could you please help me out ? error: Uncaught ReferenceError: nextSlide is not defined

[@TheWebShala]

Send screenshot

[@justin5314]

my .children got problem can i ask why?

[@TheWebShala]

problem ?

[@justin5314]

@@TheWebShala the JavaScript I put .children but when I inspect it show that the children is an error

[@TheWebShala]

@@justin5314 what is error ?

[@justin5314]

@@TheWebShala when I press inspect and console there is a line say that 'uncaught TypeError : cannot read property 'children' of null

[@TheWebShala]

@@justin5314 send me error screen shot through fb page

[@specialstreetfood5324]

what is in this called function and the direction variable? direction=="next".... how the condition check?

[@donnyrosales307]

why does it says this "Uncaught TypeError: Cannot read properties of null (reading 'onclick')"

[@TheWebShala]

please check, the element you have set the event listener is exist or not in your html.

[@timmytim9054]

Nice music.

[@federicocalo4776]

Thanks, but i have a little problem, it doesn't work with the right buttom

[@TheWebShala]

need help ? msg me on fb page

[@sujeetlohar2673]

how to disable prev/next arrow on first/last slider???

[@idirashahidaramli5680]

i dont know why my notepad said that there is error at children in js file.. hmm i dont get it 😢

[@idirashahidaramli5680]

oh mai god hahahaha i found my error 😅😅 thank you.. your tutorial is awesome 😊

[@pipi7607]

@@idirashahidaramli5680 and maybe change to Visual studio code for a better understanding of errors

[@mackynikat8833]

thanks...

[@mackynikat8833]

but sir can you use time interval with that like every 3s it will automatically scrolled in the next index? pls reply asap. needed tips for advance

[@tdakmolentertain1307]

thanks

[@arrvimal4043]

How do automatic slider

[@TheWebShala]

var slides=document.querySelector('.slider-items').children; var nextSlide=document.querySelector(".right-slide"); var prevSlide=document.querySelector(".left-slide"); var totalSlides=slides.length; var index=0; nextSlide.onclick=function () { next("next"); resetTimer(); } prevSlide.onclick=function () { next("prev"); resetTimer(); } function next(direction){ if(direction=="next"){ index++; if(index==totalSlides){ index=0; } } else{ if(index==0){ index=totalSlides-1; } else{ index--; } } for(i=0;i

[@arrvimal4043]

@@TheWebShala Thanks a Lot

[@Ragavsir]

Js:4 undefined please help me Length problem

[@TheWebShala]

Msg me on fb

[@nikunjgupta2878]

background music name??

[@TheWebShala]

which one ?

[@domaisan1702]

The music is great 😅

[@TheWebShala]

thanks

[@argaming9548]

Hey, I am just try to make a slider but my image is not sliding when i click on left button can you guys please explain Slider2 *{ margin: 0; padding: 0; } #container{ position: absolute; width: 1000px; height: 500px; border: 1px solid red; overflow: hidden; left: 200px; top: 20px; } #container_img img{ width: 1000px; height: 500px; background-size: cover; } #Symbol img{ position: absolute; width: 50px; height: 50px; top: 250px; left: 110px; cursor: pointer; } #Symbol #Symbol2 { left: 1250px; } var scroll1 = document.querySelector("#container_img").children; var left = document.querySelector("#Symbol1"); var right = document.querySelector("#Symbol2"); let index = 0; left.addEventListener("click",function(){ leftSlide() }) right.addEventListener("click",function(){ rightSlide() }) function leftSlide(){ if(index == scroll1.length-1){ index = 0; } else{ index++; } changeSlide(); } function changeSlide(){ for(let i=0; i

[@dynamic_damian]

Thanks but mine it not working

[@TheWebShala]

Check description for code

[@diegofernandez1489]

Uncaught ReferenceError: i is not defined at next (effect.js:38) at HTMLDivElement.nextSlide.onclick

[@diegofernandez1489]

(effect.js:38) for(i=0;i

[@TheWebShala]

@@diegofernandez1489 define i, let i

[@mateuszbronis3515]

JS doesn't work bro

[@TheWebShala]

what is error?

[@mateuszbronis3515]

The WebShala The code I wrote is identical, but the button don’t react

[@mateuszbronis3515]

@@TheWebShala Do you have a code somewhere to download?

[@TheWebShala]

drive.google.com/file/d/1qSLr9Bdapj6szcGKaxhMXLGlcFpTPGtx/view?usp=sharing

[@mateuszbronis3515]

The WebShala I found the solution. When I wrote ‘onClick’ like this it was error. When I wrote ‘onclick’ everything it’s ok. Thanks you for your help 👊🏻

[@altafhossainsadik4962]

Source code?

[@TheWebShala]

Check description for source code

[@altafhossainsadik4962]

@@TheWebShala Thanks a lot

[@SairajMane-nf6sn]

Try to explain

[@nikunjgupta2878]

background music name??