javascript - React carousel using React-Multi-Carousel - Stack Overflow

admin管理员组

文章数量:1327926

I am trying to implement for a card ponent that has data ing from a rest api. So far my code is as follows, but the carousel does not seem to be implementing? Any ideas why?

code.js

import React, { Component } from 'react';
import './news.css';
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,
    },
};

class News extends Component {

    state = {
        loading: false,
        data: [],
        headline: []
    }

    ponentDidMount() {
        this.setState({ loading: true })
        console.log('app mounted');
        fetch(';category=business&apiKey=8ee8c21b20d24b37856fc3ab1e22a1e5')
            .then(data => data.json())
            .then(data => this.setState({ data: data.articles, loading: false }, () => console.log(data.articles)))
    }

    render() {
        return (
            <div className="about container">
                <h1 className="text-left"><b>Latest News</b></h1>
                {this.state.loading
                    ? "loading..."
                    : <div>
                        {this.state.data.map((post, indx) => {
                            return (
                                <Carousel responsive={responsive}>
                                <div className="card text-left mt-5" key={indx}>
                                    <img className="media-img card-img-top" src={post.urlToImage} alt="Alt text"></img>
                                    <div className="card-body">
                                        <h5 className="card-title">{post.title}</h5>
                                        <p className="card-text">{post.description}</p>
                                        <a href={post.url} target="_blank" rel="noopener noreferrer">Read More</a>
                                    </div>
                                </div>
                                </Carousel>
                            )
                        })}
                    </div>
                }
            </div>
        )
    }
}
export default News;

I am trying to implement https://www.npmjs./package/react-multi-carousel for a card ponent that has data ing from a rest api. So far my code is as follows, but the carousel does not seem to be implementing? Any ideas why?

code.js

import React, { Component } from 'react';
import './news.css';
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,
    },
};

class News extends Component {

    state = {
        loading: false,
        data: [],
        headline: []
    }

    ponentDidMount() {
        this.setState({ loading: true })
        console.log('app mounted');
        fetch('https://newsapi/v2/top-headlines?country=us&category=business&apiKey=8ee8c21b20d24b37856fc3ab1e22a1e5')
            .then(data => data.json())
            .then(data => this.setState({ data: data.articles, loading: false }, () => console.log(data.articles)))
    }

    render() {
        return (
            <div className="about container">
                <h1 className="text-left"><b>Latest News</b></h1>
                {this.state.loading
                    ? "loading..."
                    : <div>
                        {this.state.data.map((post, indx) => {
                            return (
                                <Carousel responsive={responsive}>
                                <div className="card text-left mt-5" key={indx}>
                                    <img className="media-img card-img-top" src={post.urlToImage} alt="Alt text"></img>
                                    <div className="card-body">
                                        <h5 className="card-title">{post.title}</h5>
                                        <p className="card-text">{post.description}</p>
                                        <a href={post.url} target="_blank" rel="noopener noreferrer">Read More</a>
                                    </div>
                                </div>
                                </Carousel>
                            )
                        })}
                    </div>
                }
            </div>
        )
    }
}
export default News;

• javascript
• reactjs
• react-multi-carousel

Share Improve this question Follow edited Apr 23, 2020 at 9:12 Mosh Feu 29.3k1818 gold badges9393 silver badges141141 bronze badges asked Dec 24, 2019 at 0:10 SoleSole 3,3501818 gold badges7171 silver badges134134 bronze badges 2

• could you please put news.css to reproduce the problem. – Alex Commented Dec 24, 2019 at 11:06
• @Alex, Can you help me out here please here stackoverflow./questions/59658109/react-carousel-with-text – user12640294 Commented Jan 9, 2020 at 6:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The problem is you put Carousel insid map function

 {this.state.data.map((post, indx) => {
                            return (
                                **<Carousel responsive={responsive}>**
                                <div className="card text-left mt-5" key={indx}>
                                    <img className="media-img card-img-top" src={post.urlToImage} alt="Alt text"></img>
                                    <div className="card-body">
                                        <h5 className="card-title">{post.title}</h5>
                                        <p className="card-text">{post.description}</p>
                                        <a href={post.url} target="_blank" rel="noopener noreferrer">Read More</a>
                                    </div>
                                </div>
                                **</Carousel>**
                            )
                        })}

also, I think you should change your CSS file. your images are too large. try this one:

 {this.state.loading
                    ? "loading..."
                    : <div>
                       <Carousel responsive={responsive}>
                        {this.state.data.map((post, indx) => {
                            return (

                                <div className="card text-left mt-5" key={indx}>
                                    //<img className="media-img card-img-top" src={post.urlToImage} alt="Alt text"></img>
                                <img style={{ height: '100px' }} src={post.urlToImage} alt="Alt text"></img>

                                    <div className="card-body">
                                        <h5 className="card-title">{post.title}</h5>
                                        <p className="card-text">{post.description}</p>
                                        <a href={post.url} target="_blank" rel="noopener noreferrer">Read More</a>
                                    </div>
                                </div>

                            )
                        })}
                         </Carousel>
                    </div>
                }

temporrary codesandbox sample

本文标签： javascriptReact carousel using ReactMultiCarouselStack Overflow