自定义控制 #

<script>
import vueScrollComponents from "vue-scroll-components";
import { ref } from 'vue'
const options = ref({
    direction: 'left', // 滚动方向
    navStep: 60, //  navigation 滚动步长
    navEase: 'linear', // navigation 滚动动画
    navDelay: 400, // navigation 滚动动画时长
})
</script>

<template>
    <vueScrollComponents :options="options" type="navigation" class="wrap">
        <template #prev="{ prevClick, prevState }">
            <div class="nav" :style="{ cursor: prevState ? 'pointer' : 'not-allowed' }" @click="prevClick">左</div>
        </template>
        <template #next="{ nextClick, nextState }">
            <div class="nav" :style="{ cursor: nextState ? 'pointer' : 'not-allowed' }" @click="nextClick">右</div>
        </template>
        <ul class="item-box">
            <li v-for="index in 8" :key="index" class="item">
                {{ index }}
            </li>
        </ul>
    </vueScrollComponents>
</template>

<style scoped lang="scss">
.wrap {
    width: 600px;
    height: 100px;
    margin: 0 auto;
    overflow: hidden;

    .nav {
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ccc;
        cursor: pointer;
    }

    ul {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;

        li {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            background-color: #ccc;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
        }
    }

}
</style>