Continuous scrolling slider pause on hover
HTML
<script src="http://budowastrony.pl/images/jquery.simplyscroll.js"></script>
<div id="fb-root"></div>
<script>
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Slide show: jQuery Cycle (default) -->
<div id="Slideshow">
<div id="SlideTop"></div>
<div id="SlideRepeat"></div>
<div id="SlideBottom"></div>
<div id="Slides">
<img src="images/slideshow/slide-4.png" width="948" height="341" alt="Slide 1"/>
<img src="images/slideshow/slide-4.png" width="948" height="341" alt="Slide 2"/>
<img src="images/slideshow/slide-4.png" width="948" height="341" alt="Slide 3"/>
<img src="images/slideshow/slide-4.png" width="948" height="341" alt="Slide 4"/>
<img src="images/slideshow/slide-4.png" width="948" height="341" alt="Slide 5"/>
</div>
<a href="#" class="slidePrev"></a>
<a href="#" class="slideNext"></a>
<div id="slidePager">Maxdigital TV</div>
</div>
<div class="pageMain">
<!-- Page Content -->
<div class="contentArea">
<div class="full-page">
<p class="ticker_head">Update</p>
<ul >
<li><span> </span><a href="#">Dear Mega Maxdigital TV Subscriber, We have introduced Maxdigital TV Packages. Please fill up PAF (Package Application Form) & Enjoy your choice of Channels </a></li>
<li><span> </span><a href="#"></a></li>
<li><span> </span><a href="#"></a></li>
<li><span> </span><a href="#">NOTE:- The increase in Package is due to Nepal Government decision to increased the Entertainment Tax.</a></li>
<!-- eccetera -->
</ul>
</div>
<div class="two-thirds">
<!-- Welcome Message / Page Headline -->
<h1...
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);