将 jquery slick carousel 迁移到 vue-slick-carousel

Question

我有一个使用 slick-carousel 和 jquery 实现的轮播的页面，但我在 vue 中构建此页面。将此轮播从 jquery 迁移到 vue 时，其他一切都有效，但图像本身没有显示。我已经破解了大约三个小时，但没有运气。

这是轮播的代码：

jquery：

<div class=" petmark-slick-slider  home-slider" data-slick-setting='{
                                                "autoplay": true,
                                                "autoplaySpeed": 8000,
                                                "slidesToShow": 1,
                                                "dots": true
                                        }'>
                            <div class="single-slider home-content bg-image" data-bg="image/slider-2.jpg">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-lg-10">

                                            <h2> <span class="text-primary">61+ </span> Blood test<br> package</h2>

                                            <h4 class="mt--30">package just Rs 399</h4>

                                            <div class="slider-btn mt--30">
                                                <a href="shop.html" class="btn btn-outlined--white btn-rounded">Book Now</a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <span class="herobanner-progress"></span>
                            </div>
                            <div class="single-slider home-content bg-image" data-bg="image/slider-1.jpg">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-lg-10">

                                            <h2> <span class="text-primary">Flat </span> 20% <br> off</h2>

                                            <h4 class="mt--30">on all online bookings</h4>

                                            <div class="slider-btn mt--30">
                                                <a href="shop.html" class="btn btn-outlined--white btn-rounded">Book Now</a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <span class="herobanner-progress"></span>
                            </div>
                        </div>

Vue：

在模板中

<VueSlickCarousel class="petmark-slick-slider home-slider" :dots="true" :autoplay="true" :autoplaySpeed="8000" :slidesToShow="1">
                            <div class="single-slider home-content bg-image" data-bg="image/slider-2.jpg">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-lg-10">

                                            <h2> <span class="text-primary">61+ </span> Blood test<br> package</h2>

                                            <h4 class="mt--30">package just Rs 399</h4>

                                            <div class="slider-btn mt--30">
                                                <a href="shop.html" class="btn btn-outlined--white btn-rounded">Book Now</a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <span class="herobanner-progress"></span>
                            </div>
                            <div class="single-slider home-content bg-image" data-bg="image/slider-1.jpg">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-lg-10">

                                            <h2> <span class="text-primary">Flat </span> 20% <br> off</h2>

                                            <h4 class="mt--30">on all online bookings</h4>

                                            <div class="slider-btn mt--30">
                                                <a href="shop.html" class="btn btn-outlined--white btn-rounded">Book Now</a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <span class="herobanner-progress"></span>
                            </div>
                        </VueSlickCarousel>

在脚本中

import VueSlickCarousel from 'vue-slick-carousel'

    export default {
        name: 'Home',
        components: { VueSlickCarousel }
    }

知道我做错了什么吗？

Answer 1

我发现另一个问题解决了这个问题。基本上只要改代码如下：

<VueSlickCarousel class="petmark-slick-slider home-slider" :dots="true" :autoplay="true" :autoplaySpeed="8000" :slidesToShow="1">
                            <div class="single-slider home-content bg-image" v-bind:style="{'backgroundImage': 'url(\'image/slider-2.jpg\')'}">
...
...