How to Create a Perfect Carousel Nav with React and Styled Component

Many times I search for a good example or carousel boilerplate to use in my projects. Today I want to show you how to make a perfect one with React and styled-component.

For those who do not know about React. React is a JavaScript library for building user interfaces regarding their website explaining

styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS using a technique called CSS-in-JS. a simple version of it you can write CSS in a javascript file.

Let's build a clean project with CRA ( create-react-app )

npx create-react-app carousel-toturial

You can find about NPX here

Times to install all libraries we are going to use today.

yarn add styled-components pure-react-carousel polished

now times to configure styled-component

Add below code at the end of the package.json file.

"resolutions": {
"styled-components": "^5"
}

Now we are ready to code. Let's clean up the project and remove unused code from app.js then test the styled-component is installed correctly or no

Now let’s import everything we need from pure-react-carousel

Now we need a div to wrap our carousel and call it SliderWrapper.

we need to find images for our carousel you can choose any image from the internet but make sure the resolution for images are the same for example I will use this resolution 1000 * 500.

we need an image Styled component to render the image as background add the below code to your files

Do you remember at the top we import some components from pure-react-carousel now we need to use them.

Untill now you have to have something like this Horay

first import RGB from polished library like this

import { rgb } from 'polished'

We need to position our buttons to the center of carousel for doing that we need a wrapper or div and we are going to call it Nav.

One of the beauties of StyledComponent is to give you the ability to write share styles. In our case, we are going to call it sharedStyle then we create our next and back button and we pass our share styles to them

The final touch will be adding those codes to our app like the below image.

Link to repository

https://github.com/prince1456/Medium-slideshow

Useful link:

  1. create-react-app
  2. styled-components
  3. pure-react-carousel

How to find me:

Linkedin

Instagram

meetup

Please like and follow me thanks that means alot for me and help me to write more

--

--

--

If you want to know more about me follow me on instagram and Linkedin and shoot me a DM

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A GraphQL introduction in Four Easy Steps

GraphQL giving you only what you need not the whole buffet.

React VS Vue.js: Clash of the Frontend Giants

Solving Coding Challenges with JavaScript Functions on Autocode

What are Conditionals in JavaScript?

What is Node?

Reusing Access Tokens in Firebase with React and Node

Learn — Master JavaScript with the most complete JavaScript course on the market!

Node.js: URL based requisitions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
React Dojo

React Dojo

If you want to know more about me follow me on instagram and Linkedin and shoot me a DM

More from Medium

Building an Instagram clone with TypeScript

Using framer-motion in React to add animation to Routes within your app.

Infinite scrolling with ReactJS

How to create a React App using Parcel