样式 react-slick.neostack

Posted

技术标签:

【中文标题】样式 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",
   

【讨论】:

以上是关于样式 react-slick.neostack的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序10(wxss-样式导入内联样式选择器全局样式与局部样式)

CSSCSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )

JS修改CSS设置的样式

原生JS获取及设置CSS样式-1.行内样式

打破 Grommet 样式组件样式的全局样式

字体样式 文本样式