> For the complete documentation index, see [llms.txt](https://transition-slider.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://transition-slider.gitbook.io/jquery/slider-options/size.md).

# Size

You can use/change following options in the slider setup method. For example:

```markup
<script>
    jQuery(document).ready(function($) {
        $("#slider-wrapper").transitionSlider({
            // example of size slider options
            responsive: true,
            ratio: 2,
            ratioTablet: 1.5,
            ratioMobile: 0.8,
            fullscreen: false,
            lightboxMode: {
                enable: true,
                text: 'open slider in LIGHTBOX',
                fontColor: '#6c6c6c',
                hoverColor: '#333333',
                fontFamily: 'Arial',
                fontSize: 20
            },
            width: 1000,
            height: 550,
            heightTablet: 450,
            heightMobile: 350,
            mobileSize: 768,
            tabletSize: 1024,
        });
    });
</script>
```

| **Parameter**           | Type      | Default                     | Description                                                                                                                                                                                                                                                                                       |
| ----------------------- | --------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `responsive`            | `boolean` | `true`                      | Forces the slider to adapt width to it’s parent container width on **desktop**. Height of the slider is defined with `height` slider parameter. If this option is not working maybe `fullscreen` is `true`, disable `fullscreen` with `false` and responsive should work.                         |
| `responsiveMobile`      | `boolean` | `true`                      | Forces the slider to adapt width to it’s parent container width on **mobile device**. Height of the slider is defined with `heightMobile` slider parameter. If this option is not working maybe `fullscreenMobile` is `true`, disable `fullscreenMobile` with `false` and responsive should work. |
| `responsiveTablet`      | `boolean` | `true`                      | Forces the slider to adapt width to it’s parent container width on **tablet device**. Height of the slider is defined with `heightTablet` slider parameter. If this option is not working maybe `fullscreenTablet` is `true`, disable `fullscreenTablet` with `false` and responsive should work. |
| `forceResponsive`       | `boolean` | `false`                     | <p>Forces the slider to adapt to the full browser window width on <strong>desktop</strong>.<br>Height of the slider is defined with <code>height</code> slider parameter.</p>                                                                                                                     |
| `forceResponsiveMobile` | `boolean` | `false`                     | <p>Forces the slider to adapt to the full browser window width on <strong>mobile device</strong>.<br>Height of the slider is defined with <code>heightMobile</code> slider parameter.</p>                                                                                                         |
| `forceResponsiveTablet` | `boolean` | `false`                     | <p>Forces the slider to adapt to the full browser window width on <strong>tablet device</strong>.<br>Height of the slider is defined with <code>heightTablet</code> slider parameter.</p>                                                                                                         |
| `ratio`                 | `number`  |                             | The aspect ratio of an slide describes the proportional relationship between its width and its height. **This parameter overrides any** `height` **parameter!**                                                                                                                                   |
| `ratioTablet`           | `number`  |                             | Same like `ratio` parameter only this ratio is for tablet. **This parameter overrides any** `height` **parameter!**                                                                                                                                                                               |
| `ratioMobile`           | `number`  |                             | Same like `ratio` parameter only this ratio is for mobile. **This parameter overrides any** `height`**parameter!**                                                                                                                                                                                |
| `fullscreen`            | `boolean` | `true`                      | Forces the slider to adapt height to fit the screen and width to it’s parent container width on **desktop**. **This option override all other size options.**                                                                                                                                     |
| `fullscreenMobile`      | `boolean` | `false`                     | Forces the slider to adapt height to fit the screen and width to it’s parent container width on **mobile device**. **This option override all other size options.**                                                                                                                               |
| `fullscreenTablet`      | `boolean` | `false`                     | Forces the slider to adapt height to fit the screen and width to it’s parent container width on **tablet device**. **This option override all other size options.**                                                                                                                               |
| `forceFullscreen`       | `boolean` | `false`                     | Forces the slider to adapt width and height to fit the screen on **desktop**. **This option override all other size options.**                                                                                                                                                                    |
| `forceFullscreenMobile` | `boolean` | `false`                     | Forces the slider to adapt width and height to fit the screen on **mobile device**. **This option override all other size options.**                                                                                                                                                              |
| `forceFullscreenTablet` | `boolean` | `false`                     | Forces the slider to adapt width and height to fit the screen on **tablet device**. **This option override all other size options.**                                                                                                                                                              |
| `lightboxMode`          | `object`  |                             | Object with lightbox mode parameters for **desktop**.                                                                                                                                                                                                                                             |
| `{`                     |           |                             |                                                                                                                                                                                                                                                                                                   |
| `enable`                | `boolean` | `false`                     | Enable or disable lightbox mode.                                                                                                                                                                                                                                                                  |
| `text`                  | `string`  | `'open slider in LIGHTBOX'` | Content of lightbox text element.                                                                                                                                                                                                                                                                 |
| `fontColor`             | `string`  | `'#6c6c6c'`                 | Font color of the text element. (Example: `"#ffffff"`).                                                                                                                                                                                                                                           |
| `hoverColor`            | `string`  | `'#333333'`                 | Font color of the text element on mouse hover. (Example: `"#ffffff"`).                                                                                                                                                                                                                            |
| `fontFamily`            | `string`  | `'Arial'`                   | Font family of the text element.                                                                                                                                                                                                                                                                  |
| `fontSize`              | `number`  | `20`                        | Font size of the text element. Value is number and unit is px.                                                                                                                                                                                                                                    |
| `}`                     |           |                             |                                                                                                                                                                                                                                                                                                   |
| `lightboxModeMobile`    | `object`  |                             | Object with lightbox mode parameters for **mobile device**.                                                                                                                                                                                                                                       |
| `{`                     |           |                             |                                                                                                                                                                                                                                                                                                   |
| `enable`                | `boolean` | `false`                     | Enable or disable lightbox mode.                                                                                                                                                                                                                                                                  |
| `text`                  | `string`  | `'open slider in LIGHTBOX'` | Content of lightbox text element.                                                                                                                                                                                                                                                                 |
| `fontColor`             | `string`  | `'#6c6c6c'`                 | Font color of the text element. (Example: `"#ffffff"`).                                                                                                                                                                                                                                           |
| `hoverColor`            | `string`  | `'#333333'`                 | Font color of the text element on mouse hover. (Example: `"#ffffff"`).                                                                                                                                                                                                                            |
| `fontFamily`            | `string`  | `'Arial'`                   | Font family of the text element.                                                                                                                                                                                                                                                                  |
| `fontSize`              | `number`  | `20`                        | Font size of the text element. Value is number and unit is px.                                                                                                                                                                                                                                    |
| `}`                     |           |                             |                                                                                                                                                                                                                                                                                                   |
| `lightboxModeTablet`    | `object`  |                             | Object with lightbox mode parameters for **tablet device**.                                                                                                                                                                                                                                       |
| `{`                     |           |                             |                                                                                                                                                                                                                                                                                                   |
| `enable`                | `boolean` | `false`                     | Enable or disable lightbox mode.                                                                                                                                                                                                                                                                  |
| `text`                  | `string`  | `'open slider in LIGHTBOX'` | Content of lightbox text element.                                                                                                                                                                                                                                                                 |
| `fontColor`             | `string`  | `'#6c6c6c'`                 | Font color of the text element. (Example: `"#ffffff"`).                                                                                                                                                                                                                                           |
| `hoverColor`            | `string`  | `'#333333'`                 | Font color of the text element on mouse hover. (Example: `"#ffffff"`).                                                                                                                                                                                                                            |
| `fontFamily`            | `string`  | `'Arial'`                   | Font family of the text element.                                                                                                                                                                                                                                                                  |
| `fontSize`              | `number`  | `20`                        | Font size of the text element. Value is number and unit is px.                                                                                                                                                                                                                                    |
| `}`                     |           |                             |                                                                                                                                                                                                                                                                                                   |
| `width`                 | `number`  | `1000`                      | The base width of slider on **desktop** (in `px`).                                                                                                                                                                                                                                                |
| `widthMobile`           | `number`  | `1000`                      | The base width of slider on **mobile device** (in `px`).                                                                                                                                                                                                                                          |
| `widthTablet`           | `number`  | `1000`                      | The base width of slider on **tablet device** (in `px`).                                                                                                                                                                                                                                          |
| `height`                | `number`  | `550`                       | The base height of slider on **desktop** (in `px`).                                                                                                                                                                                                                                               |
| `heightMobile`          | `number`  | `550`                       | The base height of slider on **mobile device** (in `px`).                                                                                                                                                                                                                                         |
| `heightTablet`          | `number`  | `550`                       | The base height of slider on **tablet device** (in `px`).                                                                                                                                                                                                                                         |
| `tabletSize`            | `number`  | `1024`                      | Tablet width breakpoint where certain parts of the design will behave differently on tablet. (Value in `px`.)                                                                                                                                                                                     |
| `mobileSize`            | `number`  | `768`                       | Mobile width breakpoint where certain parts of the design will behave differently on mobile. (Value in `px`.)                                                                                                                                                                                     |