@sideshowsystems/jquery-sbs-slider

jQuery Image Side By Side Slider

Usage no npm install needed!

<script type="module">
  import sideshowsystemsJquerySbsSlider from 'https://cdn.skypack.dev/@sideshowsystems/jquery-sbs-slider';
</script>

README

jquery-sbs-slider

npm (scoped) npm (scoped)

jQuery SideBySide Slider

Package Managers

# NPM
npm install @sideshowsystems/jquery-sbs-slider

Usage

HTML

<div class="img_sbs_box">
    <div class="imgwrapper imgleft">
        <img src="image-left.jpg" />
    </div>
    <div class="imgwrapper imgright">
        <img src="image-right.jpg" />
    </div>
</div>

Java Script

$('.img_sbs_box').sbsbox();

with options

$('.img_sbs_box').sbsbox({
    showPcnt: 90
});

Settings

Option Type Default Description
aniSpeed int 250 Animation speed in milliseconds
showPcnt int 85 Percentage of image reveal