Build a Slider with React.js

Source Code : github.com/Ziratsu/Slider-React
Enjoy ✌️

[@fernando200014]

I added this to make it autoplay: /* THIS */ import React, {useEffect, useState} from 'react' useEffect(()=>{ const interval = setInterval(()=>{ nextSlide(); }, 3000); return () => clearInterval(interval); });

[@chronoabi]

thanks bro I really needed that

[@thanhtrungnguyen1684]

thanks bro

[@james-rx8kw]

really tks bro i need that

[@chicopavomg]

Thanks Bro, you're the best

[@b.i.p165]

This is Amazing! Great job! You earned 1 sub!

[@sabrinalucianavieirapinto5602]

Worderful video tutorial! It was what I was seeking today!!

[@drfcozapata]

Thanks, thanks and thanks, a lot!!! You've saved my life. 😄 Blessings from Venezuela.

[@spencersedano]

Thank you, I just subscribed. It was a very good tutorial! I could understand most of it (becase I'm still getting used to React)

[@TheWebSchool]

Glad for you and thanks!

[@subhamshaw1726]

conditional rendering part specially really helped me. I was using it but getting problem. After seeing your's conditional rending part fo image I got the solution. great video

[@TheWebSchool]

Awesome 🚀

[@iXShadow]

Amazing tutorial! Very easy to follow thank you

[@Jeireme]

Je ne savais pas que Le Designer du Web avait une chaîne anglophone ! Merci beaucoup pour tous tes tutos, quelle que soit la langue 😄

[@captainalpha4853]

Very helpful! Keep making videos like this, Thanks. ♥️

[@Mourshid86]

Merci à vous pour ces explications j'ai implanté se carousel dans mon projet il est parfait :)

[@vitozdev]

awesome component and very structurated thanks

[@maxfox4615]

Source link for github doesn't work =(( Page is not found.

[@pritsapariya6391]

Thanks for such a simple and sweet tutorial ...

[@TheWebSchool]

You're welcome 🙌

[@bayasahamed1815]

Thanks for the video. It's an awesome one

[@abdulmalikzihad3542]

Nice man you made it so much easy. Thanks man

[@TheWebSchool]

With pleasure 🙏🏻

[@marianasavka1340]

nice work, thank you!

[@book.bezzublk]

Thank you! Amazing video! ❤

[@vetrisrv7764]

Thank you so much brother. It's really awesome. I'm a beginner. This video really helpful. Thanks a lot. Keep Going

[@techhouse182]

Thanks for this🤘amaz..stuff👌 keep going ❤️

[@jamezjaz]

Awesome content here ✔ Thanks for sharing!

[@huathengtang4645]

Thank You so much @Learn to create. You save my day. I searched many other sources but they have complicated setup but your video is exactly what I am looking for. Just for an enhancement request. is there a chance you could make another video to make the slide transition to left and right ?

[@TheWebSchool]

Maybe in another video, yes!

[@NOTHING-en2ue]

very great tutorial, thanks a lot ❤

[@Hunsenbargen]

Awesome tutorial man, thanks a lot! +1 sub

[@TheWebSchool]

You’re welcome 🔥

[@gerardojao]

Excellent video, Thank u

[@MARKOTHEDEV]

Cool stuff man

[@best_iyke]

Thanks for the video tutorial. It really help me. I would have loved it most if you implemented auto slide.

[@TheWebSchool]

Use a simple .setInterval()

[@markrobert835]

Oh mon Dieu l accent français ne nous quitte pas même en anglais force à toi mon reuf

[@joseleonardocrestoaguirre9283]

I had soft soft for a wNice tutorialle but never actually opened it because it looked too complex. TNice tutorials actually helped quite a bit. i an like for

[@jonathanalixpierredort8932]

Cool!!!

[@irfanakatkn1457]

Good guide for beginners)

[@user-ph5jm6st4n]

THANK YOU SOOOOOOO MUCH !!!!!!!!!

[@imanshokryeh5406]

it was very helpful tnx

[@lizaparkhomets4078]

thank you!

[@girmatesfaye7507]

best tutorial bro thank u

[@TheWebSchool]

🙌🙌

[@hexadecimalhexadecimal5241]

i deleted some of the source files when i created this project so my file structure is similar to yours where i start, but then react just show error anytime i delete a source file and wont let me continue

[@sirwisdom20]

Nice tutorial sir

[@motivationthoughts18]

Nice work

[@TheWebSchool]

Thanks!

[@cmb9299]

Very Good!

[@TheWebSchool]

Thank's Carlos!

[@piccapicca8704]

How did all of your image didnt show up when you use .map without conditional on 4:45 ? Curious to know

[@dmaberlin]

Thanks

[@ShahRukhKhan-oz7qu]

wow :)

[@FlutterMentor]

Hey man, great video ! Awesome work. Would it be possible to also make it change if a user (on a mobile device) tried to slide the image right or left to change them? What should I search to find that feature?

[@TheWebSchool]

Thanks dude, you need to look at the drag&drop events for desktop and touch events for mobile.

[@FlutterMentor]

@@TheWebSchool Thank you!

[@mayankpuvvala1546]

hey, your github link for this repository is not working, can you reupload it?

[@odegbiletimileyin7312]

The link to the source code no longer exist. Please is there a way out? Or anyone with a cloned version

