【jQuery】スライドボックスプラグインjQuery CardSlider

jQuery CardSliderはjQueryを使ったスライドボックスプラグイン。

STYLES & SCRIPTS

<link rel="stylesheet" type="text/css" href="css/screen.core.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.tcg-cardslider.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="../dist/jquery.tcg-cardslider.js"></script>
<script src="js/jquery.tcg-cs-demo.js"></script>

Slide Box (Basic Example)

<div class="btn-group" role="group">
<button type="button" class="btn btn-default toggle-slide" data-step="1">1</button>
<button type="button" class="btn btn-default toggle-slide" data-step="2">2</button>
<button type="button" class="btn btn-default toggle-slide" data-step="3">3</button>
</div>
<div class="slides">
<div class="slide">
<p>1</p>
</div>
<div class="slide">
<p>2</p>
</div>
<div class="slide">
<p>3</p>
</div>
</div>

Slide Box (Form slider)

<div class="container text-center">
<h1>Slide Box (Form slider)</h1>
<p>Select card to slide to:</p>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default toggle-step" data-step="1">1</button>
<button type="button" class="btn btn-default toggle-step" data-step="2">2</button>
<button type="button" class="btn btn-default toggle-step" data-step="3">3</button>
<button type="button" class="btn btn-default toggle-step" data-step="4">4</button>
</div>
</div>
<div class="container">
<div class="card-box">
<div class="avatar">
</div>
<div class="cards">
<div class="card" data-step="1">
<div class="content">
<form id="validate-username" action="">
<input type="text" id="user-email" name="email" placeholder="Enter e-mail address" value="" />
<button type="submit">Next</button>
</form>
</div>
</div>
<div class="card" data-step="2">
<div class="content">
<div class="user-info">
<p class="user-name"><strong>The Code Gecko</strong></p>
<p class="user-mail">thecodegecko@gmail.com</p>
</div>
<form id="validate-username" action="">
<input type="hidden" name="email" value="" />
<input type="password" id="user-pwd" name="email" placeholder="Enter password" value="" />
<button type="submit">Login</button>
</form>
</div>
</div>
<div class="card" data-step="3">
<div class="content">
<p>Step 3</p>
</div>
</div>
<div class="card" data-step="4">
<div class="content">
<p>Step 4</p>
</div>
</div>
</div>
</div>
</div>
 
jQuery CardSlider

【jQuery】スライドボックスプラグインjQuery CardSlider

  • LATEST
  • RELATED
  • POPULAR