0

I have got a flickity-carousel in a container (for centering/alignment purposes) in a Nuxt/Vue application. I would like the carousel to be aligned with the rest of my content on the left side but I would like the carousel to go until the right border of the screen. I am using Tailwind for styling.

<div class="container mx-auto mx-10">
  <Content_A />
  <content_B />
  <Carousel class="???"/>
</div>

This is what I have at the moment

enter image description here

This is what I want

enter image description here

After playing around with overflow-x-visible and other tailwind classes, I haven't managed to do it. If anyone knows how to do, please help me !!

Maxime
  • 337
  • 2
  • 17
  • Perhaps wrap containers around things individually rather than generously around all sections. Then you can use a more specific container for the carousel and utilise the advise from KingJ – Jonathan Oct 27 '21 at 11:04

1 Answers1

1

It looks like there are potentially a couple of reasons why this isn't working for you.

  1. The container is preventing horizontal overflow using overflow-x: hidden. You'll need to make sure that the container allows for horizontal overflow regardless of where the issue is coming from.

  2. The Carousel is not allowing horizontal overflow due to overflow-x: hidden and width: 100%. You can either change the horizontal overflow to overflow-x: visible or change the width to width: auto; min-width: 100%;.

It's also worth checking the styles on each div in the Carousel because if there are a couple of elements between the top-level Carousel component and the Carousel Items themselves, the issue could be coming from one or more places within the Carousel.

KingsthwaiteJ
  • 464
  • 4
  • 10
  • I have tried all that but to no success... In the end I wrote some javascript to set the width of the carousel. – Maxime Oct 26 '21 at 10:58