CodePaper
About
Services
BlogContact

Filed Under:

Using the React Slick Library in Gatsby

Overview Why should you use React Slick for your Carousels in Gatsby? In summary, it is the most popular React Carousel library out there with 8000 stars as of this writing. There is a ton of customization too such as `pause on hover` and `responsive carousels` which let you determine ...

By Alex Quasar
react-slick-carousel-library

Overview

Why should you use React Slick for your Carousels in Gatsby? In summary, it is the most popular React Carousel library out there with 8000 stars as of this writing. There is a ton of customization too such as `pause on hover` and `responsive carousels` which let you determine how many images to show at once depending on the screen size.

Installation

Install the two packages

npm i react-slick slick-carousel

Import the CSS

Make sure to import the CSS! This is important otherwise your images will not show up!

I think the cleanest way is to use the CDN, which is adding the following to the index.html file

// before the closing head tag public ->index.html
  <link
      rel="stylesheet"
      type="text/css"
      charset="UTF-8"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
    />

Rendering the Slider

In the file you want your slider to show up we will need two things. 1st thing is the import the Slider component from `react slick`. After will need to call this with some settings.

import React from 'react';
import styled from '@emotion/styled';
import Slider from 'react-slick';

import Image from 'gatsby-image';
import ImageDataHook from '../hooks/contentful/ImageDataHook';



const MyFunkySlider= () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 1000,
    autoplaySpeed: 3000,
    fadeIn: false,
    autoplay: true,
    pauseOnHover: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 1000,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          infinite: true,
          dots: true,
        },
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };
  const data = imageDataHook();

  // destructuring
  const {
    pictures,
  } = data;
  const StyledImage = styled(Image)`
    border-radius: 1rem;
    max-width: 80rem;
    margin: 0 auto;
    margin-bottom: 2rem;
  `;
  return (
        <ImageContainerSlider>
 
          <Slider {...settings}>
            {data.pictures.map((image, i) => (
              <SliderContainer2 key={i}>
                <StyledImage fluid={image.fluid} />
                <span>{image.description}</span>
              </SliderContainer2>
            ))}
          </Slider>
        </ImageContainerSlider>
};

export default MyFunkySlider;

Hopefully that is pretty self explanatory. Inside the defined settings variable is where all the slider settings can be tweaked.

Continue Reading

Navigation
HomeAboutServicesBlogContactPrivacy PolicyTerms & Conditions
Follow Us
Services
Websites
Contact Us

codepaper.dev@gmail.com

587.501.7726

Subscribe To Our Newsletter

Stay up to the date with the latest in Automation and CodePaper by subscribing to our newsletter

Special Thanks To