使用react-slick制作一个切换卡片的React组件。

import Slider from "https://cdn.skypack.dev/react-slick"

class ReactSlider extends React.Component {
  render() {
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        useCSS: true,
        useTransform: true
      }
    return (
      <div class="slide-container">
      <Slider {...settings}>
        <article class="wrapper">
          <main class="*-card barbarian">
            <figure class="*-card__image *-card__image--barbarian">
              <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/barbarian.png" alt="barbarian" />
              
            
            </figure>
            <figcaption class="*-card__level *-card__level--barbarian">Level 4</figcaption>
            <figcaption class="*-card__unit-name">The Barbarian</figcaption>
            <figcaption class="*-card__unit-description">
              The Barbarian is a kilt-clad Scottish warrior with an angry, battle-ready expression, hungry for destruction. He has Killer yellow horseshoe mustache.
            </figcaption>

            <aside class="*-card__unit-stats *-card__unit-stats--barbarian clearfix">
              <div class="one-third">
                <div class="stat">20<sup>S</sup></div>
                <div class="stat-value">Training</div>
              </div>

              <div class="one-third">
                <div class="stat">16</div>
                <div class="stat-value">Speed</div>
              </div>

              <div class="one-third no-border">
                <div class="stat">150</div>
                <div class="stat-value">Cost</div>
              </div>

            </aside>

          </main> 
        </article> 
        
        <article class="wrapper">
          <main class="*-card archer">
            <figure class="*-card__image *-card__image--archer">
              <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/archer.png" alt="archer" />
            </figure>
            <figcaption class="*-card__level *-card__level--archer">Level 5</figcaption>
            <figcaption class="*-card__unit-name">The Archer</figcaption>
            <figcaption class="*-card__unit-description">
              The Archer is a female warrior with sharp eyes. She wears a short, light green dress, a hooded cape, a leather belt and an attached small pouch.
            </figcaption>

            <aside class="*-card__unit-stats *-card__unit-stats--archer clearfix">
              <div class="one-third">
                <div class="stat">25<sup>S</sup></div>
                <div class="stat-value">Training</div>
              </div>

              <div class="one-third">
                <div class="stat">24</div>
                <div class="stat-value">Speed</div>
              </div>

              <div class="one-third no-border">
                <div class="stat">300</div>
                <div class="stat-value">Cost</div>
              </div>
            </aside>

          </main> 
        </article> 
        
        <div class="wrapper">
          <div class="*-card giant">
            <div class="*-card__image *-card__image--giant">
              <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/giant.png" alt="giant" />
            </div>
            <div class="*-card__level *-card__level--giant">Level 5</div>
            <div class="*-card__unit-name">The Giant</div>
            <div class="*-card__unit-description">
              Slow, steady and powerful, Giants are massive warriors that soak up huge amounts of damage. Show them a turret or cannon and you'll see their fury unleashed!
            </div>

            <div class="*-card__unit-stats *-card__unit-stats--giant clearfix">
              <div class="one-third">
                <div class="stat">2<sup>M</sup></div>
                <div class="stat-value">Training</div>
              </div>

              <div class="one-third">
                <div class="stat">12</div>
                <div class="stat-value">Speed</div>
              </div>

              <div class="one-third no-border">
                <div class="stat">2250</div>
                <div class="stat-value">Cost</div>
              </div>
            </div>
          </div>
        </div>
      </Slider>
        </div>
    )
  }
}

ReactDOM.render(<ReactSlider />, document.getElementById("root"));