CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Alex
Alex

Reputation: 61

Image slider not loading properly

This is the html for my website. I would like to add this image slider:. I have one problem, for some reason all I get is 4 bullet point and a error img picture next to it. Could you look at my html and see what you could do to help.

-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>

This is the Script:

<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>

Upvotes: 0

Views: 321

Answers (2)

Feroza
Feroza

Reputation: 397

Since you have wrapped slide content with .slider class you need to do following changes

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

Call bxslider.min.js after jQuery library Also you have call 2 different version of jQuery library. this will make conflict.

Upvotes: 2

Brijesh
Brijesh

Reputation: 86

  1. You need to add below css to remove bullet

    ul { list-style-type: none; }

  2. Need to use correct image path or you can use full image "http://fiddle.jshell.net/img/logo.png"...

As you have not shared all required file here ..so we unable to test at our end. Please share js library file which you have include here if problem no solve.

Upvotes: 0

Related Questions