# Expanding Slider Demo*

### * Resize the browser window

## Full page width

## Half page width with two images showing

## 3/4 page width with one image showing (expand : true)

This AnythingSlider (with options: `expand : true`) will be eager and fill up the wrapper (the surronding div).

So the content will scale incorrectly...

Styling: `#wrapper3 { width: 75%; height: 500px; margin: 0 auto; border: solid red; }`

## 3/4 page width, one image (expand : true, aspectRatio : true)

This AnythingSlider (with options: `expand : true, aspectRatio : true`) will scale according to a calculated value for the aspect ratio. N.B. the "base"-dimensions, to calculate the aspect ratio from, must be explicitly given by e.g. css: `#slider4 { width: 680px; height: 317px; }`. In this case there will be space over in the height dimension if the window is kept small enough.

Styling: `#wrapper4 { width: 75%; height: 500px; margin: 0 auto; border: solid green; }`

## 3/4 page width, one image (expand : true, aspectRatio : '680:317')

This AnythingSlider (with options: `expand : true, aspectRatio : '680:317'`) will scale according to a calculated value from the aspect ratio. So the string '660:317' is parsed and calculated to a float = 680/317. In this case there will be space over in the height dimension if the window is kept small enough.

Styling: `#wrapper5 { width: 75%; height: 500px; margin: 0 auto; border: solid green; }`

## 3/4 page width, one image (expand : true, aspectRatio : 680/317)

This AnythingSlider (with options: `expand : true, aspectRatio : 680/317`) will scale according to the given float (680/317). In this case there will be space over in the height dimension if the window is kept small enough.

Styling: `#wrapper6 { width: 75%; height: 500px; margin: 0 auto; border: solid green; }`

## 3/4 page width, one image (expand : true, aspectRatio : 1.5)

This AnythingSlider (with options: `expand : true, aspectRatio : 1.5`) will scale according to the given float (1.5). In this case there will be space over in the width dimension if the window is kept wide enough.

Styling: `#wrapper7 { width: 75%; height: 200px; margin: 0 auto; border: solid green; }`

## 3/4 page width, one image (expand : true, aspectRatio : 1.5, showMultiple : 2)

This AnythingSlider (with options: `expand : true, aspectRatio : 1.5, showMultiple : 2` ) will scale according to the given float (1.5) X showMultiple (1.5*2=3). In this case there will be space over in the width dimension if the window is kept wide enough.

Styling: `#wrapper8 { width: 75%; height: 200px; margin: 0 auto; border: solid green; }`