Scrolling UL

On hover auto pause

by Ganesh Salunkhe

HTML

<script src="http://budowastrony.pl/images/jquery.simplyscroll.js"></script>
<ul id="scroller">
    <li><img src="http://budowastrony.pl/images/img1.jpg" width="290" height="200"></li>
    <li><img src="http://budowastrony.pl/images/img2.jpg" width="290" height="200"></li>
    <li><img src="http://budowastrony.pl/images/img3.jpg" width="290" height="200"></li>
     <li><img src="http://budowastrony.pl/images/img4.jpg" width="290" height="200"></li>
    <li><img src="http://www.budowastrony.pl/images/img5.jpg" width="290" height="200"></li>
</ul>

CSS

.simply-scroll-container { /* Container DIV - automatically generated */
    position: relative;
}

    .simply-scroll-clip { /* Clip DIV - automatically generated */
        position: relative;
        overflow: hidden;
    }

    .simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
        overflow: hidden;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
        .simply-scroll-list li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
    
        .simply-scroll-list li img {
            border: none;
            display: block;
        }
    
    .simply-scroll-btn {
        position: absolute;
        background-image: url(buttons.png);
        width: 42px;
        height: 44px;
        z-index:3;
        cursor: pointer;
    }
    
    .simply-scroll-btn-left {
        left: 6px;
        bottom: 6px;
        background-position: 0 -44px;
    }
    .simply-scroll-btn-left.disabled {
        background-position: 0 0 !important;
    }
    .simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus {
        background-position: 0 -88px;
    }
    
    .simply-scroll-btn-right {
        right: 6px;
        bottom: 6px;
        background-position: -84px -44px;
    }
    .simply-scroll-btn-right.disabled {
        background-position: -84px 0 !important;
    }
    .simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus {
        background-position: -84px -88px;
    }
    
    .simply-scroll-btn-up {
        right: 6px;
        top: 6px;
        background-position: -126px -44px;
    }
    .simply-scroll-btn-up.disabled {
        background-position: -126px 0 !important;
    }
    .simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus {
        background-position: -126px -88px;
    }
    
    .simply-scroll-btn-down {
        right: 6px;
        bottom: 6px;
        background-position: -42px -44px;
    }
    .simply-scroll-btn-down.disabled {
       ...

JavaScript

(function($) {
    $(function() { //on DOM ready
        $("#scroller").simplyScroll({
            orientation: 'horizontal',
            auto: true,
            manualMode: 'loop',
            frameRate: 20,
            speed: 5
        });
    });
})(jQuery);