Build A Simple Carousel Component In ReactJS

​‪@OkayDexter‬
#reactjs #carouselcomponent #tutorial #okaydexter
Build A Simple Carousel Component In ReactJS
npm package : www.npmjs.com/package/react-e...
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
Code : github.com/abhishek305/react-...
----------------------More on ReactJS --------------------------
React.js Documentation : reactjs.org/docs/hello-world....
Todo list app code :github.com/abhishek305/Todo-L...
Todolist app : • ReactJS Tutorials For ...
User Registration Form : • ReactJS Tutorial For B...
Profile Page App : • ReactJS Tutorial For B...
-------------- More on python ---------------------------
Registration form with Sqlite3 : • Registration Form Usin...
Registration form with just the GUI : • Registration Form Usin...
Calculator using tkinter : • GUI Calculator Using P...
PyQt5 Designer Tutorial Video - • PyQt5 Designer Tutoria...
PyQt5 Student Record Maintainer Link - • PyQt5 Designer Tutoria...
PyQt5 Installation Guide - pypi.org/project/PyQt5/
Tkinter tutorials : • GUI Application with P...
----------------- Video Playlist ------------------------------
Python MongoDB Guide : • MongoDB Tutorials with...
Flask python : • Flask python
Python Basics : • Python 3 Basic Tutoria...
OpenCV Python : • OpenCV Tutorials
Thanks for watching !!!!
Like, Share, Comment and Subscribe.
Follow me on my social network handles
Instagram : OkayDexter
Reddit : OkayDexter
Dev.to: @abhishek305
Github :abhishek305

[@maxlio8625]

The tutorial was great, thank you!

[@OkayDexter]

Glad it was helpful!

[@goodcoder4953]

Thank you brother, Your video is help me to pass in exam✊✊✊

[@salemouail627]

Thanks this is so helpful

[@ANKITSINGH-vm1zl]

How can apply style changes in the elements of carousel ,like the arrows?

[@raphaelamericano4115]

Great Tut!

[@kmohan2541]

Thanks for doing this video

[@harpit5905]

Authentic work

[@chaitanyadani4273]

Where should I get the built in props for Carousel component? And I want to go on first item directly after last. How should I do it?

[@dheerajaluri8699]

hi can we do this by not using any external library i am trying to achieve this but not using any library

[@ravindrakumara.]

I have questions about multi items carousal connect with rest api items/image not show and move but show bunch. So how to bro?

[@dodofkdkhowdo6165]

Hi! Is there a way to remove the buttons? Thanks!

[@hifzaarshad]

very helpful

[@apnagamer61]

Thanks Abhi 💓

[@cristovaoneto619]

Wow I actually spent one week developing this kind of component by myself, and now it's almost like this library... At least I learned a lot during the process

[@sele-nap]

Same here ahah

[@fullstackbusiness325]

​ @Séléna P can I have the git hub repo, so I can study ur code

[@fullstackbusiness325]

can I have the git hub repo, so I can study ur code

[@totfosk]

i feel you. I spent 209183091823091823 hours to figure out how to have the dots highlight together with the top.

[@henriquet.tyminski3223]

very cool,tks

[@arkmy]

Thank you

[@deepam9644]

I need help I cloned the repo into my code editor but when I say npm start i just get sh: react-scripts: command not found what should i do?

[@iancannon6562]

If I implement this using a set of a/v links, is there a way to make the a/v automatically STOP playing when switching between elements in the carousel?

[@dl.26th11]

Thanks man

[@jorgevalencia4825]

