0

I am using Vuejs with Vue-carousel-3d for the carousel. I have the most basic simple carousel component from one of the examples:

<template>
    <div id="carousel-wrapper">
        <carousel-3d>
            <slide v-for="(i, slide) in slides" :index="i" :key="i">
                <img src="https://placehold.it/360x270">
            </slide>
        </carousel-3d>
    </div>
</template>

<script>
    import { Carousel3d, Slide } from 'vue-carousel-3d';

    export default {
        name: 'carousel-wrapper',
        components: {
            'carousel-3d': Carousel3d,
            'slide': Slide
        },
        data: function () {
            return {
                slides: 7
            }
        }
    }
</script>

<style scoped>
    #carousel-wrapper {
        outline: 5px solid red;
    }

    .carousel-3d-container figure {
        margin: 0;
    }

    .carousel-3d-container figcaption {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        bottom: 0;
        padding: 15px;
        font-size: 12px;
        min-width: 100%;
        box-sizing: border-box;
    }
</style>

There was an error regarding passing a key in each slide in a for loop, but after correcting it by passing :key="i", now there's no error. But the carousel is not displaying in the browser. If I inspect in developer mode, there is the carousel divs, but in the browser, there's only the 2px solid red outline that I gave for testing purpose. Its working in their example page, but not in mine. I am new to Vuejs so I may be doing something wrong. What am I missing here?

Kakar
  • 5,354
  • 10
  • 55
  • 93
  • 3
    The example has `v-for="(slide, i) in slides" :index="i"` and you have `v-for="(i, slide) in slides" :index="i"` – Nora May 29 '17 at 18:36
  • i just copied your code to my webpack template and it just works ...strange. can you maybe use the vue-cli to start a new project (use webpack template) and try to paste this code into the app.vue? – LiranC May 30 '17 at 07:51

0 Answers0