PCでもスマホでもサクサク動くコンテンツスライダー「iosSlider」(IE7にも対応)

iosSlider コンテンツスライダー

iosSliderって何?

コンテンツスライダーや画像ギャラリーなどで使うようなスライダー用のjQueryプラグインです。

何ができるの?

実際にさわらないとイメージしにくいです。こんなのが作れます。

なんでiosSliderがおすすめ?

  1. デスクトップ、スマートフォン、タブレットの各デバイスから使えて、Firefox / Safari / Chrome / IE7+ に対応してるから。
  2. 色んな用途に応じたコールバックが用意されてるから。

どうやって実装するの?

<html>
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0″ />
<title>iosSlider Demo</title>
<script type=”text/javascript” src = “http://beruko.com/iosslider/jquery-1.7.1.min.js”></script>
<script type=”text/javascript” src = “http://beruko.com/iosslider/jquery.iosslider.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
/* いろいろ設定。いらないものはコメントアウト */
$(‘.iosSlider’).iosSlider({
snapToChildren: true,
scrollbar: false,
//scrollbarHide: true,
desktopClickDrag: true,
//scrollbarLocation: ‘bottom’,
//scrollbarHeight: ’6px’,
//scrollbarBackground: ‘url(_img/some-img.png) repeat 0 0′,
//scrollbarBorder: ’1px solid #000′,
//scrollbarMargin: ’0 30px 16px 30px’,
//scrollbarOpacity: ’0.75′,
navPrevSelector: $(‘.prevButton’),
navNextSelector: $(‘.nextButton’),
onSliderLoaded: alertOnLoaded,
onSlideChange: alertOnChange,
});
//moveがクリックされたら任意のスライドへ移動
$(‘.moveButton’).click( function() {
var seek_to_num = 2;
$(‘.iosSlider’).iosSlider(‘goToSlide’,seek_to_num);
});
/* 現在のスライドナンバーなどはここで取得 */
function alertOnLoaded(args)
{
var autoSlideToggleSelector = args.settings.autoSlideToggleSelector;
currentSlideNumber = args.currentSlideNumber;
$(‘#currentSlideNumber’).val(currentSlideNumber);
}
function alertOnChange(args)
{
var autoSlideToggleSelector = args.settings.autoSlideToggleSelector;
currentSlideNumber = args.currentSlideNumber;
$(‘#currentSlideNumber’).val(currentSlideNumber);
}
});
</script>
<style>
/* slider container */
.iosSlider {
/* required */
position: relative;
top: 0;
left: 0;
overflow: hidden;
width: 276px;
height: 92px;
}
/* slider */
.iosSlider .slider {
/* required */
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .slider .slide {
/* required */
float: left;
width: 276px;
height: 92px;
}
/* ちょっくら見栄え調整 */
.cell{
float: left;
width: 90px;
height: 90px;
border: 1px solid #777777;
}
.cellBody{
text-align: center;
line-height: 90px;
}
.btn{
float:left;
width: 90px;
height: 30px;
text-align:center;
}
</style>
<?php
$contents = array(‘Apple’, ‘Banana’, ‘orange’, ‘peach’, ‘papaya’, ‘mango’, ‘plum’, ‘grapes’, ‘lime’);
?>
</head>
<body>
<div id=”wrapper”>
<div id=”slideArea” class=”iosSlider”>
<div class=”slider”>
<div class=”items slide”>
<?php $i=0 ?>
<?php foreach ($contents as $content):?>
<?php if($i/3>=1 && $i%3==0){ ?>
</div><div class=”items slide”>
<?php } ?>
<div class=”cell”>
<div class=”cellBody”>
<?php echo $content; ?>
</div>
</div>
<?php $i++ ?>
<?php endforeach;?>
</div>
</div>
</div>
<div id=”Btns”>
<a type=”button” class=”prevButton btn”>Prev</a>
<a type=”button” class=”moveButton btn”>Move</a>
<a type=”button” class=”nextButton btn”>Next</a>
</div>
CurrentSlideNumber = <input type=”text” id=”currentSlideNumber”></div>
</div>
</body>
</html>