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

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

Answer 1

我发现了问题所在。

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

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

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

Answer 2

您所包含的网页演示中似乎没有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插件在第一次＆＃34;动作＆＃34;之后停止工作

2 个答案: