How do I make slider images fully responsive?

Question

I have a problem with my website slider images. I set my slider wrap and slider inner frame width to 100% but when I change the screen size the images size does not change. Also I set the images width to max-width:100% and the height of them to auto.

#sliderFrame {
  position:relative;
  width:100%;
  margin: 0 auto; /*center-aligned*/
}

#slider, #slider div.sliderInner {
  width:1280px;height:auto;/* Must be the same size as the slider images */
  border-radius: 6px;
}

#slider {
  background:#fff url(loading.gif) no-repeat 50% 50%;
  position:relative;
  transform: translate3d(0,0,0);
  box-shadow: 0px 1px 5px #999999;
}

#slider a.imgLink, #slider .video {
  z-index:2;
  cursor:pointer;
  position:absolute;
  top:0px;left:0px;border:0;padding:0;margin:0;
  width:100%;height:100%;
}

#slider div.loading {
  max-width:100%; height:auto;
  background:transparent url(loading.gif) no-repeat 50% 50%;
  filter: alpha(opacity=60);
  opacity:0.6;
  position:absolute;
  left:0;
  top:0; 
  z-index:9;
}

#slider img, #slider>b, #slider a>b {
  position:absolute; 
  border:none; 
  display:none;
  max-width:100%;
  height:auto;
}

#slider div.sliderInner {
  overflow:hidden; 
  -webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
  position:absolute; 
  top:0; 
  left:0;
  max-width:100%;
  height:auto;
}

<div id="sliderFrame">
  <div id="slider">
    <img src="image/Index_1600x500.jpg" alt="#cap1"/>
    <img src="image/Index_TrackerPnale_1600x500.jpg"/>
    <img src="image/Index_HyundaiSantafe_1600x500.jpg" alt="#cap2"/>
    <img src="image/Index_Support.jpg" title="Support Team"/>
    <img src="image/Index_SocialMedia_1600x500.jpg" title="Social Medias"/>
  </div>
</div>

simple just control the according to screen resolution via `media-query` or better for you use css bootstrap framework. — Muhammad Hamza Nisar, Mar 02 '16 at 10:00
Maybe try using '100vw' instead of '100%' https://developer.mozilla.org/en-US/docs/Web/CSS/length — Pit, Mar 02 '16 at 10:11
Your CSS is not accounting for almost anything in your html. You're not even controlling the `` tags with anything - of course they won't be the right size when you're not accounting for them — ntgCleaner, Mar 02 '16 at 14:18
Its will be control from `jquery/java` also share `jquery/java` code with your question because `jquery/java` will control item required according to media screen that how many item do you need according to screen inside main `ul/div` maybe you have understood what i'm trying to say or try this one plugin [plugin 1](http://flexslider.woothemes.com/basic-slider-with-custom-direction-nav.html) or this one [plugin 2](http://owlgraphic.com/owlcarousel/) — Muhammad Hamza Nisar, Mar 03 '16 at 05:58
[http://www.menucool.com/javascript-image-slider] @MuhammadHamzaNisar may be it could help to know really what am i doing : i use to make one of the MenuCool free sliders responsive , demo number 8 — UrWill, Mar 03 '16 at 15:32
@UrWill i think you have try this one, its very popular plugin http://flexslider.woothemes.com/basic-slider-with-custom-direction-nav.html or this one http://owlgraphic.com/owlcarousel/demos/one.html — Muhammad Hamza Nisar, Mar 04 '16 at 03:35

score 0 · Answer 1 · answered Mar 02 '16 at 14:22

0

Your CSS doesn't really say much about your HTML - Also, we have no clue on what you really mean by slider - But follow this fiddle: https://jsfiddle.net/p3r1x5sj/ and see the very minimal CSS you're looking for.

#sliderFrame {
    width:100%;
    height:100px;
    position:relative;
}
#sliderFrame #slider {
    width:100%;
    height:100%;
    position:relative;
    background:#fff url(loading.gif) no-repeat 50% 50%;
    box-shadow: 0px 1px 5px #999999;
}
#sliderFrame #slider img {
    width:100%;
    position:absolute;
    top:0;
    left:0;
}

The img tags are what you have to control. Also, unless you crop the images using overflow:hidden; on your outermost container, the images may be all different heights. In this case you may want to consider using divs with background-images

answered Mar 02 '16 at 14:22

ntgCleaner

5,865
9
48
86

may be it could help to know really what am i doing : i use to make one of the MenuCool free sliders responsive , demo number 8 :[link](http://www.menucool.com/javascript-image-slider) – UrWill Mar 02 '16 at 14:46
as i said the problem is images , I can`t set their width and height responsive. May be it`s because of the sliderInner class , the class get the height and width from the image. – UrWill Mar 02 '16 at 14:52
You set a pixel width to your slider inner class. Of course it won't be responsive. If you give that percentage, then it will move with its container size. if you change `width:1280px` to `width:100%`, then add `max-width:1280px` on the `#slider, #slider div.sliderInner`, it SHOULD do what you want. – ntgCleaner Mar 02 '16 at 15:23
I try , but if the image have a bigger width for example 1600px it will not show correctly . If you run the demo 8 and take a look at the inspect of the element of slider ,you will find a class which the width of it changes dynamically – UrWill Mar 03 '16 at 15:22
Do your actual image files have 'width:100%'? – ntgCleaner Mar 03 '16 at 15:25
yeah , i set their width to 100% – UrWill Mar 04 '16 at 12:45

How do I make slider images fully responsive?

1 Answers1