Setting up an image slider

Asked

Viewed 863 times

-1

I studied some HTML and CSS, watching some classes on Youtube and doing the lessons of Code Academy and now I’m creating my first website.

I want to add a slider of images, by what I researched, the best option will be with jQuery even, but this I do not understand anything at all, so I tried to use some models ready, following the documentation of these, and what I liked most was the bx slider, so I decided to use it.

I followed the instructions of the website itself bx slider and the slider appeared right on the site, but the "styles", the buttons next and Prev, the paging buttons and such do not appear as in the examples of bx slider, appear only text without any formatting.

Here the HTML code (hidden the header because I don’t think I have any influence on slider):

<!DOCTYPE html5>
<html>
<head>
    <html lang="pt-br" />
        <meta charset="utf-8" />
    <title></title>    
    <link href="css/styles.css" rel="stylesheet" type="text/css">
        <link href="/lib/jquery.bxslider.css" rel="stylesheet" />
        <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/jquery.bxslider.min.js"></script>
</head>
<body>
    <header>
        ...
    </header>
    <div id="indexbanner">
        <ul class="bxslider">
          <li><img src="imgsprodutos/img (41).jpg" /></li>
          <li><img src="imgsprodutos/img (42).jpg" /></li>
          <li><img src="imgsprodutos/img (43).jpg" /></li>
        </ul>
        <script type="text/javascript">
            $(document).ready(function(){
                $('.bxslider').bxSlider({
                    auto: true,
                    autocontrols: true,
                    responsive: false,
                    touchenabled: true
                });
            });
        </script>
    </div>
</body>
</html>

The FAQ of bx slider indicates that this problem may happen because the images may not be in the same folder as the CSS file, but I already checked and everything is right.

javascript jquery html bxslider slider
  • 1

    this doctype is incorrect. <!DOCTYPE html5> I believe you "meant" <!DOCTYPE html>

  • Ahh, thanks for letting me know, I don’t know where I got this doctype! haha But it didn’t solve the problem... :(

  • I think it’s a good idea to check the files .css and .js are in the indicated paths. Then test whether $().bxSlider returns empty or exists (this is the function called to initialize the slider). If it still doesn’t work, I think just looking/debugging the bxslider code to know for sure.

  • Thank you very much! href from jquery.bxslider.css was wrong! Wow, I had checked this a few times already and hadn’t noticed! Thanks Dang!

  • I do not know very well yet how the stackoverflow works, but from what I understand need an answer to mark as solved, if you want to post this comment as a response, I mark it as "solver"! haha

  • 5

    This question seems to be out of date because it is too punctual and the problem is not possible to reproduce.

  • @Sergio Technically, it’s easy to reproduce: just put the JS path different from where the file actually is. LAUGHTER

  • I apologize for the personal confusion, the problem has been solved, thank you all.

Show 3 more comments

1 answer

1


You can start by checking whether the . css and . js files are in the given paths.

Then test if $(). bxSlider returns empty or exists (is the function called to initialize the slider).

If it still doesn’t work, I think just looking/debugging the bxslider code to know for sure.

Browser other questions tagged javascript jquery html bxslider slider

You are not signed in. Login or sign up in order to post.