jQuery

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

August 19, 2016
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>