Posted: 2014.10.28 / Category: javascript / Tag: jQuery

「Kiwi-slider」はAppleの商品ページのスライダー動作を再現したjQueryプラグインです。

プラグインのダウンロードと準備

デモ＆ダウンロードは下記から

Kiwi-slider

html & css

ダウンロードした「kiwi.css」「kiwi-slider.js」を読み込んだら、後述するidを「new KiwiSlider」で指定します。

html

<link rel="stylesheet" type="text/css" href="stylesheets/kiwi.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="javascripts/kiwi-slider.js"></script>
<script>
new KiwiSlider('kiwi-slider');
</script>
    

「kiwi-item」を一つのグループとして必要なかずだけ作成しましょう。
各クラス名はそのまま使うようにしないといけないようです。

html

<div id="kiwi-slider" class="kiwi-slider">
<div class="kiwi-inner">
<div class="kiwi-items">
<div class="kiwi-item">
    <ul>
        <li>
            <a href="#">
                <img src="img/01.png" alt="">
                <span>MacBook Air</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/02.png" alt="">
                <span>MacBook Pro</span>
            </a>
        </li>
    </ul>
</div>
<div class="kiwi-item">
    <ul>
      ...
    </ul>
</div>
<div class="kiwi-item">
    <ul>
      ...
    </ul>
</div>
</div>
</div>
<div class="kiwi-indicators">
<div class="kiwi-control">
<span class="navcaret"></span>
<a href="#">Mac</a>
<a href="#">Apps</a>
<a href="#">Sever os</a>
</div>
</div>
</div>
    

オプションを設定することで横スライドが縦になったりします。

new KiwiSlider('kiwi-slider,{direction:'V'}');