search

baianat / hooper

🎠 A customizable accessible carousel slider optimized for Vue
https://baianat.github.io/hooper/
MIT License
720 stars 131 forks source link

Hooper images not show when bind with vue #93

Closed Olti-B closed 5 years ago

Olti-B commented 5 years ago

Hooper images not show when bind with vue I am using hooper with vue like in this example 

   <hooper :key="hopper_key" :progress="true" :infiniteScroll="true">
        <slide>
          <img :src="detail_data.poi_simg_src" alt>
        </slide>
        <hooper-progress slot="hooper-addons"></hooper-progress>
      </hooper>

And when i run it shows shows nothing The hooper html produced is hooper_html

Environment tested Chrome v.75

ismail9k commented 5 years ago

Can you provide us with a working example, so we can debug your issue?

Olti-B commented 5 years ago

Hej @Abdelrahman3D i created a sand box https://codesandbox.io/s/vue-template-kvrlp?fontsize=14

ismail9k commented 5 years ago

Thanks, @Olti-B, at first glance I noticed that you forgot to include Hooper's stylesheet. A quick fix for this is to import the CSS file at the first of your file import 'hooper/dist/hooper.css';. This seemed to be a common issue, form our side we will emphasize it more in the docs, or maybe include the styles with the JavaScript file.