样式 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-样式导入内联样式选择器全局样式与局部样式)