To add pause/stop functionality on mouse hover using easySlider1.7
Step 1: Open easySlider JS file in editor like notepad, notepad++ etc.
Step 2: Go to 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 '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);
}
});
};
});
If you are using easySlider in one place then you can use DIV id instead of (this) in above code. Like
$(#homeSlider).mouseenter(function(){
.......................
Step 4: There is a section called function animate (dir, clicked), easySlider use this function to all animation events like stop, pause, previous, 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)