Add Carousel component VueJS into Bagisto

[isaac9]

Hi, i need help for add another slider in bagisto, i want to add this slider vuejs https://vuejsexamples.com/carousel-component-for-vue-js/
How i should add this componen?

[prateek-webkul]

Hi isaac9 ,

In our latest release, we have a new velocity theme, you may refer from there as -

• You need to create your own Carousel component, may refer, Carousel component

• You have to register your Carousel component in app.js file as https://github.com/bagisto/bagisto/blob/master/packages/Webkul/Velocity/src/Resources/assets/js/app.js#L3

• Use the component in your blade file https://github.com/bagisto/bagisto/blob/master/packages/Webkul/Velocity/src/Resources/views/shop/home/slider.blade.php#L12

If still you have any query, then feel free to write to us...

Thanks

[jaipalyadav47 0]

I tried but I am facing following issue

velocity-core.js:1 RangeError: Invalid array length
at a.ge [as _l] (velocity-core.js:1)
at a.render (velocity.js:1)
at a.t._render (velocity-core.js:1)
at a.hn.before (velocity-core.js:1)
at hn.get (velocity-core.js:1)
at new hn (velocity-core.js:1)
at velocity-core.js:1
at a.$n.$mount (velocity-core.js:1)
at a.$n.$mount (velocity-core.js:1)
at init (velocity-core.js:1)

My component

<template>
<carousel
:rtl="localeDirection == 'rtl'"
:dir="localeDirection"
:id="id"
:navigationEnabled="true"
:paginationEnabled="true"
:perPage="parseInt(slidesPerPage)"
:loop="loop == 'true' ? true : false"
:autoplay="autoplay == 'true' ? true : false"
:autoplayTimeout="timeout ? parseInt(timeout) : 2000"
:autoplayDirection="'forward'"
:class="[
localeDirection,
(navigationEnabled == 'hide') ? 'navigation-hide' : '',
(paginationEnabled == 'hide') ? 'pagination-hide' : '',
addClass
]">

    <slot
        v-for="index in parseInt(slidesCount)"
        :name="`slide-${parseInt(index) - 1}`">
    </slot>
</carousel>

</template>

<script type="text/javascript">
export default {
props: [
'id',
'loop',
'timeout',
'autoplay',
'addClass',
'direction',
'slidesCount',
'slidesPerPage',
'localeDirection',
'navigationEnabled',
'paginationEnabled',
],

    data: function () {
        return {}
    },

    methods: {
        slideClicked: function () {
            debugger
        }
    }
}

</script>

My blade file code

<?php
$features=app('MiimModule\SafetyAndSecurity\Models\SafetyAndSecurity')::all();
$banners=[];
foreach($features as $feature)
{
// $banners[]=;
$banners[]=asset('storage/safetyandsecurityimages/'.$feature->icon_url);

}
// echo '<pre>';print_r($banners);echo '</pre>';die();
?>

<carousel-component
direction="{{ core()->getCurrentLocale()->direction }}"
default-banner="{{ asset('/themes/velocity/assets/images/banner.webp') }}"
banners="{{ json_encode($banners) }}"
perPage="{{ count($banners) }}"
>

@if(! empty($banners))
    <img class="col-12 no-padding banner-icon" src="{{ $banners[0] }}" alt=""/>
@else
    <img class="col-12 no-padding banner-icon" src="{{ asset('/themes/velocity/assets/images/banner.webp') }}" alt=""/>
@endif

</carousel-component>

Please check my code and let me know my issue.

Thanks