ismail9k / vue3-carousel

Vue 3 carousel component
https://ismail9k.github.io/vue3-carousel/
MIT License
660 stars 164 forks source link

Slide Width #306

Closed WatchYaz123 closed 1 year ago

WatchYaz123 commented 1 year ago

Hello, I am a newbie in vue, can someone assist me in configuring the width of the slides? The link in #188 seems to be broken. I should be using the "slideWidth" prop however, I am not quite sure how to import it and where to declare it. Thanks

<template>
    <div class="container">
        <Carousel :wrap-around="true" :breakpoints="breakpoints">
            <Slide v-for="slide in recipes" :key="slide.id">
                <div :class="['carousel__item', { selected: slide.id === selectedSlideId }]" @click="handleClick(slide)">
                    <div class="card">
                        <img :src="'http://127.0.0.1:8000/' + slide.thumbnail" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title"> {{ slide.title }}</h5>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </Slide>

            <template #addons>
                <Navigation />
            </template>
        </Carousel>
    </div>
</template>
ismail9k commented 1 year ago

You can use the items-to-show prop to control the number of slides to be visible (the width of each slide compared to the parent wrapper).

For more configs and props, please check docs

<Carousel :wrap-around="true" :items-to-show="3.5">
      ...
</Carousel>