# Swiper

Most modern mobile touch slider with hardware accelerated transitions.

Official Documentation

## Usage

### CSS

In order to use this plugin on your page you will need to include the following styles in the Page CSS area from the page’s head section:

    <link rel="stylesheet" href="../../assets/libs/swiper/dist/css/swiper.min.css">

### JS

In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:

    <script src="../../assets/libs/swiper/dist/js/swiper.min.js"></script>

### Initialization

Now, we need to add basic Swiper layout to our app:

Show code

    <div class="swiper-js-container">
        <div class="swiper-container" data-swiper-items="1" data-swiper-space-between="20" data-swiper-sm-items="2" data-swiper-sm-space-between="20" data-swiper-xl-items="3" data-swiper-xl-space-between="20">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-2-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-3-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-4-1000x1000.jpg" class="img-fluid rounded">

                </div>
            </div>
        </div>
    </div>

### Options

Here is a list with the `data-swiper-*` attributes you can use in order to configure the swiper element without the need to modify any JavaScript file. Simply add the `data-swiper-PARAMETER_NAME` attribute on the `.swiper-container` div, where `PARAMETER_NAME` is one of the options listed in the table below (e.g `data-swiper-items="3"`).

Parameter | Type | Default | Description
--- | --- | --- | ---
`direction` | `string` | `horizontal` | Could be ‘horizontal’ or ‘vertical’ (for vertical slider).
`items` | `number` or `"auto"` | `1` | Number of slides per view (slides visible at the same time on slider’s container). You can set different values for each existing breakpoint by adding: `sm`, `md`, `lg` and `xl` before the `items` parameter (e.g: `data-swiper-sm-items="2"`).
`space-between` | `number` | `0` | Distance between slides in px. You can set different values for each existing breakpoint by adding: `sm`, `md`, `lg` and `xl` before the `items` parameter (e.g: `data-swiper-sm-space-between="20"`).
`initial-slide` | `number` | `0` | Index number of initial slide.).
`centered-slides` | `boolean` | `false` | If true, then active slide will be centered, not always on the left side.
`autoplay` | `boolean` | `false` | Object with autoplay parameters or boolean true to enable with default settings.
`autoheight` | `boolean` | `false` | Set to true and slider wrapper will adopt its height to the height of the currently active slide.
`effect` | `string` | `slide` | Tranisition effect. Could be “slide”, “fade”, “cube”, “coverflow” or “flip”.
`paginationtype` | `string` | `bullets` | String with type of pagination. Can be “bullets”, “fraction”, “progressbar” or “custom”.

## Examples

By default, Quick comes with a few pre-defined Swiper styles and can be easily configured through some `data-*` attributes that will allow you to customize the items per slide, effect type, spacing and more.

### Pagination

Show code

    <div class="swiper-js-container">
        <div class="swiper-container" data-swiper-items="1" data-swiper-sm-items="2" data-swiper-xl-items="3" data-swiper-space-between="20" data-swiper-sm-space-between="20"  data-swiper-xl-space-between="20">
            <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x1000.jpg" class="img-fluid rounded">

            </div>
            <div class="swiper-slide">
                <img alt="Image placeholder" src="../../assets/img/theme/light/img-2-1000x1000.jpg" class="img-fluid rounded">

            </div>
            <div class="swiper-slide">
                <img alt="Image placeholder" src="../../assets/img/theme/light/img-3-1000x1000.jpg" class="img-fluid rounded">

            </div>
            <div class="swiper-slide">
                <img alt="Image placeholder" src="../../assets/img/theme/light/img-4-1000x1000.jpg" class="img-fluid rounded">

            </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

### Progress bar

Show code

    <div class="swiper-js-container">
        <div class="swiper-container" data-swiper-items="1" data-swiper-sm-items="2" data-swiper-xl-items="3" data-swiper-space-between="20" data-swiper-sm-space-between="20"  data-swiper-xl-space-between="20" data-swiper-pagination-type="progressbar">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-2-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-3-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-4-1000x1000.jpg" class="img-fluid rounded">

                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>

### Centered slides

Show code

    <div class="swiper-js-container">
        <div class="swiper-container" data-swiper-items="1" data-swiper-sm-items="2" data-swiper-xl-items="3" data-swiper-space-between="20" data-swiper-sm-space-between="20"  data-swiper-xl-space-between="20" data-swiper-centered-slides="true">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-2-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-3-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-4-1000x1000.jpg" class="img-fluid rounded">

                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

### Fade

Show code

    <div class="swiper-js-container">
        <div class="swiper-container" data-swiper-effect="fade">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-2-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-3-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-4-1000x1000.jpg" class="img-fluid rounded">

                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

### Coverflow

Show code

    <div class="swiper-js-container">
        <div class="swiper-container" data-swiper-items="1" data-swiper-sm-items="2" data-swiper-xl-items="3" data-swiper-space-between="20" data-swiper-sm-space-between="20"  data-swiper-xl-space-between="20" data-swiper-initial-slide="2" data-swiper-effect="coverflow">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-1-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-2-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-3-1000x1000.jpg" class="img-fluid rounded">

                </div>
                <div class="swiper-slide">
                    <img alt="Image placeholder" src="../../assets/img/theme/light/img-4-1000x1000.jpg" class="img-fluid rounded">

                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>