图像滑块未正确加载

时间:2014-09-02 05:38:54

标签: javascript jquery html css twitter-bootstrap

这是我网站的HTML。我想添加此image slider:。我有一个问题,由于某些原因,我得到的是4个子弹点和旁边的错误img图片。你能看看我的HTML,看看你能做些什么来帮助你。

-Thanks

http://jsfiddle.net/lasquish/hL7vLcd5/

<div class="container">
    <ul class="slider">
        <li><img src="/images/Day1.jpg" /></li>
        <li><img src="/images/Day1.jpg" /></li>
        <li><img src="/images/Day1.jpg" /></li>
        <li><img src="/images/Day1.jpg" /></li>
    </ul>
</div>

这是剧本:

<script src="js/jquery.bxslider.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
<script>
    $(document).ready(function(){
        $('.bxslider').bxSlider();
    });
</script>

2 个答案:

答案 0 :(得分:2)

由于您已使用.slider类包装幻灯片内容,因此您需要执行以下更改

$(document).ready(function(){
    $('.slider').bxSlider();
});

在jQuery库之后调用bxslider.min.js 您还调用了2个不同版本的jQuery库。这会产生冲突。

答案 1 :(得分:0)

  1. 您需要添加以下css以删除项目符号

    UL {     list-style-type:none; }

  2. 需要使用正确的图片路径,或者您可以使用完整图片“http://fiddle.jshell.net/img/logo.png”...

  3. 由于你还没有在这里分享所有必需的文件,所以我们无法在最后测试。如果问题没有解决,请分享你在这里包含的js库文件。

相关问题