Javascript

【Javascript】JavascriptとCSSを使用したCSS3フレックスボックスカルーセルFlexbox Carousel

April 7, 2017
flexbox-carousel

flexbox-carouselはJavascriptとCSSを使用したCSS3フレックスボックスカルーセル。

<div class='wrap'>
  <ul class='carousel is-set'>
  <li class='carousel-seat'>
      <h2>1</h2>
    </li>
    <li class='carousel-seat'>
      <h2>2</h2>
    </li>
    <li class='carousel-seat'>
      <h2>3</h2>
    </li>
    <li class='carousel-seat'>
      <h2>4</h2>
    </li>
    <li class='carousel-seat'>
      <h2>5</h2>
    </li>
    <li class='carousel-seat is-ref'>
      <h2>6</h2>
    </li>
  </ul>
</div>
<div class='controls'>
  <button class='toggle' onclick="prev()">Prev</button>
  <button class='toggle' data-toggle='next' onclick="next()">Next</button>
  <input type="text" placeholder="Enter the slide to jump" id="jump-slide"></input>
  <button type="submit" onclick="submit()">Jump</button>
</div>