光滑的旋转木马 JS 库将所有内容堆叠在第一张幻灯片上
Slick carousel JS library stacking all content on the first slide
用于旋转木马和滑块的 Slick JS 库对我来说一直运行良好，除了一个烦人的错误实例。我的四张幻灯片滑块（删除了无限循环，因此它更像是一个滑块而不是旋转木马）是在 Bootstrap 模态中实现的。单击按钮调出模式后，很明显所有 Slick 幻灯片的所有内容都堆叠在一起并在第一张幻灯片上相互重叠。奇怪的是，一个修复似乎是调整浏览器的大小 window。 window 调整大小事件似乎适当地调整了滑块，以便第一张幻灯片仅显示其内容。我相信我能够实现 window 调整大小事件的触发，但这个解决方案似乎...简陋。是否有任何看起来更合适的解决方案的想法，例如将 init 对象传递给从源头解决问题的灵活初始化方法？
我在 Stack Overflow 和 GitHub 上看到过类似的问题，但是 none 提供的解决方案似乎对我有用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Slick Demo</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="slick-1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="slick-1.8.1/slick/slick-theme.css"/>
</head>
<body>
<button type="button" id="questionnaire-modal" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Questionnaire</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body px-5 bg-light">
<div class="questionnaire" style="padding: 20px;">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="submit" style="background-color: #fbb03b; border: black;">Submit</button>
</div>
</div>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="slick-1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(() => {
// Initialize slick slider
let slickSlider = $('.questionnaire');
slickSlider.slick();
// Grab references to controls
let submitButton = $('#submit');
let prevButton = $('.slick-prev');
let nextButton = $('.slick-next');
// Disable 'previous' arrow and 'submit' button when modal is activated
$('#questionnaire-modal').one('click', (event) => {
prevButton.hide();
submitButton.attr('disabled', true);
});
// React to changes in slider
slickSlider.on('afterChange', (event, slick, currentSlide, nextSlide) => {
// Immediately blur focus on 'previous' and 'next' arrow buttons
prevButton.blur(); nextButton.blur();
// Hide 'previous' button on first slide and show 'previous' button on all other slides
(currentSlide === 0) ? prevButton.hide() : prevButton.show();
// Hide 'next' button on last slide and show 'next' button on all other slides
// Also show 'submit' button on last slide
if (currentSlide === 3) {
nextButton.hide();
submitButton.attr('disabled', false);
} else {
nextButton.show();
submitButton.attr('disabled', true);
}
});
});
</script>
</body>
</html>
多亏了有用的评论，我才找到了合适的解决方案。将 div.modal-content 的 visibility 样式更改为 hidden。然后将以下事件处理程序添加到脚本中：
$('#exampleModal').on('shown.bs.modal', (event) => {
$slickSlider.slick('setPosition');
$('.modal-content').css('visibility', 'visible');
});
当内容不可见时，这允许 .slick('setPosition') 到 运行，这避免了用户看到滑块在模式中自行调整大小。然后再次使内容可见。
用于旋转木马和滑块的 Slick JS 库对我来说一直运行良好，除了一个烦人的错误实例。我的四张幻灯片滑块（删除了无限循环，因此它更像是一个滑块而不是旋转木马）是在 Bootstrap 模态中实现的。单击按钮调出模式后，很明显所有 Slick 幻灯片的所有内容都堆叠在一起并在第一张幻灯片上相互重叠。奇怪的是，一个修复似乎是调整浏览器的大小 window。 window 调整大小事件似乎适当地调整了滑块，以便第一张幻灯片仅显示其内容。我相信我能够实现 window 调整大小事件的触发，但这个解决方案似乎...简陋。是否有任何看起来更合适的解决方案的想法，例如将 init 对象传递给从源头解决问题的灵活初始化方法？
我在 Stack Overflow 和 GitHub 上看到过类似的问题，但是 none 提供的解决方案似乎对我有用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Slick Demo</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="slick-1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="slick-1.8.1/slick/slick-theme.css"/>
</head>
<body>
<button type="button" id="questionnaire-modal" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Questionnaire</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body px-5 bg-light">
<div class="questionnaire" style="padding: 20px;">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="submit" style="background-color: #fbb03b; border: black;">Submit</button>
</div>
</div>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="slick-1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(() => {
// Initialize slick slider
let slickSlider = $('.questionnaire');
slickSlider.slick();
// Grab references to controls
let submitButton = $('#submit');
let prevButton = $('.slick-prev');
let nextButton = $('.slick-next');
// Disable 'previous' arrow and 'submit' button when modal is activated
$('#questionnaire-modal').one('click', (event) => {
prevButton.hide();
submitButton.attr('disabled', true);
});
// React to changes in slider
slickSlider.on('afterChange', (event, slick, currentSlide, nextSlide) => {
// Immediately blur focus on 'previous' and 'next' arrow buttons
prevButton.blur(); nextButton.blur();
// Hide 'previous' button on first slide and show 'previous' button on all other slides
(currentSlide === 0) ? prevButton.hide() : prevButton.show();
// Hide 'next' button on last slide and show 'next' button on all other slides
// Also show 'submit' button on last slide
if (currentSlide === 3) {
nextButton.hide();
submitButton.attr('disabled', false);
} else {
nextButton.show();
submitButton.attr('disabled', true);
}
});
});
</script>
</body>
</html>
多亏了有用的评论，我才找到了合适的解决方案。将 div.modal-content 的 visibility 样式更改为 hidden。然后将以下事件处理程序添加到脚本中：
$('#exampleModal').on('shown.bs.modal', (event) => {
$slickSlider.slick('setPosition');
$('.modal-content').css('visibility', 'visible');
});
当内容不可见时，这允许 .slick('setPosition') 到 运行，这避免了用户看到滑块在模式中自行调整大小。然后再次使内容可见。