组件演示

[{"title":"基本使用","id":"components-carousel-demo-basic","tags":[],"filepath":"site/components/carousel/demo/basic.md","directory":"components/carousel/demo","filename":"basic","meta":{"title":"基本使用","description":"\n","order":"0","filepath":"site/components/carousel/demo/basic.md","filename":"basic","directory":"components/carousel/demo","id":"components-carousel-demo-basic","template":"demos","html":"<style type=\"text/css\">.demo {\n width: 400px;\n height: 225px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.demo</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">400px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">225px</span></span></span>;\n}</span>\n\n<span class=\"hljs-class\">.code-box</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">100%</span></span></span>;\n}</span>\n\n<span class=\"hljs-comment\">/* CSS END JS START*/</span>\n</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { width: 1000 } },\n React.createElement(\n _uxcore.Carousel,\n { className: 'demo', autoplay: true, pauseOnHover: true },\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg', style: { width: '100%' } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', style: { width: '100%' } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', style: { width: '100%' } })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-carousel-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n\n<span class=\"hljs-keyword\">import</span> { Carousel } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">1000</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Carousel</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo\"</span> <span class=\"hljs-attribute\">autoplay</span> <span class=\"hljs-attribute\">pauseOnHover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">img</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> '<span class=\"hljs-attribute\">100</span>%' }} /&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">img</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> '<span class=\"hljs-attribute\">100</span>%' }} /&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">img</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> '<span class=\"hljs-attribute\">100</span>%' }} /&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Carousel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-carousel-demo-basic'));\n</span></code></pre></div>"},"status":"public","toc":""},{"title":"淡入淡出","id":"components-carousel-demo-fade","tags":[],"filepath":"site/components/carousel/demo/fade.md","directory":"components/carousel/demo","filename":"fade","meta":{"title":"淡入淡出","description":"\n<p>fade 为 true 时,切换效果为淡入淡出</p>\n","order":"1","filepath":"site/components/carousel/demo/fade.md","filename":"fade","directory":"components/carousel/demo","id":"components-carousel-demo-fade","template":"demos","html":"<style type=\"text/css\">.demo {\n width: 400px;\n height: 225px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.demo</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">400px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">225px</span></span></span>;\n}</span>\n\n<span class=\"hljs-class\">.code-box</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">100%</span></span></span>;\n}</span>\n\n<span class=\"hljs-comment\">/* CSS END JS START*/</span>\n</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { width: 1000 } },\n React.createElement(\n _uxcore.Carousel,\n { className: 'demo', autoplay: true, pauseOnHover: true, fade: true },\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg', style: { width: '100%' } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', style: { width: '100%' } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', style: { width: '100%' } })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-carousel-demo-fade'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n\n<span class=\"hljs-keyword\">import</span> { Carousel } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">1000</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Carousel</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo\"</span> <span class=\"hljs-attribute\">autoplay</span> <span class=\"hljs-attribute\">pauseOnHover</span> <span class=\"hljs-attribute\">fade</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">img</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> '<span class=\"hljs-attribute\">100</span>%' }} /&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">img</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> '<span class=\"hljs-attribute\">100</span>%' }} /&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">img</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> '<span class=\"hljs-attribute\">100</span>%' }} /&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Carousel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-carousel-demo-fade'));\n</span></code></pre></div>"},"status":"public","toc":""},{"title":"多模块轮播(单次)","id":"components-carousel-demo-multiple","tags":[],"filepath":"site/components/carousel/demo/multiple.md","directory":"components/carousel/demo","filename":"multiple","meta":{"title":"多模块轮播(单次)","description":"\n","order":"2","filepath":"site/components/carousel/demo/multiple.md","filename":"multiple","directory":"components/carousel/demo","id":"components-carousel-demo-multiple","template":"demos","html":"<style type=\"text/css\">.demo-multiple {\n width: 1000px;\n height: 225px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.demo-multiple</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">1000px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">225px</span></span></span>;\n}</span>\n\n<span class=\"hljs-class\">.code-box</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">100%</span></span></span>;\n}</span>\n\n<span class=\"hljs-comment\">/* CSS END JS START*/</span>\n</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var images = ['https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB1mYJ_aLDH8KJjy1XcXXcpdXXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB11MV_aLDH8KJjy1XcXXcpdXXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB11Op4aMnD8KJjy1XdXXaZsVXa-400-225.jpg'];\n return React.createElement(\n 'div',\n { style: { width: 1000 } },\n React.createElement(\n _uxcore.Carousel,\n { className: 'demo-multiple', autoplay: true, pauseOnHover: true, slidesToShow: 3 },\n images.map(function (url) {\n return React.createElement(\n 'div',\n { style: { margin: '0px 2px' } },\n React.createElement('img', { src: url, style: { width: '100%' } })\n );\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-carousel-demo-multiple'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Carousel } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n const images = [\n 'https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB1mYJ_aLDH8KJjy1XcXXcpdXXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB11MV_aLDH8KJjy1XcXXcpdXXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB11Op4aMnD8KJjy1XdXXaZsVXa-400-225.jpg',\n ];\n return (\n &lt;div style={{ width: 1000 }}&gt;\n &lt;Carousel className=\"demo-multiple\" autoplay pauseOnHover slidesToShow={3}&gt;\n {images.map(url =&gt; (\n &lt;div style={{ margin: '0px 2px' }}&gt;&lt;img src={url} style={{ width: '100%' }} /&gt;&lt;/div&gt;\n ))}\n &lt;/Carousel&gt;\n &lt;/div&gt;\n );\n }\n}\n\nReactDOM.render(\n &lt;Demo /&gt;\n, document.getElementById('components-carousel-demo-multiple'));\n</code></pre></div>"},"status":"public","toc":""},{"title":"多模块轮播(成组)","id":"components-carousel-demo-multiple-group","tags":[],"filepath":"site/components/carousel/demo/multiple-group.md","directory":"components/carousel/demo","filename":"multiple-group","meta":{"title":"多模块轮播(成组)","description":"\n","order":"3","filepath":"site/components/carousel/demo/multiple-group.md","filename":"multiple-group","directory":"components/carousel/demo","id":"components-carousel-demo-multiple-group","template":"demos","html":"<style type=\"text/css\">.demo-multiple {\n width: 1000px;\n height: 225px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.demo-multiple</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">1000px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">225px</span></span></span>;\n}</span>\n\n<span class=\"hljs-class\">.code-box</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">100%</span></span></span>;\n}</span>\n\n<span class=\"hljs-comment\">/* CSS END JS START*/</span>\n</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var images = ['https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB1mYJ_aLDH8KJjy1XcXXcpdXXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB11MV_aLDH8KJjy1XcXXcpdXXa-400-225.jpg', 'https://img.alicdn.com/tfs/TB11Op4aMnD8KJjy1XdXXaZsVXa-400-225.jpg'];\n return React.createElement(\n 'div',\n { style: { width: 1000 } },\n React.createElement(\n _uxcore.Carousel,\n { className: 'demo-multiple', autoplay: true, pauseOnHover: true, slidesToShow: 3, slidesToScroll: 3 },\n images.map(function (url) {\n return React.createElement(\n 'div',\n { style: { margin: '0px 2px' } },\n React.createElement('img', { src: url, style: { width: '100%' } })\n );\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-carousel-demo-multiple-group'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Carousel } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n const images = [\n 'https://img.alicdn.com/tfs/TB1.kR0aTnI8KJjy0FfXXcdoVXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB1HSBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB1GmBZaIrI8KJjy0FhXXbfnpXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB1mYJ_aLDH8KJjy1XcXXcpdXXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB11MV_aLDH8KJjy1XcXXcpdXXa-400-225.jpg',\n 'https://img.alicdn.com/tfs/TB11Op4aMnD8KJjy1XdXXaZsVXa-400-225.jpg',\n ];\n return (\n &lt;div style={{ width: 1000 }}&gt;\n &lt;Carousel className=\"demo-multiple\" autoplay pauseOnHover slidesToShow={3} slidesToScroll={3}&gt;\n {images.map(url =&gt; (\n &lt;div style={{ margin: '0px 2px' }}&gt;&lt;img src={url} style={{ width: '100%' }} /&gt;&lt;/div&gt;\n ))}\n &lt;/Carousel&gt;\n &lt;/div&gt;\n );\n }\n}\n\nReactDOM.render(\n &lt;Demo /&gt;\n, document.getElementById('components-carousel-demo-multiple-group'));\n</code></pre></div>"},"status":"public","toc":""},{"title":"大指示器","id":"components-carousel-demo-large-arrow","tags":[],"filepath":"site/components/carousel/demo/large-arrow.md","directory":"components/carousel/demo","filename":"large-arrow","meta":{"title":"大指示器","description":"\n<p>当轮播较大时,使用大的指示器会有更好的视觉体验。</p>\n","order":"4","filepath":"site/components/carousel/demo/large-arrow.md","filename":"large-arrow","directory":"components/carousel/demo","id":"components-carousel-demo-large-arrow","template":"demos","html":"<style type=\"text/css\">.demo-large-arrow {\n width: 600px;\n}\n\n.code-box {\n width: 100%;\n}\n\n/* CSS END JS START*/\n</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.demo-large-arrow</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">600px</span></span></span>;\n}</span>\n\n<span class=\"hljs-class\">.code-box</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">100%</span></span></span>;\n}</span>\n\n<span class=\"hljs-comment\">/* CSS END JS START*/</span>\n</code></pre></div><script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { style: { width: 1000 } },\n React.createElement(\n _uxcore.Carousel,\n { className: 'demo-large-arrow', autoplay: true, pauseOnHover: true, largeArrowsAndDots: true },\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1b8p_aMvD8KJjy0FlXXagBFXa-533-300.jpg', style: { width: '100%' } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1F1h7aL6H8KJjy0FjXXaXepXa-800-450.jpg', style: { width: '100%' } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement('img', { src: 'https://img.alicdn.com/tfs/TB1clp_aMvD8KJjy0FlXXagBFXa-533-300.jpg', style: { width: '100%' } })\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-carousel-demo-large-arrow'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n\n<span class=\"hljs-keyword\">import</span> { Carousel } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">1000</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Carousel</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo-large-arrow\"</span> <span class=\"hljs-attribute\">autoplay</span> <span class=\"hljs-attribute\">pauseOnHover</span> <span class=\"hljs-attribute\">largeArrowsAndDots</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">img</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/tfs/TB1b8p_aMvD8KJjy0FlXXagBFXa-533-300.jpg\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> '<span class=\"hljs-attribute\">100</span>%' }} /&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">img</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/tfs/TB1F1h7aL6H8KJjy0FjXXaXepXa-800-450.jpg\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> '<span class=\"hljs-attribute\">100</span>%' }} /&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">img</span> <span class=\"hljs-attribute\">src</span>=<span class=\"hljs-value\">\"https://img.alicdn.com/tfs/TB1clp_aMvD8KJjy0FlXXagBFXa-533-300.jpg\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> '<span class=\"hljs-attribute\">100</span>%' }} /&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Carousel</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-carousel-demo-large-arrow'));\n</span></code></pre></div>"},"status":"public","toc":""}]

