chrome should be resized to show carousel slides

[engmagdy87]

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

Environment

• System: OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver) CPU: (4) x64 Intel(R) Core(TM) 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>

[piotr-s-brainhub]

@engmagdy87

Thanks for this issue but I don't understand.

Do you mean the Chrome browser should be automatically resized by the carousel? Client JavaScript engines offer window.resizeTo but it doesn't work in modern browsers (I just checked in Chrome and Firefox) and even if it worked, IMO it's not a good idea.

Could you write the reproduction steps and how it should work according to you?

[engmagdy87]

@piotr-s-brainhub as u see in gif, when app start, I cannot see the carousel but when I resize viewport by resize devTools, the carousel appear when I inspect the carousel , I found css class BrainhubCarousel__track and its childs width is zero till resize it this is the code I have HomeData with exported object with images

<Carousel
          value={activeSlideId}
          onChange={setActiveSlideId}
          infinite
          autoPlay={4000}
          animationSpeed={1000}
          arrows={false}
          clickToChange
          centered
        >
          {HomeData.map((slide) => (
                  <HomeSlide key={slide.id} content={slide} />
          ))}
        </Carousel>

[piotr-s-brainhub]

@engmagdy87

could you provide all the variables so I could reproduce it?

[engmagdy87]

import React, { useState, useEffect } from 'react';
import Carousel, { Dots } from '@brainhubeu/react-carousel';
import HomeData from '../../../assets/data/home.js';
import '@brainhubeu/react-carousel/lib/style.css';
import '../../../assets/styles/components/home/slider.scss';
const HomeSlide = React.lazy(() => import('./HomeSlide'));

export default function HomeSlider() {
  const [activeSlideId, setActiveSlideId] = useState(0);
  const thumbnails = new Array(HomeData.length).fill(
    <div
      style={{ width: '30px', height: '2px', backgroundColor: 'white' }}
    ></div>
  );
  return (
    <div className="home-slider-wrapper">
          <Carousel
          value={activeSlideId}
          onChange={setActiveSlideId}
          infinite
          autoPlay={4000}
          animationSpeed={1000}
          arrows={false}
          clickToChange
          centered
        >
          {HomeData.map((slide) => (
                <HomeSlide key={slide.id} content={slide} />
           ))}
        </Carousel>
      <Dots
        thumbnails={thumbnails}
        value={activeSlideId}
        onChange={setActiveSlideId}
        number={HomeData.length}
      />
    </div>
  );
}

[piotr-s-brainhub]

@engmagdy87

I need also this HomeData.

../../../assets/styles/components/home/slider.scss could be also needed

[engmagdy87]

HomeData

const Image1 = require("../../assets/images/home/1.png")
const Image2 = require("../../assets/images/home/2.png")
const Image3 = require("../../assets/images/home/3.png")

export default [
  {
    "id": 0,
    "body": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book",
    "actions": [
      {
        "text": "read more at about us",
        "url": ""
      }
    ],
    "image": Image1
  },
  {
    "id": 1,
    "body": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book",
    "actions": [
      {
        "text": "read more at our approach",
        "url": ""
      }
    ],
    "image":Image2
  },
  {
    "id": 2,
    "body": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book",
    "actions": [
      {
        "text": "read more at our approach",
        "url": ""
      },
      {
        "text": "read more at news / events",
        "url": ""
      }
    ],
    "image": Image3
  }
]

[engmagdy87]

slider.scss

@import '../../mixins.scss';

.home-slider-wrapper {
  position: relative;
  .BrainhubCarousel__dots {
    justify-content: flex-end !important;
    position: absolute;
    bottom: 40px;
    right: 15%;
    @include is-mobile {
      bottom: 20px;
      right: 5%;
    }
  }
}

[engmagdy87]

HomeSlide

import React from 'react';
import '../../../assets/styles/components/home/slide.scss';

export default function Slide({ content }) {
  return (
    <div
      className="home-slide-wrapper"
      style={{
        backgroundImage: `url(${content.image})`,
      }}
    >
      <h1>{content.body}</h1>
      {content.actions.map((action, index) => (
        <div key={index}>
          <a href={action.url} target="__blank">
            {action.text}
          </a>
          <br />
        </div>
      ))}
    </div>
  );
}

[engmagdy87]

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

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

[piotr-s-brainhub]

@engmagdy87

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