albancrepel / vue-displacement-slideshow Goto Github PK

Hi,

Thanks for this great work.
I'd like to know if you plan to integrate such features:

• pause
• play
• insertSlide(imageURL, index)
• removeSlide(index)
• init()

Thank you,

G

Since last update (0.1.5), images are not resized anymore.

Current Fix

Call this.render() after each resize.

Hi,
I think, create a site with vuepress can be realy helpfull (in particular for the search function).
Most of vue libs have one 😉

I have installed the plugin via NPM. I have registered the plugin in the plugins directory as follows:

vue-displacement-slideshow.client.js

import Vue from 'vue';
import VueDisplacementSlideshow from "vue-displacement-slideshow";
console.log(VueDisplacementSlideshow); // this seems to return the component as expected but i just can't use the component anywhere on my site
Vue.use(VueDisplacementSlideshow);

I have also imported into nuxt like so:

nuxt.config.js

plugins: [
    '~/plugins/vue-displacement-slideshow.client.js',
  ],

I received the unknown custom component error when I tried to use <vue-displacement-slideshow/>

After failing, I then tried instead, to copy over the component manually, (while keeping the dependency in package.json so to keep the plugins third party dependencies installed as required (such as three.js). However, this failed as I am now getting the following errors:

 Unexpected token '!'

and on the back end:

These dependencies were not found:                                                                                                                                          friendly-errors 18:41:28
                                                                                                                                                                            friendly-errors 18:41:28
* three/src/cameras/OrthographicCamera.js in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/VueDisplacementSlideshow.vue?vue&type=script&lang=js&
* three/src/constants.js in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/VueDisplacementSlideshow.vue?vue&type=script&lang=js&
* three/src/geometries/PlaneGeometry.js in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/VueDisplacementSlideshow.vue?vue&type=script&lang=js&
* three/src/loaders/TextureLoader.js in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/VueDisplacementSlideshow.vue?vue&type=script&lang=js&
* three/src/materials/ShaderMaterial.js in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/VueDisplacementSlideshow.vue?vue&type=script&lang=js&
* three/src/math/Vector2.js in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/VueDisplacementSlideshow.vue?vue&type=script&lang=js&
* three/src/objects/Mesh.js in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/VueDisplacementSlideshow.vue?vue&type=script&lang=js&
* three/src/renderers/WebGLRenderer.js in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/VueDisplacementSlideshow.vue?vue&type=script&lang=js&
* three/src/scenes/Scene.js in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/VueDisplacementSlideshow.vue?vue&type=script&lang=js&
* three/src/textures/Texture.js in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/VueDisplacementSlideshow.vue?vue&type=script&lang=js&

I have "vue-displacement-slideshow": "^3.0.1" in my package.json

Any ideas what I am doing wrong here?

We tried for hours to remove the black background of the canvas as we are using PNG images for the transitions. Any hint? we really tried every possible setting of transparency but with no luck

It would be great to extend the functionality:

• method of transition to a particular slide , something like goTo(index)

• the option of automatic slide change time(for convenience)

No an issue because It doesn't seems to be broken but.

Shouldn't it be this.slider size instead of window ?

It seems that Width:100% and height:100% would fix it but it doesn't. on mobile, my images are looking good. but on Desktop they get cut on edges. top and left mostly.

Please help me fix it. Check out the problem on section 5 www.dinashkenazi.com

there is just a demo.gif file for instance. This component doesn't read and render my image files(jpeg) what should i do?

I would like to apply the super cool effects to a div that contains multiple images / html content.. rather than on individual images. Would this be possible without too much hacking?

it will be awesome that releasing the package for vue3

Hey, first of all, I'd like to thank you for this awesome plugin!

I am trying to add text description for each image in the slideshow. Is there any way to access current image index, so I could use it so as to display appropriate text? 🔥

Image will not switch immediately when next or previous continuously called

I couldn't get it to load at all and then I figured out the component and its canvas both had a height of 0

One way to change it was to add this:

<style>
.vue-displacement-slideshow,
.vue-displacement-slideshow canvas {
    width: 100vw !important;
    height: 100vh !important;
}
</style>

Or I needed to give a real height (ie, not 100%) to the parent container

Hi,
can I start with the second image?

thank you.

Uncaught ReferenceError: require is not defined
at Proxy.images (App.vue:21:17)
at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
at get value [as value] (reactivity.esm-bundler.js:1171:39)
at Object.get [as images] (runtime-core.esm-bundler.js:3488:30)
at Proxy._sfc_render (App.vue:3:22)
at renderComponentRoot (runtime-core.esm-bundler.js:914:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5649:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
at instance.update (runtime-core.esm-bundler.js:5763:56)
at setupRenderEffect (runtime-core.esm-bundler.js:5777:9)

Would be great to add SSR support so it works with nuxt.js too