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

[midlantica]

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.

[midlantica]

@quinnlangille stated earlier

Hey @midlantica, you should be able to override the flex-basis. The width of the carousel is calculated by this.$el.clientWitdh. The flex basis (slideWidth) is then determined by the carouselWidth / number of pages (currentPerPage). Try giving your second carousel a unique id or class and changing it's width in your CSS and you'll hopefully see some results.

Also, @gangsthub is correct in that this should be it's own issue as it doesn't relate to the carousel pagination. No worries, but going forward the best practice is to always open a new issue if you don't see your exact problem. If it ends up as a duplicate I can direct you to the right thread.

[quinnlangille]

@midlantica thanks for opening a new issue - let me know if the above fix helps!

[midlantica]

@quinnlangille That is not actually my question... I have two carousels, and I actually want them to be the same width... One is showing up fine, the other goes on thousands of pixels wide.

I did have unique classes, but still the width of the second component is too wide. Working on it now... No luck.. flex-basis will not move.

Actually, I just removed the 1st 'good' carousel.. and still that second one is miles wide... scratching head... This is the only issue stopping me from finish the site...

[midlantica]

[midlantica]

O... M.. G... I basically retyped — not even really, copy/pasted mostly from the old bad one — the entire component in a new file with new name, and boom! It works.

I have zero idea why.. but all is well.. maybe some text detritus from a copy??

[midlantica]

Sorry, not closed. I only had three divs with my quotes in them, that worked fine, but as soon as I added in the other <slide>s, it went super wide again.

Fractional width appears to be added for ever I add... after I get to 4 <slide>s, it's completely too wide.

Sorry for my noobness. Any help greatly appreciated.

[quinnlangille]

Hey @midlantica didn't see your message after you closed this. I'm not 100% sure the root if the issue here, but it's likely in how we calculate carousel width. It's been a bit since you posted, have you had any luck since? If not, i'd look at our methods for size calculation and start debugging there.

I'll also flag this as help wanted. Good luck!

[midlantica]

Still no luck. Thanks for Help Wanted.

FWIW, I can add the same vue-carousel component in over and over one after the other and they all come in fine... but if I add a distinct new vue-carousel, it blows up.

I have also tried a dozen other carousels and they all blow up the width. I was using CSS Grid Layout, I thought that might somehow have been a problem so I tried two floating divs.. same result.

Please someone help. If I have to, I'll put it up on github.

[gangsthub]

It seems more like an css problem. Sure, please, make a codepen.io, a stackblitz.com, a jsbin.com... Something to fork. You name it. Code snapshots really don't help.

[ephraimlambarte]

I am experiencing this too but it only happens in firefox, it works fine in chrome.

[GuyHarperDay]

Same for me (in chrome)