import './demo8.css';
import Icon from '../../icon';
import React from 'react';
import ReactDOM from 'react-dom';
import Slider from '..';
const slides = [
    {
        url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png',
        text: 'Tape Player Skin Design Competition',
    },
    {
        url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg',
        text: 'Mobile Phone Taobao Skin Call',
    },
    {
        url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg',
        text: 'Design Enabling Public Welfare',
    },
    {
        url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg',
        text: 'Amoy Doll Design Competition',
    },
];
const arrowStyle = {
    display: 'block',
    background: 'red',
    opacity: 1,
    margin: '0 20px',
};
const CustomNextArrow = props => {
    return (React.createElement("div", Object.assign({}, props, { style: arrowStyle }),
        React.createElement(Icon, { type: "arrow-double-right" })));
};
const CustomPrevArrow = props => {
    return (React.createElement("div", Object.assign({}, props, { style: arrowStyle }),
        React.createElement(Icon, { type: "arrow-double-left" })));
};
ReactDOM.render(React.createElement(Slider, { nextArrow: React.createElement(CustomNextArrow, null), prevArrow: React.createElement(CustomPrevArrow, null), lazyLoad: true }, slides.map((item, index) => (React.createElement("div", { key: index, className: "slider-img-wrapper" },
    React.createElement("img", { src: item.url, alt: item.text }))))), document.getElementById('slider-demo-8'));
