根据 swiper5.4.5 进行封装，处于实验状态，还未转正

基本使用

slider 1

slider 2

slider 3

<template>
    <yb-swiper :slideItems="slideItems" class="base-use">
        <template v-slot="item">
            <div :style="item.style">{{item.text}}</div>
        </template>
    </yb-swiper>
</template>
<script>
    export default {
        data() {
            return {
                slideItems: [
                    {
                        text: 'slider 1',
                        style: { background: '#4390ee' },
                    },
                    {
                        text: 'slider 2',
                        style: { background: '#ca4040' },
                    },
                    {
                        text: 'slider 3',
                        style: { background: '#ff8604' },
                    },
                ],
            };
        },
    };
</script>
<style>
    .base-use .swiper-slide > div {
        height: 300px;
        color: white;
        text-align: center;
        font-size: 50px;
        line-height: 300px;
    }
</style>

显示 复制 复制

自动计算展示个数

new 属性

navOutside

itemWidth

itemMargin

swiperConfig 属性

autoplay

slider 1

slider 2

slider 3

slider 4

slider 5

slider 6

slider 7

slider 8

slider 9

<template>
    <el-row>
        <el-col :span="6">
            <el-divider content-position="left">
                <el-tag type="danger">new</el-tag>
                属性
            </el-divider>
            <div style="margin-bottom:20px">
                navOutside
                <el-switch v-model="navOutside"></el-switch>
            </div>
            <div style="margin-bottom:10px">
                itemWidth
                <el-slider
                    style="width:180px;vertical-align: middle;"
                    v-model="slideLayout['itemWidth']"
                    :min="100"
                    :max="500"
                />
            </div>
            <div>
                itemMargin
                <el-slider
                    style="width:180px;vertical-align: middle;"
                    v-model="slideLayout['itemMargin']"
                    :min="0"
                    :max="30"
                />
            </div>
            <el-divider content-position="left"> swiperConfig 属性 </el-divider>
            <div style="margin-bottom:20px">
                autoplay
                <el-switch v-model="swiperConfig['autoplay']"></el-switch>
            </div>
        </el-col>
        <el-col :span="18">
            <yb-swiper
                :slideItems="slideItems"
                :navOutside="navOutside"
                autoSize
                :slideLayout="slideLayout"
                class="computed"
                :swiperConfig="swiperConfig"
            >
                <template v-slot="item">
                    <div :style="item.style">{{item.text}}</div>
                </template>
            </yb-swiper>
        </el-col>
    </el-row>
</template>
<script>
    export default {
        data() {
            return {
                navOutside: false,
                slideLayout: {
                    itemWidth: 300,
                    itemMargin: 0,
                },
                swiperConfig: {
                    autoplay: false,
                },
                slideItems: [
                    {
                        text: 'slider 1',
                        style: { background: '#4390ee' },
                    },
                    {
                        text: 'slider 2',
                        style: { background: '#ca4040' },
                    },
                    {
                        text: 'slider 3',
                        style: { background: '#ff8604' },
                    },
                    {
                        text: 'slider 4',
                        style: { background: '#4390ee' },
                    },
                    {
                        text: 'slider 5',
                        style: { background: '#ca4040' },
                    },
                    {
                        text: 'slider 6',
                        style: { background: '#ff8604' },
                    },
                    {
                        text: 'slider 7',
                        style: { background: '#4390ee' },
                    },
                    {
                        text: 'slider 8',
                        style: { background: '#ca4040' },
                    },
                    {
                        text: 'slider 9',
                        style: { background: '#ff8604' },
                    },
                ],
            };
        },
    };
</script>
<style>
    .computed .swiper-slide > div {
        height: 300px;
        color: white;
        text-align: center;
        font-size: 50px;
        line-height: 300px;
        margin: 0 auto;
        /* width: 300px; */
    }
</style>

显示 复制 复制

YbSwiper Attributes

参数	说明	类型	可选值	默认值
slideItems	显示数据	array	--	--
navOutside	前进后退按钮是否显示在 slide 外边	boolean	--	true
autoSize	是否自动计算排列	boolean	--	false
slideLayout	用于计算一页展示的 slider 数量，当 autoSize 为 true 时生效，详见SlideLayout Attributes	object	--	{}
swiperConfig	Swiper 其他配置，详见Swiper 个性化配置 (opens new window)	object	--	{}

YbSwiper SlideLayout Attributes

参数	说明	类型	可选值	默认值
navWidth	前进后退按钮所在宽度，当 navOutside 为 true 时生效	number	--	200
itemBoxShadow	slider 的阴影宽度	number	--	0
itemMargin	slider 间的最小间距	number	--	0
itemWidth	slider 的最小宽度	number	--	0

YbSwiper Scoped Slots

参数	说明
-	当前配置的 slider 数据

YbSwiper Methods

参数	说明
getYbSwiper	返回 Swiper 实例，用于调用 Swiper 方法

// 例如
this.$refs['swiper'].getYbSwiper().enable();