スライダーSkipperの設定

TOP >  コードサンプル一覧 >  スライダーSkipperの設定

head内に入力

<!--スライダー設定-->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/common/skippr.css">
	<script src="<?php echo get_template_directory_uri(); ?>/common/skippr.min.js" type="text/javascript"></script>
	<script>
		$(document).ready(function(){
			$("#skippr-slider").skippr({
				transition: 'slide',
				speed: 400,
				easing: 'easeOutQuart',
				navType: 'block',
				childrenElementType: 'div',
				arrows: true,
				autoPlay: true,
				autoPlayDuration: 3500,
				keyboardOnAlways: false,
				hidePrevious: false
			});
		});
	</script>
<!--//スライダー設定-->

オプション
transition
スライドショーのパターン。[slide]か[fade]が選べます。
speed
変化に要する時間。ミリ秒単位で指定。
easing
動作のパターン。デフォルトでは[easeOutQuart]が設定されています。
navType
ナビゲーションのタイプを[block]か[bubble]かで選択可能。
childrenElementType
子要素の種類を指定します。通常は[div]を。スライダーが画像のときは[img]を指定します。
arrows
ナビゲーションのコントローラーの表示。
autoPlay
スライドショーの自動再生です。[true]で自動再生され、[false]だと自動では動きません。
autoPlayDuration
自動再生時のスライド切替間隔です。ミリ秒単位で指定します。
keyboardOnAlways
キーボードの矢印キーにでスライドさせるかどうか。[true]で有効になります。
hidePrevious
1枚目のスライド表示時に、最後のスライドに戻る矢印を表示するかどうか。[true]で表示され、[false]で非表示になります。

body内に入力

<!--スライダー-->
<div id="slider">
	<div id="skippr-slider">
		<div style="background-image: url(<?php bloginfo('template_url'); ?>/img/slider_01.jpg)"></div>
		<div style="background-image: url(<?php bloginfo('template_url'); ?>/img/slider_02.jpg)"></div>
		<div style="background-image: url(<?php bloginfo('template_url'); ?>/img/slider_03.jpg)"></div>
		<div style="background-image: url(<?php bloginfo('template_url'); ?>/img/slider_04.jpg)"></div>
		<div style="background-image: url(<?php bloginfo('template_url'); ?>/img/slider_05.jpg)"></div>
	</div>
	<div class="hero">
		<div class="tagline">
			<h2>Web Design.</h2>
			<p class="textWhite">
			My name is Soichiro and I am a web creator based in Sapporo.<br>
			I'm a creator with a passion for solving needs.
			</p>
		</div>
	</div>
</div>
<!--//スライダー-->

css設定

/* スライダー
--------------------------------------------------*/
#slider {
	width: 100%;
	height: 500px;
}
#skippr-slider {
	position: relative;
    overflow: hidden;
}
.yellow {
    background-color: #FFDB56;
}
.hero {
    position: absolute;
    left: 50%;
    top: 250px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 999;
}
PAGE TOP ▲

「迅速・丁寧な対応」と「かゆい所に手がと届く対応」に心がけておりますのでお気軽にご相談ください。メールフォームはこちら。