I am using responsive slides for my client project. I need to add a "Read more" button on the slider images with links. I have searched through google and stackoverflow to get an expecting answer. So I have decided to ask a question. Below I have added the code what I have currently done for the slider. I am new to Javascript and JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<link rel="stylesheet" src="responsiveslides.css"></link>
<div class="rslides_container">
<ul class="rslides" id="slider">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
</div>
<script>
$(function () {
$("#slider").responsiveSlides({
auto: true,
pager: true,
pause: true, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls
nav: true,
speed: 500,
maxwidth: 800,
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});
});
</script>