jqueryのスライドショーが欲しい
Glide.js | Simple, Lightweight & Fast jQuery Sliderからファイルを落として組み込むことにする。
細かいことは下記のサンプルソースの中のコメント参照。
<html lang=”ja”>
<head>
<meta charset=”Shift_JIS”>
<title>HTML5+JSでファイルの保存</title>
<script type=”text/javascript” src=”jquery-1.11.0.min.js”></script>
<script type=”text/javascript” src=”jquery.glide.min.js”></script>
<style type=”text/css”>
.slider {
position: relative;
width: 180px; /* 矢印の位置の都合上、画像サイズより大きくするのもOK */
height: 144px;
text-align: center;
overflow: hidden;
}
.slides {
height: 100%;
/* Clear fix */
overflow: hidden;
*zoom: 1;
/**
* Prevent blinking issue
* Not tested. Experimental.
*/
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
.slide {
height: 100%;
float: left;
clear: none;
}
/* ================================================
▼ .slider-arrow: 矢印 */
.slider-arrow {
position: absolute;
display: block;
margin-bottom: -20px;
padding: 0;
color: #ff0000;
font-weight: bold;
}
.slider-arrow–right { /* 矢印：画像を使う場合、背景などに設定 */
bottom: 50%;
right: 5px;
}
.slider-arrow–left { /* 矢印：画像を使う場合、背景などに設定 */
bottom: 50%;
left: 5px;
}
/* ================================================
▼ .slider-nav: 画像中央下の「■」マーク */
.slider-nav {
position: absolute;
bottom: 8px;
}
.slider-nav__item { /* 「■」マークの色・大きさなど */
width: 12px;
height: 12px;
float: left;
clear: none;
display: block;
margin: 0 5px;
background: #ccc;
}
.slider-nav__item:hover {
background: #ff0000;
}
.slider-nav__item–current {
background: #ff0000;
}
/* ================================================
ul,liの余白関連をクリア */
ul,li {
margin:0;
padding:0;
list-style:none;
}
</style>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘.slider’).glide({
autoplay: 5000,
arrowRightText: “>”,
arrowLeftText: “<“,
});
});
</script>
</head>
<body>
<!– 今回、ulタグを使ってスライドさせているがdivでも何でもOKみたい –>
<div class=”slider”>
<ul class=”slides”>
<li class=”slide”><img src=”glide1.jpg” width=”180″ height=”144″ /></li>
<li class=”slide”><img src=”glide2.jpg” width=”180″ height=”144″ /></li>
<li class=”slide”><img src=”glide3.jpg” width=”180″ height=”144″ /></li>
</ul>
</div>
</body>
</html>
※必要に応じてCSSを書き換える必要はアリ。