Reactjs Full Page Slider Working Tutorial

Hello to all, welcome back to my blog. Today in this blog post, I am going to tell you, Reactjs Full Page Slider Working Tutorial.

For react js new comers, please check the below link:
React js Basic Tutorials

Friends now I proceed onwards and here is the working code snippet for Reactjs Full Page Slider Working Tutorial and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh reactjs setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

Guys you can skip this first step if you already have reactjs fresh setup:

npx create-react-app reactslider

cd reactslider

npm start // run the projec

2. Now friends, we need to run below commands into our reactjs project to install react slick slider modules:

npm i react-slick

npm install slick-carousel

npm start

3. Now friends we need to add below code into our src/App.js file to get final output on web browser:

import React from 'react';

import Slider from 'react-slick';


import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import './App.css';


class App extends React.Component
{
  
  render()
  {
    var settings = {
            dots: true,
            arrows: false,
            infinite: true,
            speed: 1000,
            slidesToShow: 1,
            slidesToScroll: 1,
           
    };
    return (
      <div>
        
        <Slider {...settings}>
            <div>
              <img src="http://placehold.it/350x150/000000"/>
            </div>
            <div>
            <img src="http://placehold.it/350x150/000000"/>
            </div>
            <div>
            <img src="http://placehold.it/350x150/000000"/>
            </div>
            <div>
            <img src="http://placehold.it/350x150/000000"/>
            </div>
            
          </Slider>
        
      </div>  
) } }
 export default App;

4. Now friends we need to add below code into our src/App.css file to get final output on web browser:

.slick-slide img {
  display: block;
  width: 100%
}

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks