Javascript Image Slideshow issue

Question

I'm new in web development field.

I'm creating a web page. In home page there are a javascript image Slideshow Please check it here: http://bluearrowsystems.com/index.php . Now the slider images are auto moving. But is there any way to move the images when I place my mouse on the image thats mean mouseover ?

Following is my html head section javascript code, I think but not sure, in this section it's need to add a javascript code.

<link rel="stylesheet" href="res/responsiveslides.css">
<link rel="stylesheet" href="res/example.css">
<script src="res/ga.js"></script>
<script src="res/jquery.js"></script>
<script>window.jQuery || document.write('<script src="http://viljamis.com/js/libs/jquery-
1.8.2.min.js"><\/script>')</script>
<script src="res/responsiveslides.js"></script>
<script>
$(function () {

  // Slideshow 1
  $(".rslides1").responsiveSlides({
    speed: 1000,
    maxwidth: 1024,                                     
    auto:false,



  });


      // Slideshow 2
  $(".rslides2").responsiveSlides({
    auto: true,
    pager: true,
    speed: 500,
    maxwidth: 540,

  });

});
</script>

Answer 1

The plugin you are using does not have a method to trigger playback externally. Your could use an other plugin like flexslider. With it you would get the functionality you need like so:

$('.rslides1').flexslider().on('mouseover', function(){
    $(this).data('flexslider').next();
});

EDIT: If you want to initialize flexslider in a paused state and start playback on mouseover, use following code:

$('.rslides1').flexslider( {slideshow: false} ).on('mouseover', function(){
    $(this).data('flexslider').play();
});