slide to scroll

http://manzzup.blogspot.com/2014/07/jquery-scroll-to-slide-plugin-as-in.html

by Manujith Pallewatte

HTML

<title>Scroller</title>
<script>
    $(document).ready(function() {
        ScrollSlider("container", 300, 500);
    });
</script>
<body>
    <div id="container" class="scrollslider">
        <ul>
            <li>
                <img src="http://placehold.it/600x150" />
            </li>
            <li>
                <img src="http://placehold.it/600x250" />
            </li>
            <li>
                <img src="http://placehold.it/600x150" />
            </li>
            <li>
                <img src="http://placehold.it/600x50" />
            </li>
        </ul>
    </div>

CSS

.scrollslider {
    position:relative;
    overflow:hidden;
}
.scrollslider img {
    width:100%;
    height:100%;
}
.scrollslider ul {
    padding:0px;
    margin:0px;
    position:relative;
}
.scrollslider li {
    list-style-type:none;
    display:inline-block;
}
html, body {
    margin:0px;
    padding:0px;
}
#container {
    width:600px;
    height:300px;
    border:1px solid #000;
    top:100px;
    margin:0 auto;
}

JavaScript

function ScrollSlider(ele, height, speed) {
    var curIndex = 0;
    var maxIndex = 0;
    var scrollHeight = height;

    var slider = $('#container ul').eq(0);
    maxIndex = $(slider).find("li").length - 1;
    $('#container').on('DOMMouseScroll mousewheel', function (e) {
        if (!$(slider).is(":animated")) {
            if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
                if (curIndex < maxIndex) {
                    $(slider).animate({
                        top: '-=' + scrollHeight + 'px'
                    }, speed);
                    curIndex++;
                } else {
                    return true;
                }
            } else {
                if (curIndex > 0) {
                    $(slider).animate({
                        top: '+=' + scrollHeight + 'px'
                    }, speed);
                    curIndex--;
                } else {
                    return true;
                }
            }
        }

        return false;

    });
}
ScrollSlider("container", 300, 500);