How to make slider take 100% of container with JavaScript?

Question

I've taken the slider from here: http://projects.craftedpixelz.co.uk/craftyslide/ And I want the slider to take 100% width of its container instead of the set pixel amount it allows for. How would I accomplish this?

More preferably it would just be bound by its container, so if its container had a width or height of 300 it could have no more than that.

Answer 1

As ProllyGeek said you may do what he said ..... or do the other way around like this changing many things in ur downloaded files

In the css do this

Craftyslide CSS Styles

#container{
position:absolute;
width:80%;
height:60%;
top:10%;
left:10%;
}
#slideshow {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    position:absolute;
    border:15px solid #fff;
    -webkit-box-shadow:0 3px 5px #999;
    -moz-box-shadow:0 3px 5px #999;
    box-shadow:0 3px 5px #999;
}

#slideshow ul {
    width:100%;
    position:relative;
    overflow:hidden;
    margin:0;
    padding:0;
}

#slideshow ul li {
    position:absolute;
     width:100%;
    top:0;
    left:0;
    margin:0;
    padding:0;
    list-style:none;
}

#pagination {
    clear:both;
    width:75px;
    margin:25px auto 0;
    padding:0;
}

#pagination li {
    list-style:none;
    float:left;
    margin:0 2px;
}

#pagination li a {
    display:block;
    width:10px;
    height:10px;
    text-indent:-10000px;
    background:url(../images/pagination.png);
}

#pagination li a.active {
    background-position:0 10px;
}

.caption {
    width:100%;
    margin:0;
    padding:10px;
    position:absolute;
    left:0;
    font-family:Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight:lighter;
    color:#fff;
    border-top:1px solid #000;
    background:rgba(0,0,0,0.6);
}

in the craftyslide js change

var defaults = {
        "width":"100%",
         "height":"100%",
            "pagination": true,
            "fadetime": 350,
            "delay": 5000
        };

In your html

<div id="container">
      <div id="slideshow">
        <ul>
          <li>
            <img src="http://farm6.static.flickr.com/5270/5627221570_afdd85f16a_z.jpg" alt="" title="Light Trails" />
          </li>

          <li>
            <img src="http://farm6.static.flickr.com/5146/5627204218_b83b2d25d6_z.jpg" alt="" title="Bokeh" />
          </li>

          <li>           
            <img src="http://farm6.static.flickr.com/5181/5626622843_783739c864_z.jpg" alt="" title="Blossoms" />
          </li>

          <li>           
            <img src="http://farm6.static.flickr.com/5183/5627213996_915aa49939_z.jpg" alt="" title="Funky Painting" />
          </li>

          <li>           
            <img src="http://farm6.static.flickr.com/5182/5626649425_fde8610329_z.jpg" alt="" title="Vintage Chandelier" />
          </li>                          
        </ul>
      </div>   
    </div>  

in your craftyslide min

var defaults={"width":"100%","height":"100%","pagination":true,"fadetime":350,"delay":5000}

Cant get exactly what you want but hope this helps .....