Is there a trick to make the slideshow responsive

[Christiane Klein]

The slideshow works fine, but I'm not able to see it on a smartphone.
I put in these two links

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="js/jquery.slides.min.js"></script>.
What more should I write?
Thank you!

[Thin Soldier]

Is your actual site responsive already? If not, that's your problem.

Otherwise, here's the code I use as my starting point:

https://thinsoldier.github.io/externals/slidesjs-jumpstart/

https://github.com/thinsoldier/SlidesJS-JumpStart/releases

However, I strongly recommend using a slideshow that is being actively maintained:

http://kenwheeler.github.io/slick/

[pat hn]

i had the same problem.

i created a class called "image" and i set following parameters in the <style> .... </style> tags:

.image {
    position:relative;
    max-width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    margin: auto;
}

add in body:

 <div class="slides">
    <image class="image" src="../image1.jpg">
    <image class="image" src="../image2.jpg">
    <a href="#" ....><i class="... />
    ...
</div>

in my case it works fine. Take care for the picture height. i had to delimit the height to 500px for the media querris for smaller displays and desktops. update the css with the following specs:

   /* For smaller displays like laptops */
    @media (min-width: 768px) and (max-width: 979px) {
          .container {
            width: 724px
         }
        .slidesjs-container, .slidesjs-control {
            height:500px !important;
        }
  }

    /* For larger displays */
    @media (min-width: 1200px) {
      .container {
        width: 1170px
      }
   .slidesjs-container, .slidesjs-control {
   height:500px !important;
  }
    }

hopefully it helps u...