Vue-carousel: perPage set 2.2 not work

[maqunjing]

[Loschcode]

The perPage option doesn't work for me either

[quinnlangille]

Hey @maqunjing @Loschcode, perPage is working fine on my end - could I get some additional details or a JS fiddle recreating the bug? Thanks!

[mydnic]

not working for me either

[quinnlangille]

@mydnic I'll investigate it laster this week and see if I can recreate - if you have any more details or examples of it happening feel free to post here

[mydnic]

The second example (called "Responsive") on your website (https://ssense.github.io/vue-carousel/examples/) demonstrate the issue actually.
In the fiddle : https://jsfiddle.net/toddlawton/rvhxLdkq/?utm_source=website&utm_medium=embed&utm_campaign=rvhxLdkq

:perPage="4" but only 2 slides are displayed

[quinnlangille]

Hmm good find, it seems that in the example perPage is being overwritten by perPageCustom. You can see it working as intended in this fiddle -> https://jsfiddle.net/sf8ugeLL/.

I'll revise the example in the next update!

[mydnic]

@quinnlangille The same thing but doing it this way:

https://jsfiddle.net/sf8ugeLL/1/

And the problem appears

I use back-end generated views with vuejs so I have this kind of code:

<carousel :perPage="7">
    @foreach ($brands as $brand)
        <slide>
            <img src="{{ $brand->image }}" alt="{{ $brand->name }}">
        </slide>
    @endforeach
</carousel>

Only 2 images are displayed per page

[crnkovic]

I had the same issue, however calling prop per-page instead of perPage fixed the issue.

Example:

<carousel :per-page="6">
    ...
</carousel>

Every prop should be converted from camelCase to dash-case, such as paginationEnabled to pagination-enabled.

[mydnic]

@crnkovic I confirm it works that way :)
thanks!

[quinnlangille]

Thanks for pointing that out, @crnkovic, I didn't even think to check.

As a side note - camelCase -> dash-case is actually already bundled into v0.6.6, which should be out shortly!

[quinnlangille]

Hey guys, just release v0.6.7 which addresses the camelCase bug, pull and test it out! Going to close this now, feel free to open a new issue if there are still any problems

[youssef-tharwat]

I had the same issue, however calling prop per-page instead of perPage fixed the issue.

Example:

<carousel :per-page="6">
    ...
</carousel>

Every prop should be converted from camelCase to dash-case, such as paginationEnabled to pagination-enabled.

This Worked for me too. Thank you

[Eben-Hafkamp]

@quinnlangille

As a side note - camelCase -> dash-case is actually already bundled into v0.6.6, which should be out shortly!

Sorry, on the npmjs page the latest version is listed as 0.18.0? I also ran into this camel vs kebab case issue and almost gave up before finding this ticket. What is the recommended way to install latest version?