search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.27k stars 1.31k forks source link

bug: Carousel of Mobile Mockup does not work. #2743

Closed anantashahane closed 10 months ago

anantashahane commented 10 months ago

What version of daisyUI are you using?

4.5.0

Which browsers are you seeing the problem on?

No response

Reproduction URL

https://play.tailwindcss.com/ndh9AmpKfH

Describe your issue

Look how the whole screen is becoming scrollable. I can not show my work like this.

github-actions[bot] commented 10 months ago

Thank you @Ananta-One-1 for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

seriousm4x commented 10 months ago

You can add a new <div class="overflow-auto"> around your whole html.

<div class="overflow-auto">
  <div class="carousel carousel-center space-x-4 rounded-box bg-neutral p-4">
    ...
  </div>
</div>
saadeghi commented 10 months ago

You can add a width or max width class name like the example:
https://daisyui.com/components/carousel/#full-bleed-carousel

Also make sure you have autoprefixer PostCSS plugin in your project if you're using PostCSS.

Let me know if you have a question.