Laravel 9 + Vue 3中vue-slick-carousel无法正常轮播求助

问题现状 #

在Laravel 9项目的Vue 3组件中集成vue-slick-carousel后，轮播元素仅垂直堆叠显示，完全没有轮播切换效果。

问题根源及修复方案 #

• 未导入Vue 3响应式API：代码中使用ref但未从Vue导入，导致数据无法被正确响应式处理，轮播组件无法识别数据变化。
• 错误引入无关依赖：返回的modules:[Pagination, Autoplay]是Swiper组件的依赖，与vue-slick-carousel无关，会干扰组件初始化。
• 错误设置loading属性：手动将:loading="true"设为true，会让组件一直处于加载状态，不会初始化轮播逻辑。
• 轮播配置优化：当前仅2个轮播项，设置slidesToShow="2"会直接显示全部，看不出轮播效果，建议测试时增加轮播项或调整为slidesToShow="1"。

修复后的完整代码 #

文件路径：project_folder\resources\js\components\partials\Contact\client.vue

脚本部分

import { ref } from 'vue' // 必须导入ref以实现响应式
import Slick from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

export default{
    name: "Contact_components2",
    components: { Slick },
    setup(){
        const swiperTextBase = ref([
            {
                author : 'Steve Taylor,',
                description : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quiafugit consequatur laudantium velit magnam error. Consectetur distinctio fugit doloremque.',
                img : 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp',
                details : 'CTO, Eagle Investment Systems'
            },
            {
                author : 'Steve Taylor,',
                description : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quiafugit consequatur laudantium velit magnam error. Consectetur distinctio fugit doloremque.',
                img : 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp',
                details : 'CTO, Eagle Investment Systems'
            },
            // 新增轮播项，便于测试轮播效果
            {
                author : 'Jane Doe,',
                description : 'Another test description for carousel functionality.',
                img : 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(11).webp',
                details : 'CEO, Tech Innovations Inc.'
            }
        ]);
        // 移除无关的swiper模块返回值
        return{
            swiperTextBase
        }
    },
}

模板部分

<template>
    <div class="row">
        <div class="col-md-10">
            <slick 
                :arrows="true" 
                :dots="true"
                :autoplay="true"
                :focusOnSelect="true"
                :speed="500"
                :slidesToShow="1" <!-- 调整为单张可见，测试轮播效果 -->
                :slidesToScroll="1"
                :errored="false"
                <!-- 移除手动设置的loading属性，由组件内部自动控制加载状态 -->
            >
                <div v-for="text in swiperTextBase" :key="text.description">
                    <div>
                        <p class="fw-bold text-start mb-5">
                            <i class="bi bi-quote"></i><br>
                            {{text.description}}
                        </p>
                    </div>
                    <div class="d-flex">                
                        <div>
                            <img class="rounded-circle shadow-1-strong mb-4" :src="text.img" alt="avatar" style="width: 100px;" />
                        </div>
                        <div class="p-3 text-start">
                            <h5 class="mb-3">{{text.author}}</h5>
                            <p>{{text.details}}</p>
                        </div>
                    </div>
                    <div class="text-end">
                        <a href="#" class="text-decoration-none">
                            Learn More
                            <i class="bi bi-arrow-right-circle-fill"></i>
                        </a>
                    </div> 
                </div>
            </slick>
        </div>
    </div>
</template>

内容的提问来源于stack exchange，提问作者ABHISHEK KUMAR