Bxslider插件在第一次“动作”后停止工作_JavaScript

我正在处理这个网站的一些问题。

我正在使用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替换为他们在网站上使用的那个。我想也许它有点被窃听，但我错了，它仍然不起作用。

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

我发现了问题所在。

我在所有内容上使用了这些行，以便更快地向按钮和内容添加过渡。

*{
    -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;
}

事实证明他们正在窃听滑块。

在您包含的页面演示中，您似乎没有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>

Bxslider插件在第一次“动作”后停止工作

问题描述

1楼

2楼