Recent Topics

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 -

    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


Log in to reply