Миграция jquery гладкой карусели в vue гладкую карусель

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\')'}">
...
...