使用 bxslider 脚本制作滑块，但现在 href 不工作，可能是什么问题？

Question

我使用 bxslider 在我的 blogspot 中放置了一个滑块，但现在 link（书名）不起作用。请参阅 phlawdigest.blospost.com 以查看实际站点。以下是我使用的代码。

Jquery代码如下：

<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代码如下：

<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>

Answer 1

bxSlider 支持 jquery3.1.1 并且您无法为您的 html class...

提供适当的 css 属性

<!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>

Answer 2

语法错误：

使用 bxslider 脚本制作滑块，但现在 href 不工作，可能是什么问题？

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

html

jquery

href

bxslider