Issue with Custom Carousel

adebayoade

Good day, I am trying to create a custom slider using Vue Carousel which has already been implemented and registered global in velocity app.js file. I am able to call the global component following the carousel documentation website.

The issue is that the slider does not show up on the front-end unless I click on the page. I think this is Bagisto related.

How do I fix this? Thanks.

@push('scripts')
    <script type="text/x-template" id="top-stores-template">
        <div class="mb-4">
            <carousel>
                <slide>
                  Slide 1 Content
                </slide>
                <slide>
                  Slide 2 Content
                </slide>
              </carousel>
        </div>
    </script>

    <script type='text/javascript'>
        (() => {
            Vue.component('top-stores', {
                template: '#top-stores-template',
                props: ['direction'],
            })
        })()
    </script>
@endpush

https://ssense.github.io/vue-carousel/guide/

sanjay-webkul

Hi there,
Is it possible to share your instance ?