ragnarlotus / vue-flux Goto Github PK

Hey,
I am having a problem, where vue-flux gets stuck at loading with 0% when there is only single image passed to the component.
There aren't any errors in console. Request for image is not being sent either.
Is there something wrong with what I am doing ?

Here are snippets of my code:
template:
<vue-flux v-if="images.length > 0" :options="fluxOptions" :images="images" :transitions="fluxTransitions" ref="slider"> <flux-controls slot="controls"></flux-controls> <flux-pagination slot="pagination"></flux-pagination> </vue-flux> <div v-else> <img src="../../assets/no_image_available.svg"/> </div>
script:
components: { VueFlux, FluxControls, FluxPagination }, data () { return { fluxOptions: { autoplay: true, enableGestures: true }, fluxTransitions: { transitionBook: Transitions.transitionSwipe } } }
And I am passing into component this array:
["http://localhost:5000/api/advertisements/23/photos/1"]

I have some image have height is greater than width but I need show full image in slide then can do it with css property background-size: contain, but I don't see any option in vue-flux for that.

Is possible to show full image height is greater than width and custom color of background behind the image?

Example:

Or something like this is cool:

When you first load page with width for example 1000px and then resize width of page to for example 1900px parallax stay 1000px width and doesn't fit 100% width of page.

Of course the easiest way is to overwrite CSS and give it width: 100% !important but I think you should fix it so we don't need to do so.

Is it possible to set enableGestures to true but without control so user would be able to scroll page down?

It would be nice to add alt of each image and its title.

error https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.6.tgz: Extracting tar content of undefined failed, the file appears to be corrupt: "Unexpected end of data"

I'm not sure if this is a bug or a feature, but the controls / index do not disappear on fullscreen. Most probably this is because the pointer is always on top of the control. Is there any way to fix this? Would be nice if the controls disappear after some time and only come back when there is some movement.

Hi,

if want use with nuxt, have to integration?

Hi , I want to rotate the video and picture how can I do it ?
Is the video plug-in easy ?

Thank you. But is there any reason to use z-index? Many people will face problem due to z-index issue like navigation bar popup will be hidden due to slider and z-index don't work on so many thing so it may be hard to make navigation bar appear front of text.

Thanks

As title says I'm not able to scroll page with finger when touching on slider.

I am having these options: autoplay - which is working fine, and infinite which seems to remain always 'true'.

fluxOptions: { autoplay: false, infinite: false }

Hello,

I want to have textcaptions per image . Is it possible to get an example ( more specific ) how that has to be done.

with regards

Frank Pet

i can use style='height:600px' but it remove mobile responsive too less. It don't obey the the wrapping container height (For large width it don't obey).

How can i make it good on large screen display.

It don't obey max-height also :(

Hello so when my SPA starts I hide it for 2 seconds to show big logo gif. After 2 seconds my slider is like 100px width althought it suppose to be 100% width..

Code of my App.vue (root component) is:

<template>
    <div>
        <img src="../static/logo-gif.gif" alt="Active Yacht Club" class="logo">
        <div v-show="timeGap">
            <navbar></navbar>
            <transition name="zoom" mode="out-in">
                <router-view />
            </transition>
            <foot></foot>
        </div>
    </div>
</template>

and then in created hook im setting timeout:

   created() {
        setTimeout(() => {
            this.timeGap = true;
        },2000)
    }

and I don't know why but my slider is only 100px width.. :(

When I use v-if directive instead of v-show in my root component then everything is fine but I don't really want to use v-if there as I don't want page to load only after those 2 seconds. It can be loading in background for this 2 seconds when I'm displaying logo as well.

Hi,

very good vue component that saved me a lot of time but now i have some little problems.

I update the delay or transition of the fluxOptions Object or the fluxTransitions Object but the changes would not be recognized by the vue-flux component.

For example i add a button that changes the delay from 5000 to 10000 but the delay didnt changed.

Regards, NMonst4

What do you think about idea to load first image of slider, hide loader gif and then load rest images in "background"? It could save some time to show first screen to user which is good user experience.

Hello I have captions option enabled on vue-flux component and I want to bind h3 tag into caption I tried like so

    <vue-flux
        :options="fluxOptions"
        :images="fluxImages"
        :transitions="fluxTransitions"
        :captions="fluxCaptions"
        ref="slider">
    </vue-flux>

export default {
    components: {
        'vue-flux': VueFlux,
        'vue-index': FluxIndex,
        'flux-image': FluxImage
    },
    data: () => ({
        fluxOptions: {
            autoplay: true,
            delay: 7000,
        },
        fluxImages: [
            'static/1.jpg',
            'static/2.jpg',
            'static/3.jpeg'
        ],
        fluxTransitions: {
            transitionBars2d: Transitions.transitionBars2d,
            transitionBlocks2d1: Transitions.transitionBlocks2d1,
            transitionSlide2d: Transitions.transitionSlide2d
        },
        fluxCaptions: ['<h3>aa</h3>', 'bb', 'cc']
    })
}

but it actually print only string into caption. How to bind html there?

Hi,

I need to know how to refer the images from Assets or Static folder, as this needs require function to be called in v-model and there is no provision to do so.

Thanks & Regards,

kmshelke

When I try importing css as per the doc it threw me an error that it is not found and the file is physically not present anywhere in the package as well, am I missing something?

Hi there.

I would like to know if is it possible with this project to compile it for using as single file component "web component", so that by myself define the instance of the component with html markup and Vue data object?

Thanks in advance for your work.

Is there a way to enable mobile gestures? I can think of swipe to load the next / previous image and of pan/zoom to show the index ... The documentation states there are mobile friendly gestures but I am not able to find more documentation about this specific topic.

Hi, Your plugin looks really attractive.
is It possible to use it with Nuxt?

Hi, i'm have a nuxtjs project and i want to using slider in my project. But when i follow guide, i got a problem that Vue is not defined at \node_modules\vue-flux\dist\vue-flux.min.js. Somebody had using with nuxtjs can help me? Thanks
In my nuxt.config.js
build: { vendor: ['axios','vue-flux'] }
And in my index.vue page

  <section class="wrapper">
      <vue-flux
        :options="fluxOptions"
        :images="fluxImages"
        :transitions="fluxTransitions"
        ref="slider">
      </vue-flux>   
  </section>
</template>
<script>
import { VueFlux, Transitions } from "vue-flux";
export default {
  components: {
       VueFlux
  },
  data: () => ({
    fluxOptions: {
      autoplay: true
    },
    fluxImages: ["https://cdn-images-1.medium.com/max/1200/1*PF8Lt-1vgHeLkDstvxzhpA.jpeg",],
    fluxTransitions: {
      transitionTurn3d: Transitions.transitionTurn3d
    }
  }),
}```

FluxCaption, FluxControls, FluxIndex, FluxPagination are not working. Am i using it correctly?

component.txt.txt

Hello, I'm gathering new ideas for future releases, feel free to contribute to make this component better :)

• Add image filters

Sorry its me again 😢

My Image array changes from time to time dynamical without a reload is it possible ti implement a set image or update image array function?

If I refer to the documentation and demo, it look like this doesnt support mobile. I would like to know if im wrong.

Hello,

Not really an issue, but more an advice demand:

How to get in FluxParallax the 'fixed' component (third section) to work on mobile? Anyone solved this?

The website is run and freeze.

Well I have situation in which I have slider which fluxImages array is changing by passing props.

At first it has 3 images in array which are changing every 5 sec. After 15 sec I'm reassigning array of images to new array of 3 new images. Between array change it doesn't apply any animation but I need it to make it look cool. So is it possible? If not maybe it's good thing to add in new release?

This animation could be just fade or slide.

I'm currently using FluxParallax to create sections dividing up my site. I have a custom scroll element in which the Home.vue view is the main scrolling element. When I pass the element through to the holder prop. I don't seem to be getting any response to the component. The object successfully passes, but the event listeners do not get applied.

Note: I couldn't get my images to apply unless i used a require() from webpack and will create a separate issue if needed

<div class="home" ref="home">
    <Section>
        <h1>Section One</h1>
        <br v-for="i in 100" :key="i*101" />
    </Section>

    <flux-parallax :src="require('@/assets/SETUP.jpg')" height="300px" :holder="this.$refs.home" />

    <Section>
        <h1>Section Two</h1>
        <br v-for="i in 100" :key="i*101" />
    </Section>
</div>

Opening Chrome Dev Tools and the Vue Extension, Looking at the Props that are currently on the element and I get holder: HTMLDivElement. I'm not sure if that's what is suppose to be there. I know by default the Prop is set to window.

The Current Event Listeners after applying this.$refs.home are listed below:

Hey guys,

I feel kind of stupid if this is not an issue but I've been trying around for quite a while now and I don't get the example from the installtion guide to run and also the wiki couldnt help me.

Console will always throw

Error in data(): "TypeError: Cannot read property 'transitionBook' of undefined"

so I add a

console.log(Transitions);

and it returns undefined. That made me curious and VueFlux and FluxPagination also return undefined. Am I completely wrong here or is there a bug with the latest relase?

Versions:

vue-flux: 6.0.0-beta.0
vue: 3.7.0

the option 'bindKeys' doesn't change anything on my page. Also fullscreen option seem always be set to 'true' (double click on the image makes it to appear as fullscreen image)

It shows these errors on console.

vue-flux.umd.min.js?fcb2:1 Uncaught TypeError: Cannot read property 'style' of undefined
    at VueComponent.nextImage (vue-flux.umd.min.js?fcb2:1)
    at VueComponent.transitionEnd (vue-flux.umd.min.js?fcb2:1)
    at eval (vue-flux.umd.min.js?fcb2:1)

Please is there a way to use VueFlux with nuxtjs
I am getting nuxt error : window/document undefined?

Hi!
First off - great component!

I have an issue with the captions. I want to put links on them and have created a custom caption. I saw $refs.slider.currentCaption mentioned in another issue, but it doesn't seem to work anymore.

Can you point me in the right direction here?

Thanks

Hey,
is there any way to show an image without streching it to fill the field, but with containing it with respect to its aspect ratio ? Ie. I want an vertical photo to show in its entirety with empty bars on sides and not a pixelated part of it,

my main.js
`import Vue from 'vue'
import App from './App'
import router from './router'

window.Vue = require('vue')

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: ''
})`

error:
Uncaught ReferenceError: Vue is not defined

component:
`import { VueFlux, Transitions } from 'vue-flux'
// import './node_modules/vue-flux/dist/vue-flux.css';

export default {
components: {
'vue-flux': VueFlux
},

data: () => ({
fluxOptions: {
autoplay: true
},
fluxImages: [
'https://source.unsplash.com/random',
'https://source.unsplash.com/random',
'https://source.unsplash.com/random'
],
fluxTransitions: {
transitionTurn3d: Transitions.transitionTurn3d
}
})
}`

working in vue cli 3

Last thing I can think of to improve is to create option of showing thumbnails below the slider.

I'm creating estate agency page and on single offer page I would like to show slider (except that I'm using slider on first page as background of first view) with thumbnails so it would like similiar to this

This would be optional setting.

I use vue official router. So after navigation there are some footprints left causing some error like

TypeError: Cannot read property 'style' of undefined
  at nextImage(./node_modules/vue-flux/dist/vue-flux.umd.min.js:1:67016)
  at transitionEnd(./node_modules/vue-flux/dist/vue-flux.umd.min.js:1:70339)
  at apply(./node_modules/vue-flux/dist/vue-flux.umd.min.js:1:70291)
  at wrapped(./node_modules/raven-js/src/raven.js:376:1)

Is there anyway to clean up memory after navigation?

Sorry it's me again but I found an issue. I'm pushing into fluxImages array images after some custom event in created hook. When code is:

data () {
    return {
        building: {},
        offerSlider: {},
        fluxOptions: {
            autoplay: true,
            delay: 5000,
        },
        fluxImages:
            [
                "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZWBo1ZVmU7lYf3JNu7EIPJ4C2xf4rYX_KusfVVT_9onIlh8pp",
                "https://media.rightmove.co.uk/dir/crop/10:9-16:9/9k/8227/72822785/8227_PRA11884_IMG_00_0000_max_476x317.JPG"
            ]
        ,
        fluxTransitionsOffer: {
            transitionSlide: Transitions.transitionSlide
        }

    };
},
created() {
    eventBus.$on('loadedOffer', (data) => {
        this.building = data;
        this.fluxImages = data.imagesLink.split(',');
        console.log(this.fluxImages);
        this.$refs.offerSlider.preloadImages(this.fluxImages);
    })
}

I have in fluxImages some random images (i need minimum 2) from google and on created hook I'm replacing this array so in the end slider using my images and everything works fine. But when I change fluxImages array to empty array or to array with just one image like this:

data () {
    return {
        building: {},
        offerSlider: {},
        fluxOptions: {
            autoplay: true,
            delay: 5000,
        },
        fluxImages:
            []
        ,
        fluxTransitionsOffer: {
            transitionSlide: Transitions.transitionSlide
        }

    };
},
created() {
    eventBus.$on('loadedOffer', (data) => {
        this.building = data;
        this.fluxImages = data.imagesLink.split(',');
        console.log(this.fluxImages);
        this.$refs.offerSlider.preloadImages(this.fluxImages);
    })
}

then transition stop working it still change images but without any transition. And last thing which is a litle weird is that when I have this second code with empty array but I change fluxTransitionOffer to just Transitions then it works fine (with animations) but after some time like a few minutes it stop using animations and print errors into console.

[Vue warn]: Error in render: "RangeError: Invalid array length"
found in
---> at FluxGrid.vue
at waterfall.vue
at VueFlux.vue

RangeError: Invalid array length

Version 4.1.0. At the moment I'll just leave it with 2 random images from google and then replacing array but it's not really convenient.

For some reason VueFlux in Nuxt app stop working correctly when I add other component in index page In index.vue page (in pages directory) I have:

<template>
    <div>
        <other-component></other-component>
        <VF></VF>
    </div>
</template>

in <VF> component there is vueFlux component with #11 approach.
In <other-component> I have:

<template>
    <article class="bg-video">
        <app-logo></app-logo>
        <div>
            <p>Above app-logo is global component registered in global.js plugin</p>
        </div>
    </article>
</template>

And the error is:

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

When I delete global component <app-logo> from <other-component> then VueFlux start working again so maybe it has something relevant to global components? I've created depo repository so you can see issue for your own.

I dig some more and noticed that it's not the component creating error but the transitions in default.vue layout. Currently I don't know why yet.

Even if I remove those transitions from default layout then after a while of vue flux playing it print error

RangeError: Invalid array length

On some devices (chromium on raspberry with touch screen, iPhone 7 with safari and chrome and the gestures disabled) I can open up the gallery and the items get marked when hovering over, but I can click on it like madman and nothing happens (even the gallery stays open).

It seems to me that it has something todo with "normal" behaviour on touch devices without gestures enabled. On my raspberry the touch screen isn't detected as a touch device. On any npn-touch device it works like a charm...

Any idea?

So basically in my parent component I have 3 childs which has vue-flux component inside, parent is:

<section class="composition">
    <div class="composition__box">
        <composition-slider :images="imagesFirstSlider" order="1"></composition-slider>
    </div>
    <div class="composition__box">
        <composition-slider :images="imagesSecondSlider" order="2"></composition-slider>
    </div>
    <div class="composition__box">
        <composition-slider :images="imagesThirdSlider" order="3"></composition-slider>
    </div>
</section>

Now inside composition-slider I have vue-flux component:

<div class="composition__slider" v-if="images">
    <vue-flux
        :class="[
            order === '1' ? 'composition__slider--first' : '',
            order === '2' ? 'composition__slider--middle' : '',
            order === '3' ? 'composition__slider--last' : ''
        ]"
        :options="fluxOptions"
        :images="images"
        :transitions="fluxTransitions"
        fullscreen="false"
        ref="slider">
        <flux-pagination slot="pagination"></flux-pagination>
    </vue-flux>
</div>

And what I want to do is to from parent trigger start and stop so this 3 sliders would behaviour like this:

1. first slider change after 5 sec and then it stop
2. second slider change after 10 sec and stop
3. third slider change after 15 sec and stop
4. first slider change after 20 sec and then it stop
5. second slider change after 25 sec and then it stop
6. third slider change after 30 sec and then it stop

and so on.. So I want to avoid changing slider in the same time.

So my question is - is it possible to set start/stop of sliders? Can't find such info in wiki's. Thanks in advance.

Is it possible to have caption like button click or link URL.

So I'm using "vue-flux": "^2.0.3"

After page load after sometime (around 5 sec i think) it show in console following error:

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'split' of undefined"
found in
---> at turn3d.vue
at VueFlux.vue
at src\components\slider.vue
at src\App.vue

TypeError: Cannot read property 'split' of undefined

I also did push this change into my repo demo. Please check it out I want to use your package because animations looks really great.

is that possible to customized FluxPagination Color?