设置左侧（在容器中）对齐的轮播以到达屏幕右侧（在容器外）

Posted 2023-02-16

【中文标题】设置左侧（在容器中）对齐的轮播以到达屏幕右侧（在容器外）

【英文标题】：Styling a carousel aligned on the left (in a container) to reach the right side of the screen (out of the container)

【发布时间】：2021-12-11 06:35:18

【问题描述】：

我在 Nuxt/Vue 应用程序的容器中有一个 flickity-carousel（用于居中/对齐目的）。我希望轮播与左侧的其余内容对齐，但我希望轮播一直到屏幕的右边框。我正在使用 Tailwind 进行造型。

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

这是我目前拥有的

这就是我想要的

在玩了overflow-x-visible 和其他顺风课程后，我没能做到。如果有人知道怎么做，请帮助我！！

【问题讨论】：

也许将容器单独包裹起来，而不是大方地包裹所有部分。然后，您可以为轮播使用更具体的容器并利用 KingJ 的建议

【参考方案1】：

看起来这对您不起作用可能有几个原因。

容器正在使用overflow-x: hidden 防止水平溢出。无论问题来自何处，您都需要确保容器允许水平溢出。

由于overflow-x: hidden 和width: 100%，轮播不允许水平溢出。您可以将水平溢出更改为overflow-x: visible 或将宽度更改为width: auto; min-width: 100%;。

检查 Carousel 中每个 div 的样式也是值得的，因为如果*** Carousel 组件和 Carousel 项目本身之间有几个元素，则问题可能来自于轮播。

【讨论】：

我已经尝试了所有这些但没有成功......最后我写了一些javascript来设置轮播的宽度。