项目作者: syadav214

项目描述 :
React component of Carousel inside a table styled in bootstrap
高级语言: JavaScript
项目地址: git://github.com/syadav214/react-carousel-table.git
创建时间: 2019-06-10T11:07:28Z
项目社区:https://github.com/syadav214/react-carousel-table

开源协议:MIT License

下载


react-carousel-table

React component of Carousel inside a table styled in bootstrap

Example

alt text

  1. <!-- Put bootstrap cdn link (like below) in index.html of your React App -->
  2. <!-- Latest compiled and minified CSS -->
  3. <link
  4. rel="stylesheet"
  5. href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  6. integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
  7. crossorigin="anonymous"
  8. />
  1. import React, { Component } from 'react';
  2. import 'font-awesome/css/font-awesome.min.css';
  3. import Carousel from 'react-carousel-table';
  4. const images = [
  5. {
  6. id: '1',
  7. url:
  8. 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500'
  9. },
  10. {
  11. id: '2',
  12. url:
  13. 'https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
  14. }
  15. ];
  16. class App extends Component {
  17. render() {
  18. return (
  19. <div>
  20. <div className="container">
  21. <br />
  22. Carousel in a Table
  23. <br />
  24. <table className="table" style={{ width: '80%' }}>
  25. <tbody>
  26. <tr>
  27. <td>Demo</td>
  28. <td>
  29. <Carousel images={images} pxs={100} ></Carousel>
  30. </td>
  31. </tr>
  32. </tbody>
  33. </table>
  34. </div>
  35. </div>
  36. );
  37. }
  38. }
  39. export default App;

Install

  1. npm install react-carousel-table
  2. npm install font-awesome

Props

images

An array of object with properties like ‘id’ and ‘url’.

  1. const images = [
  2. {
  3. id: '1',
  4. url:
  5. 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500'
  6. },
  7. {
  8. id: '2',
  9. url:
  10. 'https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
  11. }
  12. ];

pxs

Sets the width and height of image box.

License

MIT