To add pause/stop functionality on mouse over using easySlider1.7
Step 1: Open easySlider JS file in editor like notepad, notepad++ etc.
Step 2: Goto line number 56, and add below bold marked line.
continuous: false,
numeric: false,
numericId: 'controls' ,
hoverPause: false
Step 3: Now add controls related code inside this.each(function() { }); before closing of it. The code as below
this.each(function() {
// lots of code here...
................................
................................
if (options.hoverPause && options.auto){
$(this).mouseenter(function(){
animate("stop",true);
});
$(this).mouseleave(function(){
if (options.continuous) {
animate("next",false);
} else {
animate("next",true);
}
});
};
});
Step 4: There is a section called function animate(dir,clicked), easySlider use this function to all animation events like stop, pause, prev, next etc. Here we will add one more case to implement our pause functionality.
case "stop":
t = t;
break;
Step 5: Now in the last step, you will add one line of code inside your on-load function. Example as below:
<script type="text/javascript">
$(function(){
$("#homeSlider .slider, #photGalery .imgGallery").easySlider({
auto: true,
continuous: true,
hoverPause:true
});
});
</script>
0 Comment(s)