Bxslider 插件在第一个 "action" 后停止工作

Question

我正在使用的网站出现一些问题。

我正在使用 Bxslider 插件为项目页面创建一种投资组合，但它出了点问题：

当我单击缩略图或方向箭头时，滑块不再起作用，我无法更改显示的图片。

我试过切换我的 html 标记的位置，但它没有做任何新的事情。

所以，这是我的 html

<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />
            <ul class="portfolio">
                <li><img src="img/portfolio/projetos3d/1.jpg"></li>
                <li><img src="img/portfolio/projetos3d/2.jpg"></li>
                <li><img src="img/portfolio/projetos3d/3.jpg"></li>
                <li><img src="img/portfolio/projetos3d/7.jpg"></li>
                <li><img src="img/portfolio/projetos3d/8.jpg"></li>
            </ul>
            <div class="thumbs">
                <a data-slide-index="0" href=""><img src="img/portfolio/projetos3d/1.jpg"></a>
                <a data-slide-index="1" href=""><img src="img/portfolio/projetos3d/2.jpg"></a>
                <a data-slide-index="2" href=""><img src="img/portfolio/projetos3d/3.jpg"></a>
                <a data-slide-index="3" href=""><img src="img/portfolio/projetos3d/7.jpg"></a>
                <a data-slide-index="4" href=""><img src="img/portfolio/projetos3d/8.jpg"></a>
            </div>
        </div>

这里是 js

<script src="js/jquery.bxslider.min.js"></script>
<script>
    $(document).ready(function(){
        $('.portfolio').bxSlider({
            pagerCustom: '.thumbs'
        });
    });
</script>

我不知道为什么会这样。

如果能多加一点帮助，我们将不胜感激。

这里有一个演示，如果你想看到它工作（或不工作...）

感谢您的宝贵时间

编辑：尝试将下载的 .js 替换为他们在其网站上使用的 .js，我想它可能有某种错误，但我错了，它仍然不起作用。

编辑 2：我也尝试将脚本切换到 html 之前，但正如预期的那样，它没有改变任何东西。

Answer 1

您包含的页面演示中似乎没有 DOCTYPE、head 或 body。这可能会对插件的功能产生影响。

您尝试过使用有效标记吗？至少：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>BX Slider Example</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/inovstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/css.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/breakingNews.css">
    <!-- JS -->
    <script src="js/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />
</head>

<body>
    <div class="container">
    <h2>
        PORTFOLIO<br>
        <span class="white">PROJETOS 3D</span>
    </h2>
    <div class="content double_col">
        <div class="col">
            <ul class="portfolio">
                <li><img src="img/portfolio/projetos3d/1.jpg"></li>
                <li><img src="img/portfolio/projetos3d/2.jpg"></li>
                <li><img src="img/portfolio/projetos3d/3.jpg"></li>
                <li><img src="img/portfolio/projetos3d/7.jpg"></li>
                <li><img src="img/portfolio/projetos3d/8.jpg"></li>
            </ul>
            <div class="thumbs">
                <a data-slide-index="0" href=""><img src="img/portfolio/projetos3d/1.jpg"></a>
                <a data-slide-index="1" href=""><img src="img/portfolio/projetos3d/2.jpg"></a>
                <a data-slide-index="2" href=""><img src="img/portfolio/projetos3d/3.jpg"></a>
                <a data-slide-index="3" href=""><img src="img/portfolio/projetos3d/7.jpg"></a>
                <a data-slide-index="4" href=""><img src="img/portfolio/projetos3d/8.jpg"></a>
            </div>
        </div>
        <div class="col portfolio_desc">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris viverra ligula eget fermentum ultricies. Aenean tempus nec odio at consectetur.<br><br>
                Donec lobortis consequat sollicitudin. In et aliquam nunc. Phasellus vel viverra eros, ac gravida augue. Sed vel sapien vel enim blandit placerat et a libero. Donec aliquam euismod mauris id semper.<br><br>
                Maecenas consequat quam elit, in dapibus augue congue eget. Sed faucibus interdum porttitor. Aenean lobortis aliquet leo, et scelerisque leo pretium id. Vestibulum est dolor, cursus sit amet pretium vitae, commodo ut enim. Cras sit amet est turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            </p>
            <a href="index.php?p=contactos" class="brochura"><img src="img/portfolio/pdf.png"> &nbsp; Visualizar brochura</a>
            <a href="index.php?p=contactos" class="orcamento">PEDIR ORÃ‡AMENTO</a>
        </div>
    </div>
</div>
<!-- SLIDER -->
<script src="js/jquery.bxslider.min.js"></script>
<script>
    $(document).ready(function(){
        $('.portfolio').bxSlider({
            pagerCustom: '.thumbs'
        });
    });
</script>
</body>
</html>

Answer 2

我找到问题所在了。

我在所有内容上都使用了这条线，以便更快地向按钮和其他内容添加过渡效果。

*{
    -webkit-transition: color 0.2s linear, background 0.2s linear, border 0.2s linear;
       -moz-transition: color 0.2s linear, background 0.2s linear, border 0.2s linear;
         -o-transition: color 0.2s linear, background 0.2s linear, border 0.2s linear;
            transition: color 0.2s linear, background 0.2s linear, border 0.2s linear;
}

原来他们在窃听滑块。

Bxslider 插件在第一个 "action" 后停止工作

Bxslider Plugin stops working after first "action"

html

javascript

jquery

bxslider