jQuery

【jQuery】シンプルで軽量なカードスライダーjQuery cardslider

September 25, 2016
jQuery Cardslider

jQuery cardsliderはシンプルで軽量なカードスライダーjQueryプラグイン。

HTML Markup

<div class="cardslider">
    <ul>
        <li>card 1</li>
        <li>card 2</li>
    </ul>
</div>

CSS&jQuery

<link href="/cardslider.css" rel="stylesheet">
...
<script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="/path/to/jquery.cardslider.min.js"></script>

プラグインを初期化

<script>
    $(function() {
        $('.cardslider').cardslider();
    });
</script>

Options

  1. keys
  2. direction
  3. nav
  4. swipe
  5. dots

Callback functions

  1. beforeCardChange
  2. afterCardChange

Methods

  1. nextCard
  2. prev card
  3. changeCardTo
  4. destroy