Props

Property Type Description Working
className String Additional class name for the inner slider div Yes
adaptiveHeight bool Adjust the slide's height automatically Yes
arrows bool Should we show Left and right nav arrows Yes
nextArrow React Component Use this component for the next arrow button Yes
prevArrow React Component Use this component for the prev arrow button Yes
autoplay bool Should the scroller auto scroll? Yes
pauseOnHover bool Should pause autoplay when an item is hoverd No
autoplaySpeed int delay between each auto scoll. in ms Yes
centerMode bool Should we centre to a single item? Yes
centerPadding
cssEase
dots bool Should we show the dots at the bottom of the gallery Yes
dotsClass string Class applied to the dots if they are enabled Yes
draggable bool Is the gallery scrollable via dragging on desktop? Yes
easing string
fade bool Slides use fade for transition Yes
focusOnSelect bool
infinite bool should the gallery wrap around it's contents Yes
initialSlide int which item should be the first to be displayed Yes
lazyLoad bool Loads images or renders components on demands Yes
responsive array Array of objects in the form of { breakpoint: int, settings: { ... } } The breakpoint int is the maxWidth so the settings will be applied when resolution is below this value. Breakpoints in the array should be ordered from smalles to greatest. Use 'unslick' in place of the settings object to disable rendering the carousel at that breakpoint. Example: [ { breakpoint: 768, settings: { slidesToShow: 3 } }, { breakpoint: 1024, settings: { slidesToShow: 5 } }, { breakpoint: 100000, settings: 'unslick' } ] Yes
rtl bool Reverses the slide order Yes
slide string
slidesToShow int Number of slides to be visible at a time Yes
slidesToScroll int Number of slides to scroll for each navigation item
speed int
swipe bool
swipeToSlide bool
touchMove bool
touchThreshold int
variableWidth bool
useCSS bool Enable/Disable CSS Transitions Yes
vertical bool
afterChange function callback function called after the current index changes Yes
beforeChange function callback function called before the current index changes Yes
slickGoTo int go to the specified slide number