レスポンシブ対応のjsスライダー Juicy Slider

2014.11.30

cap

Juicy Sliderはレスポンシブ対応のスライダーを実装できるjsプラグインです。

軽量で、実装も簡単です。

デモ

デモページを用意しました。

画面の横幅が短くなると、画像の両端が切れるタイプです。

画像の両端が切れても、マウスオンした時に表示される左右の矢印ボタンはきちんと表示されます。

実装方法

デモページの実装方法です。

1. こちらのページの右のメニューにある「Download ZIP」ボタンからソースを落とします。

2. juicyslider.css、juicyslider.jsを読み込みます。jQuery、jQuery UIも必要です。

<head>
    <link rel="stylesheet" href="css/juicyslider.css" type="text/css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/juicyslider-min.js"></script>
</head>

3. htmlの記述はこんな感じです。

<div id="myslider" class="juicyslider">
    <ul>
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
    </ul>
    <div class="nav next"></div>
    <div class="nav prev"></div>
    <div class="mask"></div>
</div>

4. cssの設定です。

#myslider {
	max-width:1000px;
	margin:50px auto 0;
}

5. htmlに下記のスクリプトを追記します。

<script>
$(function() {
	$('.juicyslider').juicyslider({
	    // these are the defaults
	    mode: "cover",                              // "cover" or "contain"
	    width: '100%',                              // set null to make the slider as wide/tall as the window,
	    height: '400',                             // otherwise set any other values in px or % unit
	    mask: "none",                             // "raster", "square", "strip" or "none"
	    bgcolor: "#000",
	    autoplay: 4000,                             // 0 for no autoplay, any other postive number for play interval in (ms)
	    shuffle: false,                             // set true to shuffle the picture order
	    show: {effect: 'fade', duration: 1000},     // effect params refer to jQuery UI
	    hide: {effect: 'fade', duration: 1000},     // try 'puff' or 'drop' for the effect arg
	});
});
</script>