Add Carousel component VueJS into Bagisto
-
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? -
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
-
-
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