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
09-01-2024

How to update the react component after clicking on the search button?

19-02-2024

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

23-02-2024

Fix largest contentful paint issue in next js image

27-12-2023

How to add product to favorite screen without an error?

15-01-2024

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

Related Questions

How to set up Redux Provider for Jest Testing using React
img
How to add product to favorite screen without an error?
img
How to fix "slick-carousel/slick/slick.css" error in react?
img
Fix largest contentful paint issue in next js image
img
How to show status with red / green background depending on axios post result
img

What Our Clients Say About Us

Client satisfaction is our ultimate goal. Here are some kind words of our precious clients they have used to express their satisfaction with our service.

Why Choose Us ?

We endow businesses with flexible engagement models based on their unique needs. Our strength lies in state-of-the-art technology and affordable consulting services. Try us for fast POCs, full-fledged applications, or technology consulting. Always available for your service.