chrome should be resized to show carousel slides
See original GitHub issuechrome should be resized to show carousel slides as it was initially not appear
BrainhubCarousel__track and its child css classes width is zero till resize
Environment
-
System: OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver) CPU: (4) x64 Intel® Core™ i7-7500U CPU @ 2.70GHz Memory: 133.97 MB / 3.75 GB Binaries: Node: 12.13.0 - /usr/local/bin/node Yarn: 1.21.1 - /usr/bin/yarn npm: 6.14.2 - /usr/local/bin/npm Browsers: Chrome: 81.0.4044.138 Firefox: 76.0 npmPackages: @brainhubeu/react-carousel: ^1.13.46 => 1.13.46
-
desktop
-
Chrome
and this is the code
<Carousel
value={activeSlideId}
onChange={setActiveSlideId}
infinite
autoPlay={4000}
animationSpeed={1000}
arrows={false}
clickToChange
centered
>
{HomeData.map((slide) => (
<HomeSlide key={slide.id} content={slide} />
))}
</Carousel>
Issue Analytics
- State:
- Created 3 years ago
- Comments:10 (4 by maintainers)
Top Results From Across the Web
Resize Image Carousel Images - Sites Community
My question is this same technique applies to the carousel images? Will carousel images be resized and offered to visitors based on their ......
Read more >Best practices for carousels - web.dev
A carousel is a UX component that displays content in slideshow-like manner. Carousels can "autoplay" or be navigated manually by users.
Read more >Slide Height Issues On Load - FormidableLabs/nuka-carousel
If we deactivate the height: 0 in the style tool of chrome, we can see the carousel... If we resize the page, the...
Read more >Make Bootstrap's Carousel both center AND responsive?
However, using this solution, when the carousel is resized and smaller than the image, the image is cropped instead of scaling as default....
Read more >Image Carousel - New Google Sites
Go to the Insert panel. Scroll down to find Image carousel - click on it. Add the images you want to appear in...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@engmagdy87
I invite you to open a PR in order to create a more general solution.
@piotr-s-brainhub I solved this issue by adding
window.dispatchEvent(new Event('resize'));
in useEffect with zero dependancy 👇I don’t know is this efficient way to solve this issue or not but I hope you find the real cause of this behavior