【发布时间】：2019-01-16 09:57:09
【问题描述】：
我有一个光滑的滑块，我希望根据当前显示的图像更改高度。我的滑块的图像不是硬编码的。图像是从输入文件中获取的，然后显示到滑块中。我添加了adaptiveHeight：true，它起作用了。我的高度会自动改变，但是当我上传图像而不触摸其他任何东西时，图像无法正确显示。只有当我单击下一个或上一个时，图像才会正确显示。
HTML：
<section name="canvas" class="canvas" id="canvas">
<div id="boxContain"></div>
<div class="imageContainer" id="imageContainer">
</div>
</section>
JavaScript：
const fileInput = document.getElementById('my_file');
const fileList = document.getElementById('imageContainer');
let slickSettings = {
infinite: true,
draggable: false,
arrows: true,
slidesToShow: 1,
slidesToScroll: 1,
swipe: false,
adaptiveHeight: true
};
let initSlickCarousel = (target, settings) => {
const $target = $(target);
switch (true) {
case $target.hasClass('slick-initialized'):
$target.slick('unslick');
$target.slick(settings);
break;
default:
$target.slick(settings);
}
};
const handleInputChange = (event) => {
console.log('We are handling it sir!');
const filesArray = Array.from(event.target.files);
if (filesArray.length > 20) {
alert("Please select 20 or less images!!");
} else {
filesArray.map((singleFile) => {
const outputImg = document.createElement('img');
const fileReader = new FileReader();
outputImg.className = 'img-thumbnail';
fileReader.readAsDataURL(singleFile);
fileReader.onload = (event) => {
outputImg.src = event.target.result;
document.getElementById("canvas").style.height = "auto";
document.getElementById("imageContainer").style.height = "auto";
document.getElementById("imageContainer").style.width = "auto";
document.getElementById("createBoxBtn").style.pointerEvents = ("auto");
document.getElementById("duplicateBox").style.pointerEvents = ("auto");
document.getElementById("deleteBox").style.pointerEvents = ("auto");
document.getElementById("save").style.pointerEvents = ("auto");
};
console.log(outputImg);
console.log(event.target.files);
fileList.appendChild(outputImg);
document.getElementById("openBtn").style.pointerEvents = "none";
});
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
$("#files").append('<div class="filename"><span name="fileNameList">' + files[i].name + '</span></div>');
}
initSlickCarousel(fileList, slickSettings);
}
};
CSS：
.canvas {
border: 1px solid black;
width: 600px;
height: 600px;
background: #D3D3D3;
position: absolute;
margin-left: 350px;
}
上传图片后，不碰任何东西，高度会变小，看不到完整的图片。只有点击下一步/上一个后，它才会显示完整的图片。它应该显示完整的图片来自开头，不需要点击next/prev来调整。那么我该如何解决这个问题呢？
【问题讨论】：
-
您是否为每张图片设置了尺寸？这可能是因为当 slick 初始化自身时，它没有从 CSS 中读取
height属性。如果您能提供一个实际的代码示例，将有助于调试。 -
@Speir 不，我没有为每个图像设置高度。我会将代码放入 jsFiddle。
-
通过阅读您的代码，我认为您是在初始化光滑后设置图像对吗？
-
@Speir 是的，这是正确的
-
如果可以预设图片大小，我想应该都不错。
标签： javascript jquery slick.js