今日の人気記事

  1. 画像に拡大・縮小ボタンを「Zoomer」
  2. 入力に応じてテキストエリアの高さを調節「Autosize」
  3. テキスト・画像・iframeなどに対応したLightbox「Featherlight」

クールな画像スライダー「Moving Boxes」

スポンサーリンク

クールな画像スライダーjQueryプラグイン「Moving Boxes」を紹介します。

jQueryプラグイン「Moving Boxes」

「Moving Boxes」は、divで囲まれた画像とコメントをクールにスライドしてくるjQueryプラグインです。

スポンサーリンク

デモの画像をクリックするとスライドされますので、楽しんじゃってください。

「Moving Boxes」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Moving Boxes - jQueryプラグインまとめのコピペ</title>
<link href="movingboxes.css" rel="stylesheet">
<!--[if lt IE 9]>
<link href="movingboxes-ie.css" rel="stylesheet" media="screen" />
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.movingboxes.min.js"></script>
<style>
	/* Dimensions set via css in MovingBoxes version 2.2.2+ */
	#slider { width: 500px; }
	#slider li { width: 250px; }
</style>
<script>
$(function(){
	$('#slider').movingBoxes({
	startPanel   : 1,      // start with this panel
	wrap         : false,  // if true, the panel will infinitely loop
	buildNav     : true,   // if true, navigation links will be added
	navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
	});
});
</script>
</head>

<body>
<h1>Moving Boxesのデモでーす。</h1>
<ul id="slider">
  <li>
    <img src="images/1.jpg" alt="picture">
    <p>デモです。</p>
  </li>
  <li>
    <img src="images/2.jpg" alt="picture">
    <p>デモです。</p>
  </li>
  <li>
    <img src="images/3.jpg" alt="picture">
    <p>デモです。</p>
  </li>
  <li>
    <img src="images/4.jpg" alt="picture">
    <p>デモです。</p>
  </li>
  <li>
    <img src="images/5.jpg" alt="picture">
    <p>デモです。</p>
  </li>  
</ul>
</body>
</html>

詳細はこちらからどうぞ。
» Moving Boxes

スポンサーリンク

関連記事(一部広告含む)