javascript - 使用 React slick 使幻灯片居中
问题描述
我希望实现一个反应光滑的轮播,但我在将图像垂直居中时遇到问题。这个问题就在这里成立。
https://codesandbox.Io/s/react-slick-playground-o7dhn
图像不聚焦
Flexbox 属性不再起作用(深红色的 div 是一个带有 justify-content: center; align-gadgets: middle; 的 flexbox) margin:car 最简单的用于水平对齐(如果我使用的是 flexbox,我不需要设置)我无法删除上边距(尽管在 div 处有 padding:0px 并且在图片处有 margin-top:0px )因此,任何峰值为 400px 或更多的照片都会被移动并减少(div 的高度为400像素)
沙箱中的代码:
import React from "react";
import ReactDOM from "react-dom";
import Slider from "react-slick";
import "./index.css";
class ReactSlickDemo extends React.Component {
render() {
var settings = {
dots: false,
arrows: false
};
return (
<div className="container">
<Slider {...settings}>
<div>
<img src="http://placekitten.com/g/400/400" />
</div>
<div>
<img src="http://placekitten.com/g/400/200" />
</div>
<div>
<img src="http://placekitten.com/g/200/200" />
</div>
<div>
<img src="http://placekitten.com/g/400/200" />
</div>
</Slider>
</div>
);
}
}
ReactDOM.render(<ReactSlickDemo />, document.getElementById("container"));
解决方案
推荐阅读
- apache-kafka - 限制消费者在 kafka 中发布数据
- mysql - MySQL Group By:如果至少一行包含值,如何排除组?
- tensorflow - 有没有办法找到 tf.data.Dataset 的批量大小
- php - 准备好的语句登录需要获取原始
- alexa - 亚马逊 Alexa 编程语言
- jenkins - 收到错误 Jenkins 管道泊坞窗:找不到命令
- raspberry-pi - 使用 PN532 和 Raspberry Pi 检测徽章的问题
- ruby-on-rails - 使用地理位置查找附近的事件
- c# - 如何在快速彩色文本框中设置字符串样式
- ios - Flutter 为 BlinkId 插件添加新的 ViewController