【问题标题】:how to create Dyamic React responsive carousel如何创建 Dynamic React 响应式轮播
【发布时间】:2024-05-23 04:05:02
【问题描述】:

我一直在 React JS 中的动态图像和视频库中工作。我想实现 Carusoal 以在滑块概念中查看图像和视频。

【问题讨论】:

标签: javascript reactjs react-redux jquery-ui-slider


【解决方案1】:

作为包安装

yarn add react-responsive-carousel

用法

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';

class DemoCarousel extends Component {
    render() {
        return (
            <Carousel>
                <div>
                    <img src="assets/1.jpeg" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="assets/2.jpeg" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <img src="assets/3.jpeg" />
                    <p className="legend">Legend 3</p>
                </div>
            </Carousel>
        );
    }
});

ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

// Don't forget to include the css in your page

// Using webpack or parcel with a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';

// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>

参考:https://www.npmjs.com/package/react-responsive-carousel

【讨论】:

  • 嗨@Makwana Prahlad,这是一个静态值,我有动态