SSENSE/vue-carousel

Question: How can I have two carousels on one page?

Open

#123 opened on Feb 1, 2018

View on GitHub
 (11 comments) (0 reactions) (0 assignees)JavaScript (1,705 stars) (513 forks)batch import
help wantedquestion

Description

I have two Vue-Carousel components,

  1. A 'Portfolio' images component with arrows left & right.
  2. And a 'Quotes' component that shows quotes I like.

I can get the Portfolio images component working correctly no problem, but the Quotes component is massively wide. It appears to be some weird css flexbox issue. The flex-basis is way too wide: "flex-basis: 2932px". <div class="VueCarousel-inner" style="transform: translateX(0px); transition: transform 0.5s ease; flex-basis: 2932px; visibility: visible;">

On my Portfolio component, which is good, I have: <slide><img src="x.png"></slide>

And then:

img {
      width: 100% !important;
      height: auto !important;
      background-size: cover !important;
    }

So I am at a loss... I'm a bit of a noob but it seems like the JS is not calculating the math correctly?? No idea really. Please help.

*Using latest versions of everything.

Contributor guide

Tech stack
vuejavascriptcss
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.
needs investigation
Prerequisites
Vue.jsCSS flexbox
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the VueCarousel component's inner CSS flexbox behavior, specifically the `VueCarousel inner` class. The issue involves `flex basis` being too large for the second carousel. Check how the carousel calculates its width and whether conflicts arise from multiple instances on the same page. Look at the component's JavaScript logic for computing the flex basis and any CSS overrides. The repository is vue carousel; relevant files likely include the component's CSS and JS files.