Implementation of Jquery slider

support
1

Hi, I’m trying to integrate a Jquery slider called Bxslider: https://bxslider.com/
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="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> "

 <script>
   $(document).ready(function(){
   $('.bxslider').bxSlider({
  minSlides: 1,
  maxSlide: 6,
  touchEnabled: true,
  auto: true,
  slideWidth: 600
}); 
  </script>

And then here is my html:

sliderhtml
sliderhtml.png1256×550 122 KB

2

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

3

Maybe the first image is in the wrong path?
image

4

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?

5

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
6

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.