Javascript Bxslider插件在第一个“后停止工作”；行动“；_Javascript_Jquery_Html_Bxslider

Javascript Bxslider插件在第一个“后停止工作”；行动“；

javascript jquery html

Javascript Bxslider插件在第一个“后停止工作”；行动“；,javascript,jquery,html,bxslider,Javascript,Jquery,Html,Bxslider,我正在处理的这个网站有一些问题我正在使用Bxslider插件为projects页面创建一种公文包，但它有一些问题：只要单击缩略图或方向箭头，滑块就不再工作，我无法更改显示的图片我试着改变html标记的位置，但它没有做任何新的事情这是我的html <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" /> <ul class="portfolio">

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

我正在使用Bxslider插件为projects页面创建一种公文包，但它有一些问题：

只要单击缩略图或方向箭头，滑块就不再工作，我无法更改显示的图片

我试着改变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>


$（文档）.ready（函数（）{
$（'.portfolio'）.bxSlider({
pagerCustom:“.thumbs”
});
});

我不知道为什么会这样

多付一点钱将不胜感激

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

谢谢你抽出时间

编辑：尝试将下载的.js替换为他们在网站上使用的，我想可能是被窃听了，但我错了，它仍然不起作用

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

在您包含的页面演示中，似乎没有

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>


BX滑块示例
投资组合

项目3D








Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯·维韦拉·利古拉·埃吉特发酵菌ultricies。在康塞特图尔，我们需要一个新的时间。


Donec lobortis consequat sollicitudin。在阿利夸姆努克。Phasellus vel viverra eros，ac孕妇奥古斯。这是一个自由的地方。多奈克·阿利奎姆·尤伊斯莫·莫里斯·塞姆珀。


在达皮布斯奥古斯·康盖特举行的精英会议。塞德·福西布斯·因特杜姆·波特托。这是一只狮子的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭，它的前庭。这是我的头巾。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。

$（文档）.ready（函数（）{
$（'.portfolio'）.bxSlider({
pagerCustom:“.thumbs”
});
});

我发现了问题所在

我在所有东西上都使用了这句话，以便更快地向按钮和其他东西添加过渡

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

原来他们在窃听滑块