I'm trying to get ResponsiveSlides.js set up with some custom functionality. I need to be able to use the slider with manual controls that work on mouseover instead of click but go to specific url links on click. I will have four slides in the slideshow and need to be able to navigate them using the four buttons. Here is what I want to achieve:

1. Have my four buttons work on mouseover instead of click. I am using manualControls: ".custom-pagers" for custom navigation. I was wondering if there is a way to navigate to my specific slides on mouseover but have it go to the href="" url on click.

2. Have another separate button (.buy-tag a), pause the slider on mouseover but go to the href="" URL on click.

Here is my code:


Code:
$(function () {

      // Slideshow 1
      $("#slider1").responsiveSlides({
        speed: 800,
		manualControls: ".custom-pagers", 
      });
    });
  </script>
And the HTML:

Code:
<!-- SUPER SLIDER -->
        <div class="rslides_container">
        
        <div id="main-featured" class="twelve columns">  
        
        <ul class="rslides" id="slider1">
          <li><div id="img-featured" class="five columns"><a href="http://www.domain.com/"><img src="http://www.domain.com/images/image1.png" alt=""></a></div>
        	 </li>
          
          <li><div id="img-featured" class="five columns"><a href="http://www.domain.com/"><img src="http://www.domain.com/images/image2.png" alt=""></a></div>
        	</li>
          
          <li><div id="img-featured" class="five columns"><a href="http://www.domain.com/"><img src="http://www.domain.com/images/image3.png" alt=""></a></div>
        	</li>
          
        </ul>
        
        
        </div>
        
            
        </div><!-- /SUPER SLIDER -->
        
        <div class="full-row green-mid">
        	<div class="row">
        		<div id="types-tag" class="four columns">
        			<h3>What type are <strong>YOU</strong>?</h3>
        		</div>
        	</div>
        	
        	<div class="row">
        		<div class="eight columns">
        			<ul class="custom-pagers">
        			<li><div class="straight-tag"><a href="http://www.domain.com/link1"><span>1</span> Straight</a></div></li><li><div class="curly-tag"><a href="http://www.domain.com/link2"><span>3</span> Curly-Kinky</a></div></li>
        			<li><div class="wavy-tag"><a href="http://www.domain.com/link3"><span>2</span> Wavy-Curly</a></div></li><li><div class="kinky-tag"><a href="http://www.domain.com/link4"><span>4</span> Kinky-Coily</a></div></li>
        			</ul>
        		</div>
        	</div>
        
        	<div class="clear"></div>
        </div>
    
    <div class="buy-tag"><a href="http://www.domain.com/buy"><span><strong>Buy</strong> Now</span></a></div>
Can anyone help or point me in the right direction please? Thanks in advance!