改变基于变量的React Simple Image Slider中的高度和宽度数值

huangapple
go评论92阅读模式
英文:

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

问题

  1. 我正在使用 React 实现类似图像幻灯片的东西，使用了 npm 包 - react-simple-image-slider。
  3. 实现如下： 
  5. export default function Home(){
  7.     const images = [
  8.         { url: "images/1.jpg" },
  9.         { url: "images/2.jpg" },
  10.         { url: "images/3.jpg" },
  11.       ];
  12.     const open = true;
  13.     
  14.         <SimpleImageSlider
  15.                       width={`${open ? 896 : 880}`}
  16.                       height={`${open ? 430 : 440}`}
  17.                       images={images}
  18.                       showBullets={true}
  19.                       showNavs={true}
  20.                     />
  21. }
  22. 我尝试根据一个变量改变高度和宽度，但这并没有加载任何内容。页面是空白的。我是否遗漏了什么。请帮忙。
英文:

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

implementation->

  1. export default function Home(){
  3. const images = [
  4.     { url: &quot;images/1.jpg&quot; },
  5.     { url: &quot;images/2.jpg&quot; },
  6.     { url: &quot;images/3.jpg&quot; },
  7.   ];
  8. const open = true;
  10.     &lt;SimpleImageSlider
  11.                   width={`${open ? 896 : 880}`}
  12.                   height={`${open ? 430 : 440}`}
  13.                   images={images}
  14.                   showBullets={true}
  15.                   showNavs={true}
  16.                 /&gt;
  17. }

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.

答案1

得分: 0

你可以尝试直接传入数值，并按照以下代码进行条件设置，我认为它会按预期工作。

  1. &lt;SimpleImageSlider
  2.   width={open ? 896 : 880}
  3.   height={open ? 430 : 440}
  4.   images={images}
  5.   showBullets={true}
  6.   showNavs={true}
  7. /&gt;
英文:

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

  1. &lt;SimpleImageSlider
  2.   width={open ? 896 : 880}
  3.   height={open ? 430 : 440}
  4.   images={images}
  5.   showBullets={true}
  6.   showNavs={true}
  7. /&gt;

huangapple
  • 本文由 发表于 2023年2月16日 17:22:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/75470128.html
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定