Implementation of Jquery slider

Hi, I’m trying to integrate a Jquery slider called Bxslider:
However if it looks easy on their website, it just does not work for me ( I get all my images stacked up vertically on the left). I put the following in my headers:

<link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script> "

  minSlides: 1,
  maxSlide: 6,
  touchEnabled: true,
  auto: true,
  slideWidth: 600

And then here is my html:

I’ve had a lot of success with the “Slick” slider.

Maybe the first image is in the wrong path?

To me that implies your css is not working somehow. Is class “slider” properly defined/loaded for that page you are on? What does your dev console in the browser say?

Thank you for your help. I actually went for the “slick” slider as mentioned by zivbk1 and finally made it worked. I had an issue for both sliders for the initialization, the jquery file was not picked up by the header. I don’t know much about jquery or js so I’m struggling quite a bit everytime I have to use it. Thanks again.

1 Like

Sometimes you have to load a javascript before the end </body> tag. Learn to dig in the developer tools for your browser, because that will help you pinpoint what is happening, or what is/is not loading. On macOS Firefox, it is opt-cmd-i for instance. Also, the order of loading in your <head> section sometimes matters. For the above, you might load jquery first, then the js then the css. I am not sure, but that is what I would try if I were troubleshooting. See if the docs specify it precisely.