react-multi-carousel is not rendering

Question

I'm getting data from the state. Now I want to make a carousel slider using react-multi-carousel

I am trying to implement https://www.npmjs.com/package/react-multi-carousel for a news card component that has data coming from the API. So far my code is as follows, but the carousel does not seem to be implementing?

Child Component

import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css'

    const responsive = {
        superLargeDesktop: {
          breakpoint: { max: 4000, min: 3000 },
          items: 5
        },
        desktop: {
          breakpoint: { max: 3000, min: 1024 },
          items: 3
        },
        tablet: {
          breakpoint: { max: 1024, min: 464 },
          items: 2
        },
        mobile: {
          breakpoint: { max: 464, min: 0 },
          items: 1
        }
    };
    const size = 15;
    const Itemlist = props.data.slice(0, size).map((item,id) => {
        return(
            <div className="item px-2 col-md-3" key={item.title}>
            <div className="alith_latest_trading_img_position_relative">
                <figure className="alith_post_thumb"> 
                <Link
                to={{
                    pathname : `/details/${id}`,
                }}
                >
                <img
                    alt=""
                    src={item.multimedia ? item.multimedia[0].url : image}
                    className="w-100 thumbnail"
                />
                </Link>
                </figure>
                <div className="alith_post_title_small">
                <Link
                to={{
                    pathname : `/details/${id}`,
                }}
                ><strong>{item.title.length > 30 ? item.title.substring(0,30) + ".." : item.title}</strong>
                </Link>
                <p className="meta">
                    <span>{`${moment(item.published_date).fromNow()}`}</span>
                </p>
                </div>
            </div>
        </div>
        )
    })
    return (
        <React.Fragment>
            <Carousel responsive={responsive}>
                  {Itemlist}
            </Carousel>
        </React.Fragment>
    );
};

Parent Component

    state = {
        items : []
    }
    fetchLatestNews = () => {
        api.getRealFeed()
        .then(response=>{
            this.setState({
                items : response.data.results
            });
        })
    }
    componentDidMount = () => {
        this.fetchLatestNews();
    }
    render(){
        return(
        <React.Fragment>
            <Item data={this.state.items}/>
        </React.Fragment>
)}};

Mind sharing all of the code for your news card component? – joshkmartinez Feb 10 '20 at 06:58 — joshkmartinez, Feb 10 '20 at 06:58
Added @joshkmartinez. Please have a look – Rajib karmaker Feb 10 '20 at 07:13 — Rajib karmaker, Feb 10 '20 at 07:13
Have you confirmed that you have data in props.data ? – Krina Soni Feb 10 '20 at 07:40 — Krina Soni, Feb 10 '20 at 07:40
yes. I'm getting data -- {item.title} – Rajib karmaker Feb 10 '20 at 07:43 — Rajib karmaker, Feb 10 '20 at 07:43
Is there anyone for help – Rajib karmaker Feb 10 '20 at 09:52 — Rajib karmaker, Feb 10 '20 at 09:52

J.dev · Answer 1 · 2022-04-11T17:31:49.863

6

I had the same issue,

Take a look at the specific props. You can add a class to the container, slide or item for adding your css rules. In my case, I had to define a width to the containerClass.

<Carousel
   containerClass="carousel-container"
   itemClass="carousel-item"
>
 ... // Your carousel here

And in your css file:

.carousel-container {
  width: 100%;
  ...
 }

edited Apr 11 '22 at 17:31

answered Jun 04 '20 at 10:02

J.dev

844
3
12
22

score 3 · Answer 2 · answered Dec 08 '20 at 16:33

I'm not sure if this will help, but I had an issue where the carousel becomes empty when I set the prop infinity to true. Turns out it was because the website I'm working on uses bootstrap rtl.

To fix the issue I just changed the direction of the carousel container to be ltr. Something like this:

[dir="rtl"] .carousel-container{
  direction: ltr;
}

score 2 · Answer 3 · answered Apr 12 '22 at 12:01

2

i fix it by adding width properties to the container class

if you using tailwind u need to can set the containerClass width

<Carousel
containerClass={`w-full`}
>
   {item}
</Carousel>

answered Apr 12 '22 at 12:01

Zacquio

309
3
2

score 0 · Answer 4 · answered Nov 19 '22 at 11:41

0

I believe you should add import 'react-multi-carousel/lib/styles.css' to your top-level file NOT in the child component file. E.g: _app.tsx for NextJS. It took me about 30m to find out that.

answered Nov 19 '22 at 11:41

Binh Trong

9
1
3

score 0 · Answer 5 · answered Nov 23 '22 at 11:02

This worked fine for me in functional component: I'm late but it can be usefull to anyone in future. https://www.npmjs.com/package/react-multi-carousel

import React, { useState } from 'react';
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

    const SampleCode = props => {
    const [maindata, setMaindata] = useState([{'name':"one"}, 
    {'name':"two"}]);
    const responsive = {
    desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 3,
        slidesToSlide: 3 // optional, default to 1.
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 2,
        slidesToSlide: 2 // optional, default to 1.
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1,
        slidesToSlide: 1 // optional, default to 1.
    }
    };

    return (
    <div>

    <Carousel
    swipeable={false}
    draggable={false}
    showDots={true}
    responsive={responsive}
    ssr={false} // means to render carousel on server-side.
    infinite={true}
    autoPlay={false}
    autoPlaySpeed={1000}
    keyBoardControl={true}
    customTransition="all .5"
    transitionDuration={500}
    containerClass="carousel-container"
    // removeArrowOnDeviceType={["tablet", "mobile"]}
    //deviceType={true}//{this.props.deviceType}
    dotListClass="custom-dot-list-style"
    itemClass="carousel-item-padding-40-px"
    className='location-jobs '
   >

       {
        maindata.map((each) => {
            return (
                <div className='item p-3 mx-3 d-flex'>
                    {each.name}
                </div>

            )
        })
        }

         </Carousel>
       </div>
    );

}

export default SampleCode;

score 0 · Answer 6 · answered Jan 19 '23 at 06:41

It is having width issues like I was too using in my project, I have to set the width by using media queries. I don't know why the developer hasn't fixed the issue, but you can try giving a default width in inspect section and then setting up the width by using media queries.

react-multi-carousel is not rendering

6 Answers6