Carousel

Basic usage

<mu-carousel :options="options">
    <mu-slide v-for="(slide, index) in slides" :key="index">
        <div :style="slideWrapperStyles">
            <p>{{slide.title}}</p>
        </div>
    </mu-slide>

    <div class="mu-button-prev" slot="button-prev">
        <font-awesome-icon :icon="['far', 'angle-left']" class="icon">
    </font-awesome-icon></div>

    <div class="mu-button-next" slot="button-next">
        <font-awesome-icon :icon="['far', 'angle-right']" class="icon" />
    </div>

    <div class="mu-pagination" slot="pagination"></div>
</mu-carousel>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default {
    components: {
        'font-awesome-icon': FontAwesomeIcon,
    },
    data(){
        return {
            slides: [
                { title: 'First'},
                { title: 'Second'},
                { title: 'Third'},
                { title: 'Four'},
            ],
            options: {
                loop: true,
                pagination: {
                    el: '.mu-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.mu-button-next',
                    prevEl: '.mu-button-prev',
                },
            },
            slideWrapperStyles: {
                display: 'flex',
                minHeight: '284px',
                backgroundSize: 'cover',
                justifyContent: 'center',
                alignItems: 'center',
                backgroundImage: `url(${bg})`,
                color: '#fff',
                fontSize: '20px',
            },
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

Autoplay

<mu-carousel :options="options">
    <mu-slide v-for="(slide, index) in slides" :key="index">
        <div :style="slideWrapperStyles">
            <p>{{slide.title}}</p>
        </div>
    </mu-slide>

    <div class="mu-button-prev" slot="button-prev">
        <font-awesome-icon :icon="['far', 'angle-left']" class="icon" />
    </div>

    <div class="mu-button-next" slot="button-next">
        <font-awesome-icon :icon="['far', 'angle-right']" class="icon" />
    </div>

    <div class="mu-pagination" slot="pagination"></div>
</mu-carousel>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default {
    components: {
        'font-awesome-icon': FontAwesomeIcon,
    },
    data(){
        return {
            slides: [
                { title: 'First'},
                { title: 'Second'},
                { title: 'Third'},
                { title: 'Four'},
            ],
            options: {
                autoplay: {
                    delay: 2000,
                },
                loop: true,
                pagination: {
                    el: '.mu-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.mu-button-next',
                    prevEl: '.mu-button-prev',
                },
            },
            slideWrapperStyles: {
                display: 'flex',
                minHeight: '284px',
                backgroundSize: 'cover',
                justifyContent: 'center',
                alignItems: 'center',
                backgroundImage: `url(${bg})`,
                color: '#fff',
                fontSize: '20px',
            },
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

Attributes

Attribute Description Type Accepted Values Default
options Swiper options Object {}
standart Disable or enable swiper default style Boolean true/false true
paginationPos Position of pagination String true/false 'out-bottom'
customClass Set custom class if needed String ''