jQuery

【jQuery】レスポンシブスライトボックススタイルのメディアギャラリーやカルーセルを作成するslideBox

November 15, 2017
slideBox.js

slideBox.jsはレスポンシブスライトボックススタイルのメディアギャラリーやカルーセルを簡単に作成するためのjQueryプラグイン。ライトボックススタイルのギャラリーまたはカルーセルでメディアをグループ化、カルーセルページャーサポートなどの特徴があります。

Setup

htmlのヘッダーにslidebox.cssを追加

<link rel="stylesheet" href="/assets/slidebox.css" type="text/css"> 

jQueryをロード

<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>

slideBox関数

<script src="/assets/slidebox-min.js" type="text/javascript"></script>
<script type="text/javascript">

$(function () {
	initSlides();
});

</script>

HTML structure

<div class="slide-box">
	<img class="slide" src="img1.jpg">
	<img class="slide" src="img2.jpg">
	<img class="slide" src="img3.jpg">
	<!-- etcetera -->
	
	<div class="controls">
		<a href="#" class="close">Close</a>
		<a href="#" class="prev disabled">Previous</a>
		<a href="#" class="next">Next</a>
	</div>
</div>

1つの要素を入れ子にする

<figure class="slide">
	<img class="slide" src="img1.jpg">
	<figcaption>The caption</figcaption>
</figure>

MIT