jQuery

【jQuery】2つの写真を表示するためのシンプルなプラグインbaSlider

April 14, 2018
jquery.baSlider

baSliderは、前と後の2つの写真を表示するためのシンプルなプラグインです。

Usage

<div class='baSlider'>
    <div class='frame'>
        <div baSlider-handler><img src="images/drag.svg" alt=""></div>
        <div class='before'>
            <img src='images/before.jpg' baSlider-image>
        </div>  
        <div class='after'>
            <div>
                <img src='images/after.jpg' baSlider-image>
            </div>
        </div>  
    </div>
</div>

jQueryを含める

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

プラグインのCSSとJSを含める

<link rel="stylesheet" href="src/jquery.baSlider.csss">
<script src="src/jquery.baSlider.js"></script>

プラグインを呼び出します

$('.baSlider').baSlider();

Options

$('.baSlider').baSlider({
    handler: {
        position: "auto",
        offsetX: 0,
        offsetY: 0
    },
    height:  true,
    iconIssues: false
});

MIT