how can I jump the item?, for example, menu(opc 1, opc 2, opc 3) and i have de carousel (opc1, opc 2, opc 3), when I press opc 1 in the menu, it redirects me to opt 1 of the carousel.. somebody know? :(

[@danielosariemen3824]

helpful video thanks alot

[@ishanmadushanka3709]

thank you bro

[@nadeemchoudhary2447]

Thanks man but please how can i make it loop ?

[@onyekachigodswill8987]

Thanks man but how can I make it to be an auto slider

[@zainwasem]

thanks

[@codingconsole5234]

Thanks Sir.. It helped me a lot

[@techgix]

please how do i customize the buttons

[@milanchoudhary5941]

How can we make it for infinite scroll

[@vrkinformationalbullet5996]

loved you broo

[@tuantrantrung9825]

how can slide auto switch ?

[@verofm]

How can i add photos from firebase?

[@edberaga]

How to change the carousel style?

[@ngochieunguyen5448]

it's amazing. but if items are many cards which have many height, so how do you do to display them with a similar height.

[@ItsRawrTopia]

Css on that class and make all classes with that name set to that height

[@mohammedanasdanish7509]

you can give fixed height to the container of the images using css

[@marcelkibor256]

Make sure all your images are of same size. I like using multiple image resizer.

[@warshipwarriors]

How do we get the source code

[@bansarijnext3014]

Thank you so much for this....but dude can we add auto-play instead of clicking on arrow for sliding image

[@OkayDexter]

Apparently this npm module doesn't support auto play you can check this : www.npmjs.com/package/react-responsive-carousel

[@bansarijnext3014]

@@OkayDexter thx ...btw i have done with this using enableAutoPlay prop

[@OkayDexter]

great to hear that 👍

[@usamamuhammad7395]

@@bansarijnext3014 can you give me more details please?

[@bansarijnext3014]

@@usamamuhammad7395 You can check it out the list of props, for auto play i have used 'enableAutoPlay' prop sag1v.github.io/react-elastic-carousel/

[@onyekachigodswill8987]

Thanks man but please how can i make it auto sliding ?

[@OkayDexter]

you can look for 'enableAutoPlay' prop for this library check the documents

[@sakshikalunge3728]

I'm still not getting how to insert images into it!

[@aahadqureshi2183]

why

[@OkayDexter]

You can create a state, name it as images(it should be an array) & try to map/iterate the image url in component using an image tag.

[@Grantmoneyx]

@@OkayDexter That is exactly what I did.

[@fuongbregas]

import your image: import image1 from './image folder'; replace title in item array with 'slide: image1' and so on if you have more images. replace item.title in render with

[@sakhiimam388]

thanks sir but i need autoplay can you help me please

[@kiraReen]

where is the script code, the brake?

[@aldairvs]

Warning: Failed prop type: Invalid prop `children` of type `object` supplied to `Track`, expected `array`.

[@juwonadaniel]

({children}) --- you need to destructure it

[@you3667]

if you wanner remove dots, add css .sc-Axmtr.jBnCOy.rec.rec-pagination { display: none; }

[@nobody124...]

where to apply this how to use this class

[@souvikdhar9333]

Can we use this react-native as well?

[@OkayDexter]

yes

[@souvikdhar9333]

Okay Dexter Can you please guide me I am new to it?

[@charbelmansour8925]

cArOuZel

[@bca1023]

Is it compatible with IE 11 Browser?

[@OkayDexter]

yes

[@donnovanplays]

It's only a react component, isn't it?

[@raba650]

The current docs don’t even have an infinite option.

[@leonardocamargo5412]

How to customize it ? I want to change color and style of arrows and dots, how to dot it ?

[@OkayDexter]

try to apply custom css to the html elements used in there

[@aadityantr3113]

@@OkayDexter its not working

[@aadityantr3113]

@@OkayDexter there is no button in that html

[@bikashmahapatra4118]

there is no infinite scroll for this pkg

[@daylight-op5vv]

firmado por tua nai que e unha santa

[@tariq101]

palyback x 1.75

[@bharathvegi8696]

Well understand but not in clear form

[@user-kv5ze5qc2b]

Please, add titre )

[@rhyleyplant3421]

Suggestion. Dont spend 40 seconds explaining what a file structure is. go faster. Anyone who is looking at this most likely understands react so stop

[@pamphilemkp5841]

Sure bro, I was following but the explanation of what he was about to do was way too much

[@beardedraider4751]

Yo you need to chill

[@abdullahfaisol4148]

ReferenceError: styled is not defined

[@pedrobrandao23]

should install styled components " npm install --save styled-components "

[@masoudhey6843]

bro why are you explaining about Fragments and how to install React ? its a Carousel video just talk about carousel . tnx

[@NoumanKhan-ck7vx]

click bait

[@8koi245]

too much explanation lol just use React Elastic Carousel guys

[@ZahidKhan-th8pz]

Sale kya batau time waste

[@MohiyuddinShaikh]

Dislike for the clickbait and not mentioning the use of library in the title. Misleading.

[@shakilahmed6870]

People who search for carousel, already knows what is carousel. Stop wasting freaking time @*&#-+&&🤬