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 .....

Answer 2

// Width
            $this.width(options.width);
            $this.find("ul, li img").width(options.width);

            // Height
            $this.height(options.height);
            $this.find("ul, li").height(options.height);

after you download the files , open the Source js , scroll to end of file

change this line:

$this.width("100%");

Edit:

Actually if you try :

$("#slideshow").craftyslide({  'width': '100%'});

it will work , i dont get what exactly is your problem , maybe you need to review the options :

width (number)

Set a custom width for your slideshow.

height (number)

Set a custom height for your slideshow

pagination (true/false)

Select whether to display pagination or not. Setting to false hides pagination and enables auto mode.

fadetime (number)

Define the fade animation speed of slides.

delay (number)

Used during auto mode (pagination set to false). Defines the delay between each slide being shown.

Options example:

Example showing multiple options

$("#slideshow").craftyslide({ 'width': 640, 'height': 400,
'pagination': false, 'fadetime': 500, 'delay': 2500 });