Search
Question:
How to fix "slick-carousel/slick/slick.css" error in react?

Summary: 

If you are getting an error like: import "slick-carousel/slick/slick.css" and import "slick-carousel/slick/slick-theme.css"' error in react then probably, you have missed Slick Carousel Installation. 


This problem can be solved easily by installing the slick-carousel library, alongside react-slick, which is a wrapper:


You can install the Slick Carousel in your project using npm or yarn.

Using npm

npm install slick-carousel


Using Yarn

yarn add slick-carousel


Solution:

The complete code would look like: 

import React, { Component } from "react";

import Slider from "react-slick";

import Images from "../../../../assets/images/Images";

npm install slick-carousel react-slick


import "slick-carousel/slick/slick.css";

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


// IMAGES DATA FOR CAROUSEL

interface Data {

  imgSrc: string;

}


const data: Data[] = [

  {

    imgSrc: Images.Airbnb,

  },

  {

    imgSrc: Images.Fedex,

  },

  {

    imgSrc: Images.Google,

  },

  {

    imgSrc: Images.Hubspot,

  },

  {

    imgSrc: Images.Microsoft,

  },

  {

    imgSrc: Images.Walmart,

  },

  {

    imgSrc: Images.Airbnb,

  },

  {

    imgSrc: Images.Fedex,

  },

];


// CAROUSEL SETTINGS

export default class CompanyCarasouls extends Component {

  render() {

    const settings = {

      dots: false,

      infinite: true,

      slidesToShow: 4,

      slidesToScroll: 1,

      arrows: false,

      autoplay: true,

      speed: 2000,

      autoplaySpeed: 2000,

      cssEase: "linear",

      responsive: [

        {

          breakpoint: 1024,

          settings: {

            slidesToShow: 4,

            slidesToScroll: 1,

            infinite: true,

            dots: false,

          },

        },

        {

          breakpoint: 700,

          settings: {

            slidesToShow: 2,

            slidesToScroll: 1,

            infinite: true,

            dots: false,

          },

        },

        {

          breakpoint: 500,

          settings: {

            slidesToShow: 1,

            slidesToScroll: 1,

            infinite: true,

            dots: false,

          },

        },

      ],

    };


    return (

      <div

        style={{ textAlign: "center", marginTop: "20px", marginBottom: "20px" }}

      >

        <div

          className="mx-auto max-w-4xl px-4 sm:px-6 lg:max-w-7xl lg:px-8"

          style={{ margin: "auto", width: "100%" }}

        >

          <h2 className="text-midnightblue text-2xl font-semibold">

            Trusted by companies of all sizes

          </h2>

          <div className="py-14">

            <Slider {...settings}>

              {data.map((item, i) => (

                <div key={i}>

                  <img

                    src={item.imgSrc}

                    alt={item.imgSrc}

                    width={116}

                    height={36}

                  />

                </div>

              ))}

            </Slider>

          </div>

          <hr />

        </div>

      </div>

    );

  }

}


Explanation:

  • CSS Loader Configuration: If you're using Webpack to bundle your React application, make sure that you have appropriate loaders configured to handle CSS files.


  • For Create React App: If you're using Create React App, you don't need to configure webpack manually. CSS imports should work out of the box. Ensure that you're importing CSS files correctly in your components.


  • For Custom Webpack Configuration: If you have a custom webpack configuration, ensure that you have appropriate loaders configured to handle CSS files similar to the webpack configuration mentioned in the previous response.


Answered by: >Youssouf Oumar

Credit:> StackOverflow


Suggested blogs:

>How to manage the Text in the container in Django?

>Activating Virtual environment in visual studio code windows 11

>Fix webapp stops working issue in Django- Python webapp

>Creating a form in Django to upload a picture from website

>Sending Audio file from Django to Vue

>How to keep all query parameters intact when changing page in Django?

>Solved: TaskList View in Django


Submit
0 Answers
Top Questions
15-01-2024

Fix textarea typing not working issue when state is set through object

23-02-2024

Fix largest contentful paint issue in next js image

09-01-2024

How can I implement a toggle functionality in ReactJS?

22-12-2023

How to set up Redux Provider for Jest Testing using React

23-02-2024

Check if the months in column is existing to the departments using react

Related Questions

How to add product to favorite screen without an error?
img
How to fix "slick-carousel/slick/slick.css" error in react?
img
How to show status with red / green background depending on axios post result
img
Check if the months in column is existing to the departments using react
img
Fix largest contentful paint issue in next js image
img