Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

chrome should be resized to show carousel slides

See original GitHub issue

chrome 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 Peek 2020-05-12 19-46

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 GitHub Comments

2reactions

piotr-s-brainhubcommented, May 13, 2020

@engmagdy87

I invite you to open a PR in order to create a more general solution.

0reactions

engmagdy87commented, May 13, 2020

@piotr-s-brainhub I solved this issue by adding window.dispatchEvent(new Event('resize')); in useEffect with zero dependancy 👇

import React, { useEffect } from 'react';
import Carousel from '@brainhubeu/react-carousel';

export default function CustomCarousel({
  children,
  activeSlideId,
  setActiveSlideId,
}) {
  useEffect(() => {
    window.dispatchEvent(new Event('resize'));    
  }, []);
  return (
    <Carousel
      value={activeSlideId}
      onChange={setActiveSlideId}
      infinite
      autoPlay={4000}
      animationSpeed={1000}
      arrows={false}
      clickToChange
      centered
    >
      {children}
    </Carousel>
  );
}

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