ItemSlide_jsプラグインのデモページ

【jQuery】スマホのスワイプ動作でスライドするItemSlide.jsプラグイン

2014.10.28   3097


スマホとPCの操作で大きく違うのはスワイプ出来るかどうかではないでしょうか。
今日はスマホの操作の代表格「スワイプ」でスライドするItemSlide.jsプラグインの紹介です。

 

ItemSlide.jsプラグインのオススメ/ポイント

  •   iPhone,Android対応
  •   レスポンシブデザイン
  •   動きがかわいい

ItemSlide.jsプラグインのデモ


ItemSlide.jsプラグインのページ


ItemSlide.jsプラグインの使い方

それではItemSlide.jsプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<div id="scrolling">
    <ul>
        <li><span id="touse">
            スワイプしてみよう
            <br/>
        </li>
        <li>
            <div id="codetext">
                もっと
            </div>
        </li>
        <li>
            <div id="codetext">
                もっともっと
            </div>
        </li>
        <li>
            <div id="codetext">
                そろそろおわり
            </div>
        </li>
        <li>
            <div id="codetext">
                おわり
            </div>
        </li>
    </ul>
</div>

CSSコード

<style>
body{
	text-align:center;
	margin:0;
}
#scrolling{
    position:fixed;
    background-color:#49AAD2;
    height:100%;
    width:100vw;
}
ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left:0;
    margin-top:5vh;
    height:88%;
    list-style-type: none;
    overflow: hidden;
}
li {
    font-size:8vmin;/*cool*/
    float: left;
    width: 84vw;
    height: 100%;
    color: #000;
    font-weight: 300;
    text-align: center;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
    -moz-border-radius: 30px;
    cursor: pointer;
    background: #FFFFFD;
    -webkit-transform:  scale(0.95);
    -ms-transform:  scale(0.95);
    -moz-transform:  scale(0.95);
    transform: scale(0.95);
}
#active	{
    -webkit-transform:  scale(1);
    -ms-transform:  scale(1);
    -moz-transform:  scale(1);
    transform: scale(1);
}
</style>

JavaScriptコード

<!-- jQuery本体 -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="dependencies/hammer.min.js"></script>
<!--Optional--->
<script src="dependencies/hammer.jquery.min.js"></script>
<script src="dependencies/jquery.mousewheel.min.js"></script>

<script src="website-src/sliding.js"></script>
<script src="src/itemslide.min.js"></script>

プラグインへ一言

簡単スワイプ!

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております