gs-shop / vue-slick-carousel

🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
https://gs-shop.github.io/vue-slick-carousel/
Other
810 stars 184 forks source link

Use component with slots in slide #182

Open ebrenner-code opened 3 years ago

ebrenner-code commented 3 years ago

I want to include components inside my slide. The markup for the components is displaying but all of the content that gets loaded into slots is missing.

`

`

SebastienTainon commented 3 years ago

Have you found a solution to this @redshiftstudio? I'm having the same issue...

Having components with slots seems to me a must-have for a carousel though.

ebrenner-code commented 3 years ago

I did not, instead I put the data for my "Instructors/People" into a yaml file, imported that and looped through it within the VueSlick component:

            <VueSlickCarousel
                ref="c1"
                :asNavFor="c2"
                :focusOnSelect="true"
                :autoplay="true"
                :autoplaySpeed="5000"
                :speed="750"
                :fade="true"
                :arrows="false"
                :waitForAnimate="false"
            >
                <div class="instructor" v-for="instructor in instructors">
                    <div class="top">
                        <g-image
                        :src="instructor.photo"
                        width="220"
                        height="220"
                        fit="outside"
                        class="instructor__photo"
                        :alt="instructor.name"
                        />

                        <div class="right">
                            <h4 class="instructor__name">
                                {{ instructor.name }}
                            </h4>
                            <h5 class="instructor__title">
                                {{ instructor.title }}
                            </h5>
                            <h5 class="instructor__org">
                                {{ instructor.org }}
                            </h5>
                        </div>
                    </div>
                    <p class="instructor__quote">
                        "{{ instructor.quote }}"
                    </p>
                </div>
            </VueSlickCarousel>
dylakim commented 1 year ago

I'm also having this issue. Has anyone found a solution?

ebrenner-code commented 1 year ago

Maybe try splide.js and their Vue integration? I switched to splide,js and haven't looked back.