Javascript Image Slider / Posts /

How to make the slider responsive

Hi, I am trying to put the slider into a responsive website. I have tried to put the css for the image max-width:100% but it does not work (the image is not resizable, however the container is resizable). Any advice?
david  4 years ago   viewed: 48339    

8 Answers

I was able to make it responsive. My example uses media queries in the CSS. You'll have to dig through the meta-linked files
Graham   3 years ago
Brilliant! Thanks for your share.

I found you make it by the following CSS code:
@media screen and (max-width: 1561px) {
#mediumslider {
display: none;
@media screen and (min-width: 1560px) {
#smallslider {
display: none;
div.navBulletsWrapper  {
top:570px; left:1200px;

One question. Is it cross browser compliant?
Joe   3 years ago
I found only IE 6 or earlier not supports min-width. All other browsers support it.
Joe   3 years ago
Maybe this post Scale Image in Slider will help.
milo   4 years ago
Hi Milo, thank for the reply
I have tried to read the post you gave, but it seems that we cannot put the slider responsive.
However, I have tried to put CSS @media, so it should display different size of slider for different width of screen. Basically, I put different id for each slide (the total of slide is 4), so I can display different size of images for different width of screen. For example if the width screen is above 1200px, a 800px-600px image will be shown, and if the width screen range from 980px to 1199px, a 600px-400px image will be shown (images are put as background for each id - CSS code). p.s. notify if you dont understand my explanation.
My question is that how to make slider/javascript still work. Hope you can give me an idea how to make it works. Anyway, I am intended not to use <img> in my HTML code.
Here is the link of the page. (the thumbnail also doesnt work, :/)
david   4 years ago
You can achieve this by using media queries and the CSS background-size property. 

Here's an example code for two sizes so that you can see what I mean:
@media only screen and (min-width: 768px) { /* Probably there are more classes, but I haven't discoverd them yet */ #slider, #slider .mcSlc, #slider .mcBox { /* This would change based on your original images size */ /* First argument is width, second is height */ background-size: 739px 83px !important; } } @media only screen and (min-width: 1050px) { #slider, #slider .mcSlc, #slider .mcBox { /* Images would be in their full size */ background-size: auto !important; } }

What the above code does is that it shrinks down the background image for the elements that create the effects - it depends on you calculating the scaled sizes of the images, but it works for me. 
In my case the original images are 1024 x 115px, so when the width is scaled down to 739px, their height should be around 83px.

Note, that this won't work in IE8 and lower, but:
  1. Your desktop layout(that should work on IE 8) should contain the full-sized image slider
  2. Media queries don't work on IE 8 without a polyfill
Hope that helps to someone!
Nikola Nik   3 years ago
Menucool has released the Ninja Slider that is responsive and mobile-friendly(touch-enabled).
Milo   3 years ago
tamer has a good(but not perfect) solution in the post:
Milo   2 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: