Number of items per page sometimes 2

[focussing]

I want only one item per page so I use this:

            <carousel ref="carousel" :perPage="1">
                <slide>
                    <...></....>
                </slide>
                <slide>
                    <...></....>
                </slide>
                <slide>
                    <...></....>
                </slide>
                <slide>
                    <...></....>
                </slide>
            </carousel>

When I reload a page, sometimes 2, sometimes 1 item is shown.

[quinnlangille]

Hey @focussing, this seems like a weird one.. any chance you could send a reproducible link? JSfiddle or cloneable repo would work fine. Have never seen or heard of this before, so would like to see a working reproduction.

[focussing]

Hey @quinnlangille, please take a look at this. It loads like this: and after refresh like this:

[quinnlangille]

Hmm yeah that's definitely not working as expected. After a few clicks it seems to sort itself out, so looks like it's an issue with initial state. Must be an edge case when set to perPage=1. I'll flag as a bug!

[quinnlangille]

Looks like it may be related to #233

[focussing]

Hello @quinnlangille can I help one way or another?

[quinnlangille]

Hey @focussing, yeah if you want to submit a fix for this be my guest! I'm guessing the issue is in slideWidth calculation inside the carousel or slide components computed properties. If you end up taking the task on, feel free to discuss here if you find anything you have questions about :~)

[erick2014]

@quinnlangille I would like to work on this, or at least try haha

[focussing]

I hope you find something :)

[focussing]

Maybe calculate the slideWidth in "Carousel.vue"

  beforeUpdate() {
    this.computeCarouselWidth();
  },

[focussing]

this.slideWidth never gets a value in Carousel.vue

[focussing]

I updated

    computeCarouselWidth() {
      this.getSlideCount();
      this.getBrowserWidth();
      this.getCarouselWidth();
      this.setCurrentPageInBounds();
      this.slideWidth = this.slideWidth();
    },

Sorry I cannot test it, when I run "npm run build" in the vue-carousel folder I get error messages.

[quinnlangille]

Hey @focussing, not sure why you're getting an error can you post the output if it's still happening?

[focussing]

Hey @quinnlangille yep it is still happening; see the site, I have not changed anything

[quinnlangille]

@focussing I meant the error in npm run build, is that still happening and if so can you send output?

[focussing]

iMac:vue-carousel raymond$ npm run build

[email protected] build /Users/raymond/stack/sites/pim-webpack/node_modules/vue-carousel webpack --config webpack.prod.js && npm run updateDocAssets

/Users/raymond/stack/sites/pim-webpack/node_modules/vue-carousel/webpack.common.js:64 new VueLoaderPlugin() ^

TypeError: VueLoaderPlugin is not a constructor at Object. (/Users/raymond/stack/sites/pim-webpack/node_modules/vue-carousel/webpack.common.js:64:5) at Module._compile (module.js:635:30) at Object.Module._extensions..js (module.js:646:10) at Module.load (module.js:554:32) at tryModuleLoad (module.js:497:12) at Function.Module._load (module.js:489:3) at Module.require (module.js:579:17) at require (internal/module.js:11:18) at Object. (/Users/raymond/stack/sites/pim-webpack/node_modules/vue-carousel/webpack.prod.js:2:16) at Module._compile (module.js:635:30) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: webpack --config webpack.prod.js && npm run updateDocAssets npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/raymond/.npm/_logs/2018-10-11T16_32_53_068Z-debug.log

[finppp]

I think this is an issue where the image is not loaded when the carousel is initialised. If you set a width or min-width, as a placeholder for where the image loads, this should fix your issue

[orimyth]

I got the same strange behaviour with the following code. The snippet is in a blade component and I have vuetify installed also. What I observed is that on macOS on Safari, Firefox and Chrome it looks fine but on windows the behaviour shows up on Chrome, Firefox and Edge. I'll try to dig deeper into it and provide a reproducible fiddle these days.

<carousel
        :per-page="1"
        :scroll-per-page="false"
        :autoplay="true"
        :autoplay-timeout="3500"
    >
        @foreach($sliderItems as $item)
            <slide
            >
                <v-img
                    width="100vw"
                    contain
                    class="primary"
                    :lazy-src="`/images/sliders/{{$item}}-${$vuetify.breakpoint.mdAndUp ? 'd' : 'm'}.jpeg`"
                    :src="`/images/sliders/{{$item}}-${$vuetify.breakpoint.mdAndUp ? 'd' : 'm'}.jpeg`"
                ></v-img>
            </slide>
        @endforeach
</carousel>

EDIT: I also tested it on browserstack to get my theory running and its unfortunatly only on windows. Every other browser on macOS works find