Vue-carousel: Inline templates ignore the carousel tag attributes

Created on 9 Mar 2017  路  3Comments  路  Source: SSENSE/vue-carousel

First, good effort, we need a good vue carousel 馃憤

I've noticed an issue with the rendering when using an inline template... took me a while to work out what was happening.

I've made a copy of one of the example fiddles and replace the JS template with an inline template:

https://jsfiddle.net/doginthehat/h8uq5d0p/

The carousel works in that it's correctly laid out.

However, it seems to completely ignore any of the attributes passed to the tag.

So in this instance, the number of slides and the carousel isn't responsive. It just show 2 items no matter what you give it.

<carousel :perPage="4" :perPageCustom="[[480, 2], [768, 3]]">

Haven't been able to dig in the code to find the problem but you might have some idea.

Thanks

Most helpful comment

My mistake, these are camelCase props.

It's explained in the docs

https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

So, it should be <carousel :per-page="4" :per-page-custom="[[480, 2], [768, 3]]">

All 3 comments

My mistake, these are camelCase props.

It's explained in the docs

https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

So, it should be <carousel :per-page="4" :per-page-custom="[[480, 2], [768, 3]]">

Though that doesn't entirely explain why it works in the original example https://jsfiddle.net/toddlawton/rvhxLdkq/

@doginthehat Thanks for having a look! I think that my example counts as a string template and yours is an inline template. Seems that you've found the solution on your own haha 馃憤

Was this page helpful?
0 / 5 - 0 ratings