change height, width values based on variable in react-simple-image-slider

i am implementing an image slideshow kind of thing in react using npm package – react-simple-image-slider.

implementation->

export default function Home(){

const images = [
    { url: "images/1.jpg" },
    { url: "images/2.jpg" },
    { url: "images/3.jpg" },
  ];
const open = true;

    <SimpleImageSlider
                  width={`${open ? 896 : 880}`}
                  height={`${open ? 430 : 440}`}
                  images={images}
                  showBullets={true}
                  showNavs={true}
                />
}

i am trying to change height, width based on a variable. but this doesnt load anything. page is empty. am i missing something. please help.

>Solution :

you can try passing in numeric values directly and conditionally set them like follow code, I think it will work as expected.

<SimpleImageSlider
  width={open ? 896 : 880}
  height={open ? 430 : 440}
  images={images}
  showBullets={true}
  showNavs={true}
/>

Leave a Reply