Used a bxslider script to make a slider but now the a href is not working, what might be the problem?

I placed a slider in my blogspot using bxslider but now the link (the title of the book) is not working. See phlawdigest.blospost.com to see the actual site. Below are the codes I used.

The Jquery Code is as follows:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" /> 
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script>
    $(document).ready(function() {
        $('.image-left').bxSlider({
            auto: true,
            pause: 50000,
     // in millisecond
            autoHover: true, // pause on hover
            autoControls: true,
            captions: false,
        }); 
    });

HTML code is as follows:

<div class="image-left">
    <div> 
         <img src="URL link/>
         <h2><a href = "https://amzn.to/3tu0Bxf"> Book Title One</a></h2>
         <p>some text description</p>   
    </div>  

    <div>
         <img src="URL link"/>
         <h2><a href = "https://amzn.to/3tu0Bxf"> Book Title Two</a></h2>
         <p>some text description</p>   
    </div>  
</div>

Solution

bxSlider support jquery3.1.1 and you can not give appropriate css properties for your html class...

<!DOCTYPE html>
<html>

<head>
    <title>Try jQuery Online</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <style>
        .selected {
            color: red;
        }

        .highlight {
            background: yellow;
        }

        .image-left {
            text-align: center;
        }

     img
    {
       width: 100%;
       height: 320px;
    }

    .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager
    {
       text-align: center !important;
    }
    </style>
</head>

<body>
    <div class="image-left">
        <div>
            <img src="https://images.pexels.com/photos/50594/sea-bay-waterfront-beach-50594.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
         <h2>
            <a href = "https://amzn.to/3tu0Bxf"> Book Title One</a>
         </h2>
         <p>some text description</p>   
    </div>  

    <div>
         <img src="https://images.pexels.com/photos/531321/pexels-photo-531321.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
         <h2><a href = "https://amzn.to/3tu0Bxf"> Book Title Two</a></h2>
         <p>some text description</p>   
    </div>  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
    $(document).ready(function() {
        $('.image-left').bxSlider({
            auto: true,
            pause: 50000,
            touchEnabled: false,
     // in millisecond
            autoHover: true, // pause on hover
            controls: true,
            captions: false,
        }); 
    });

</script>
</body>
</html>