Skip to content

nzbin/CardShow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

0e7e632 Β· Feb 9, 2021

History

53 Commits
Jan 13, 2019
Dec 1, 2016
Nov 25, 2016
Feb 9, 2021

Repository files navigation

CardShow

CardShow is a jQuery plugin of drawing cards. It is more like a game.

Online Demo: https://nzbin.github.io/CardShow

Browser Support

IE Edge Firefox Chrome Safari Opera
9+ βœ” 12+ βœ” 10+ βœ” 12+ βœ” 4+ βœ” 15+ βœ”

Usage

Include files

<link href="/path/to/cardshow.css" rel="stylesheet" />

<script src="/path/to/modernizr-custom.js"></script>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.cardshow.js"></script>

Html structure

<ul class="card-container card-perspective">
  <li class="card card-flip">
    <figure class="card-front">
      <img src="img/1.jpg" />
      <figcaption>about</figcaption>
    </figure>
    <div class="card-back"></div>
  </li>
</ul>

Call plugin

$('.card-container').cardshow({
  src: data,
  autoDrawing: true,
  backface: true,
  rows: 1,
  drawingCardsNum: 3,
  drawingRounds: 0,
  drawingSpeed: 300,
});

Options

  • src String

    Default '', The user data, you should set it as required.

  • autoDrawing Boolean

    Default true, automatic drawing or manual drawing.

  • backface Boolean

    Default true, if show the back of cards with their entrance.

  • rows Number

    Default 1, arrange the cards with multiple lines.

  • drawingCardsNum Number

    Default 1, the number of drawing cards in every round.

  • drawingRounds Number

    Default 0 (no limit), the rounds of drawing cards.

  • drawingSpeed Number

    Default 300, the speed of automatic drawing.

License

MIT License