how to set image width for responsive image slider using JQuery and Javascript

Question

I want to make responsive image slider for my website using Jquery and Javascript.

<div>
  <ul>
    <li>
      <img src="#" alt="Slider Image" />
    </li>
    <li>
      <img src="#" alt="Slider Image" />
    </li>
    <li>
      <img src="#" alt="Slider Image" />
    </li>
  </ul>
</div>

My question is how to set the image width . I set image width for 100% and height for auto .

I set div width for 100% , but when I resize the screen, the image is not responsive.

I want to learn from scratch instead using plugins possible. How can I solve this problems?

Answer 1

You can achieve this by simply setting in your CSS something like this:

img {
  display:block /*fix inline gap - optional*/
  max-width:100%; /* the trick is here - setting max-width instead of width */
  height:auto;
}

See snippet below with your code:

 img { display: block; max-width: 100%; height: auto; } /*demo styles*/ ul { padding: 0; margin: 0; } li { margin: 0; list-style: none } 

 <div> <ul> <li> <img src="//lorempixel.com/1600/900/sports" alt="Slider Image" /> </li> <li> <img src="//lorempixel.com/1600/900/city" alt="Slider Image" /> </li> <li> <img src="//lorempixel.com/1600/900/food" alt="Slider Image" /> </li> </ul> </div> 

no need to use jQuery/JavaScript

Answer 2

Bro ,my advice to you is to use the plugin called bxSlider ( fully responsive ) slider. Easy for use and easy understandable.You can set modes, make adaptiveHeight...and much more options I personally was trying to make my own slide , after hours of a lot nervous I've decided to use that plugin. click here for downloading bxSlider !

Answer 3

Here's a fiddle of what you are looking for - assuming it's not a background image.

https://jsfiddle.net/WebDevelopWolf/u6vompp2/

Basically, the code you need to make your images responsive is:

img {
  width:100%;
  height:auto;
}

If it's a background image though then the you'll need:

div {
  background-repeat:no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  background-position:center;
  background:url('http://www.abstract-thinking.co.uk/img/logo.jpg')
}

Answer 4

that is because you haven't given a width and height for your image

so for your div , you have given width:100% and height:auto , (if you want you can give any px or % value for your div )

then for your image inside the div give width and height for it ( div img says images inside the div tag)

div img{
 width:100%;
 height:100%
}

in here, child element takes the full widh and height of it's parent element.hope this will help to you.