SSENSE/vue-carousel

Wrong width of slide, if there is less slides than defined columns

Open

#234 opened on Jul 11, 2018

View on GitHub
 (2 comments) (3 reactions) (0 assignees)JavaScript (1,705 stars) (513 forks)batch import
bughelp wantedneed repro

Description

I've got slider set up to 4 columns on large screen, but content is based on array of variable length. If there are 4 or more items, width of each item is OK, but when number is lower than 4, then each element takes equal part of carousel. This is especially an issue when there is 1 element with fluid photo - it gets HUGE.

Right now the only fix is to add container for each slide with css max-width set, but IMHO this is too much trouble especially when you got like 4 brakpoints, then you max-width need to be set-up for each one.

Further investigations draws me to conclusion that this is an issue of how flex-basis is count. Currently it looks that number of items (not number of columns) is used.

Contributor guide

Tech stack
vuejavascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
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.js basicsCSS flexbox
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the Carousel component's code, likely in 'Carousel.vue', to locate where slide widths are calculated. The bug arises because flex basis is set based on the number of items instead of the configured column count. The fix involves adjusting the computed width to divide 100% by the number of columns. Review the component's styles and any JavaScript that handles slide dimensions.