react-simple-image-slider: customize weight and height-CodePudding

I'm a beginner to React JS, so I am using react-simple-image-slider for my image slider component, but I want the image to be responsive on mobile as well, so I am trying to set the width and height using vw,vh or percentage, but it only accepts number. I think there will be an advanced concept that deals with this problem, but I don't know what is it. Any helps would be appreciated!

    <div className="card_imgBox">
      <SimpleImageSlider
        className="card_img"
        width={400}
        height={300}
        images={item.thumb}
        showBullets={true}
        showNavs={true}
      />

CodePudding user response：

Put value into string that will solve your problem.

Width="90%"
height="100%"

CodePudding user response：

You should use % yes, cause now the slider will always be the same width and height.

CodePudding user response：

Since the API of the SimpleImageSlider component does not accept string values, you can use a resize observer:. You would then style the outer div to give it the size you want.

import React from "react";
import useResizeObserver from "use-resize-observer";

const App = () => {
  const { ref, width = 1, height = 1 } = useResizeObserver();

  return (
      <div ref={ref} className="card_imgBox" style={{ width: "90vw", height: "30px" }} >
        <SimpleImageSlider
          className="card_img"
          width={width}
          height={height}
          images={item.thumb}
          showBullets={true}
          showNavs={true}
        />
      </div>
  );
};