CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
Md. Khalakuzzaman Khan
Md. Khalakuzzaman Khan

Reputation: 194

Vue JS Hooper Image Carousel Issue (using in NuxtJS project)

Loading Issue

I install this (https://baianat.github.io/hooper/) Github project to make an image carousel.

Carousel works fine once I refresh the browser the second time. Carousel images do not show the very first time when the project on the browser. It just shows a loader animation image for the very first time. Carousel start works properly once I refresh the page.

Screenshots: https://prnt.sc/tc212d

Imported:

import {Hooper, Slide, Navigation as SliderNavigation} from 'hooper';

Codes In Vue file

  <hooper
    :transition="1000"
    :wheelControl="false"
    :infiniteScroll="true"
    :centerMode="true"
    :hoverPause="true"
    :autoPlay="true"
    :playSpeed="4000"
    :style="variable.HOME_PAGE_SLIDER_LOADED?'height: inherit':'height: 200px'">
    <slide v-for="slider,key in home.index.sliders" :key="key">
      <a :href="typeof slider.link != 'undefined' ? slider.link : ''">
        <img :src="asset(slider.full_size_directory)" height="100%" width="100%">
      </a>
    </slide>
    <SliderNavigation slot="hooper-addons"></SliderNavigation>
  </hooper>

Desktop: OS: [Ubuntu 19.02], Browser: [chrome, safari, firefox]

Smartphone Device: [Samsung], Browser: [chrome]

Upvotes: 2

Views: 1473

Answers (1)

asma dev
asma dev

Reputation: 13

I know it's 8 months later but maybe it could help someone here. so for my case it's an issue with the img url , since i use a dynamic url i solved it with require ;

:src="require(`~/assets/images/${img}`)".

you should check the error that could be in console. In case it's in production mode you should check the base url of the project.

Upvotes: 1

Related Questions