Skip to content

nzbin/CardShow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

53 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

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