How to put html link in a carousel image jquery mobile?

How to put html link in a carousel image jquery mobile?

I have developed an application in JQM using carousel effect. I want to make those images hyperlinked. I want to put html link inside those images so that when you slide and see those images, by clicking on that image it will navigate you through one html file. 



Below is my code, instead when i use this code the sliding is not taking place but the links are working fine.


<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile</title>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
        <link rel="stylesheet" href="css/jquery.mobile.carousel.css" />
        <script src="js/jquery.mobile.carousel.js"></script>
        <script>
            $(document).ready(function() {
                $('#carousel').carousel({endless: true});
            });
        </script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header" data-position="inline" id="header"> 
            
                <h1>jQuery mobile carousel</h1>
            </div>
            <!-- /header -->

            <div data-role="content">
                  
         
                <ul id="carousel">
                    
                    <li><a href="Slide1.jsp"><img src="http://lorempixum.com/500/500/nature/2" width="100%" /> </a></li>
                    <li><a href="Slide1.jsp"> <img src="http://lorempixum.com/500/500/nature/3" width="100%" /></a></li>
                    <li><a href="Slide1.jsp"><img src="http://lorempixum.com/500/500/nature/4" width="100%" /></a></li>
                    <li><a href="Slide1.jsp" ><img src="http://lorempixum.com/500/500/nature/1" width="100%"/></a></li>
                </ul>
            </div>
            <!-- /content -->
            <div data-role="footer">
                <h4>jQuery mobile carousel</h4>
            </div>
        </div>
        <!-- /footer --> 
        </div>
        <!-- /page -->
    </body>
</html>