[@instructor.lucas.sebastian]

else to it. How do I do that? Your answer would be Nice tutorialghly helpful and appreciated.

[@muhammadhusnain8201]

Nice bro❤️

[@TheWebSchool]

🙌🙌

[@andreayahiouche2625]

softING AROUND THE BUSH

[@ZENDASIAN]

💖💖💖💖💖💖

[@carrotiq6879]

your source code link is not working. Any new links??

[@carrotiq6879]

github link not opening pls broo update the link ASAP. Great video Btw

[@De_Bryan]

Good stuff! It would be nice if you created the same slider with auto-play.

[@TheWebSchool]

Hey thanks, you just have to use a setInveral() with a useEffect() and change the index.

[@De_Bryan]

@@TheWebSchool 👍

[@BobbyBundlez]

this is a rough version i wrote for you. basically on initial component mount you want an index at 0, then you run a function immediately that changes the index every second (setTimeout, 1000) then when you are mapping through the slides (lets say you have 3) then you want the index to go back to 0 AFTER it hits 2 (0, 1, 2) .... then when you map through the slides the index automatically changes and increases by 1 each second. hope this helps! const [index, setIndex]=useState(0) const changeSlide=()=>{ setTimeout(()=>{ if(index=2){ setIndex(0) } else{ setIndex(index=>index+1) } },[1000]) { changeSlide() },[index ]) (

[@De_Bryan]

@@BobbyBundlez Thanks alot. I am now doing react native. A little different but interesting stuff..with the jsx😀. 👍👍

[@GregoryArt1976]

github-link is not found

[@gabrielcampos5419]

i can't let me enter the link of your code

[@letzberandom263]

I’m new to coding I wanted to know what was the data slider for?

[@TheWebSchool]

Hey, it's just to provide some dummy data. Usually it comes from an API or a some databases.

[@gousiyaart2515]

Brother GitHub link not working

[@shubhamsingh1409]

Can you plz show a multi item carousel in react used in e-commerce websites?

[@TechX5others]

Earn a sub. Thanks man

Niye sildin abi çalıcaktım

[@aadhi7092]

Can you make a video about the auto slides, please

[@TheWebSchool]

You can do it by adding a setInterval buddy

[@fxckeddog2261]

Then watch other producer how they make their s, then try to use soft again by yourself. If you've repeat the steps before, co back

[@designcoded7585]

can you teach how to make auto animated slider also 3 to 4 images per slides

[@BobbyBundlez]

wrote this above for someone. hope this helps with automation this is a rough version i wrote for you. basically on initial component mount you want an index at 0, then you run a function immediately that changes the index every second (setTimeout, 1000) then when you are mapping through the slides (lets say you have 3) then you want the index to go back to 0 AFTER it hits 2 (0, 1, 2) .... then when you map through the slides the index automatically changes and increases by 1 each second. hope this helps! const [index, setIndex]=useState(0) const changeSlide=()=>{ setTimeout(()=>{ if(index=2){ setIndex(0) } else{ setIndex(index=>index+1) } },[1000]) { changeSlide() },[index ]) (

[@designcoded7585]

@@BobbyBundlez really thank you sooo soo much amazing and helpful

[@designcoded7585]

@@BobbyBundlez whats your channel name or any social media to follow you

[@BobbyBundlez]

@@designcoded7585 i legit just had to build this slider right now for work LMFAO.. so here ya go const [index, setIndex] = useState(0); const indexFunc = () => { setTimeout(() => { if (index === reviews.length - 1) { setIndex(0); } else { setIndex(prev => prev + 1); } }, 1000); }; useEffect(() => { indexFunc(); }, [index]); then you map through. in my case i couldnt map and had to hard code but u get the gist

[@BobbyBundlez]

@@designcoded7585 follow me and ask away man always love helping. Imma noob too but def able to code a lot of stuff like this without tutorials finally so msg me whenever

[@RafaelTrog]

how to make it draggable?

[@TheWebSchool]

It's a whole new problem, I did it in vanilla JS here if you can to grab the code : www.ui-delivery.com/Draggable%20Slider

[@pbharathi8549]

How to put this into infinite loop

[@BobbyBundlez]

this is a rough version i wrote for you. basically on initial component mount you want an index at 0, then you run a function immediately that changes the index every second (setTimeout, 1000) then when you are mapping through the slides (lets say you have 3) then you want the index to go back to 0 AFTER it hits 2 (0, 1, 2) .... then when you map through the slides the index automatically changes and increases by 1 each second. hope this helps! const [index, setIndex]=useState(0) const changeSlide=()=>{ setTimeout(()=>{ if(index=2){ setIndex(0) } else{ setIndex(index=>index+1) } },[1000]) { changeSlide() },[index ]) (

[@nics51]

settimeout

[@ToanPham-ek7jr]

how to let slide auto run ?

[@TheWebSchool]

Hey, use .setInterval()

[@ToanPham-ek7jr]

@@TheWebSchool thank you so much

[@ToanPham-ek7jr]

Anyway can u explain about this ' import { v4 as uuidv4 } from "uuid";' and why we use it on this part ?

[@amrabdelfattah3620]

Hahahaha t'es partout en Anglais et en Français

[@sumitrawat5317]

where is the source code?