Javascript Image Slider / Posts /

How to make the slider responsive

205
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  8 years ago   viewed: 66188    

9 Answers

13
Menucool has released the Ninja Slider that is responsive and mobile-friendly(touch-enabled).
Milo   7 years ago
-7
tamer has a good(but not perfect) solution in the post: http://www.menucool.com/1372/Scale-Image-in-Slider
Milo   6 years ago
-16
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
https://www.kenchii.com/BeautyOnlinestore/index.html
Graham   7 years ago
-12
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   7 years ago
2
I found only IE 6 or earlier not supports min-width. All other browsers support it.
Joe   7 years ago
1


This blog is really very helpful to understand technology integration. Earlier i was the little bit confused about technology integration then i found this blog then i got full knowledge about this technology. I think i will visit this blog again because this blog is very informative.I was using window 10 and i never faced any kind of issues in that but recently i was using MS Drawing tool and it is not getting open and it showing some unknown issues which is difficult to understand i contacted Microsoft Paint customer service for help.


james ketty   2 years ago
-5
Maybe this post Scale Image in Slider will help.
milo   8 years ago
-7
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. http://clubs.ntu.edu.sg/cec/ (the thumbnail also doesnt work, :/)
david   8 years ago
-7
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   7 years ago

   

Your name*
Password
(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:
▲