SSENSE/vue-carousel

Feature Request: Allow dynamic number of slides

Open

#268 opened on Aug 20, 2018

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (1,705 stars) (513 forks)batch import
featuregood first issuehelp wanted

Description

I have a dynamic number of images I want to display in your carousel. For large screens I want to display up to 8 slides per page. But since the number of images is dynamic I might end up having only 2 images to display. In that case the slide takes up way too much space.

Example: https://codesandbox.io/s/n3mkw7z7q0 I highlighted the background of each slide to easily see how much space it takes up.

It would be great if there was a way to deal with this problem, maybe by being able to set the flex-basis yourself?

Contributor guide

Tech stack
vuejavascript
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue.jsCSS flexbox
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Examine the Carousel component (likely in src/Carousel.vue) to understand current slide width calculation. Implement a prop or reactive calculation that allows the number of slides per page to adjust based on the number of children and container width. Use the provided codesandbox example (https://codesandbox.io/s/n3mkw7z7q0) as a test case. Ensure the solution works with responsive design and existing functionality.