0

I have a caroussel using react-slick and I want the main slide to take the same width as another component and being responsive.

I tried to calculate it like this:

   const width = (window.innerWidth - document.getElementById('element').offsetWidth)/2;

In my render method I have:

        const settings = {
          className: "center",
          centerMode: true,
          arrows: true,
          infinite: true,
          centerPadding: "220px",
          slidesToShow: 1,
          speed: 500,
          responsive: [
            {
              breakpoint: 1441,
              settings: {
                centerPadding: `${width}px`,
              }
            },
            }
          ]
        };

And finally in my return 

<Row style={{ margin: '150px 0px'}}>
        <Slider {...settings}>
          <img  alt="" src={destination.photo.url}
            onLoad={this.handleImageLoaded} />
          <img alt="" src={destination.photo.url}
            onLoad={this.handleImageLoaded} />

          <img alt="" src={destination.photo.url}
            onLoad={this.handleImageLoaded} />
          <img alt="" src={destination.photo.url}
            onLoad={this.handleImageLoaded} />
        </Slider>
    </Row>

But I have this error coming up: Errro Image

I have made the calculations in my console and everything is working so not sure where this is coming from

Fabian
  • 87
  • 3
  • 11

1 Answers1

0

The error is due to an extra 's' here: document.getElementsById.

As an ID is unique, the correct method is document.getElementById.

wadey
  • 71
  • 1
  • 3
  • Thanks man ! This was a stupid error of mine. But still It is not working, because `centerPadding` seems only to take a string, its not working with numbers so my component is not showing – Fabian Feb 21 '19 at 16:47
  • When I try to calculate like that: `const width = window.innerWidth - document.getElementById('element').offsetWidth`; I have an error `cannot read property 'offsetWidth' of null` – Fabian Feb 21 '19 at 17:02