样式 react-slick.neostack

Posted 2023-02-25

【中文标题】样式 react-slick.neostack

【英文标题】：Style react-slick.neostack

【发布时间】：2020-03-19 08:41:54

【问题描述】：

slick.neostack 到一个滑块，滑块导入，但我看不到任何东西，它似乎是样式导致的。但是，当我尝试设置页面样式时，我无法“定位”我想要使用的类。我尝试查看以下示例：react-slick: Import CSS from slick-carousel fails 并设法将文件放入我的项目中，但我仍然无法定位正确的类来进行样式设置。

有人有什么想法吗？

这是我的轮播代码：

const settings = 
    arrows: true,
    infinite: false, // Stannar på sista
    slidesToShow: 1, // visa en åt gången
    slidesToScroll: 1, // scrolla en framåt
    autoplay: false,
    speed: 1000, // speed i själva scrollen
    autoplaySpeed: 7000, // hur länge varje bild visas
   
  return (
    <div className="carouselContainer">
      <Slider ...settings>
        <div className="sliderContainer">   
        <div className="poses"> 
          <span className="poseTitle">
            <h3>startPoseImage.name</h3>
            <h4>startPoseImage.sanskritname</h4>
          </span>
          <span className="imageContainer">
            <img src=startPoseImage.image alt=startPoseImage.name/>
          </span>
          <p>startPoseImage.description</p>
        </div>
        </div>
      <div className="sliderContainer"> 
        finalPoses.map((image) => 
          return (
          <div className="poses" key=image.id>
            <span className="poseTitle">
              <h3>image.name</h3>
              <h4>image.sanskritname</h4>
            </span>
            <span className="imageContainer">
              <img src=image.image alt=image.name />
            </span>
              <p>image.description</p>
              <p>image.extraMessage</p> 
            </div>   
            )  
          )
          </div>
        <div className="sliderContainer"> 
          <div className="poses"> 
          <span className="poseTitle">
            <h3>finishPoseImage.name</h3>
            <h4>finishPoseImage.sanskritname</h4>
          </span>  
          <span className="imageContainer">   
            <img src=finishPoseImage.image alt=finishPoseImage.name />
          </span>
          <p>finishPoseImage.description</p>
          </div>
          </div>
        </Slider>
        <button onClick=() => history.goBack() className="backLink">
          Back
        </button>
      </div>
    )
  

【参考方案1】：

我可以通过直接在设置中为滑块添加样式来解决我的问题。例如：

const settings = 
    arrows: true,
    infinite: false, // Stannar på sista
    slidesToShow: 1, // visa en åt gången
    slidesToScroll: 1, // scrolla en framåt
    autoplay: true,
    speed: 1000, // speed i själva scrollen
    autoplaySpeed: 7000, // hur länge varje bild visas
    adaptiveHeight: true,
    className: "center",
    centerMode: true,
    centerPadding: "60px",