除了一个令人恼火的、有问题的实例之外，用于轮播和 slider 的 Slick JS 库对我来说一直运行良好。我的四张幻灯片 slider (删除了无限循环，因此它更像是 slider 而不是轮播)是在 Bootstrap 模式中实现的。单击按钮打开模式后，很明显，所有 Slick 幻灯片的所有内容都在第一张幻灯片上堆叠并相互重叠。奇怪的是，修复似乎是调整浏览器窗口的大小。窗口调整大小事件似乎会适当调整 slider ，以便第一张幻灯片仅显示其内容。我相信我能够实现窗口调整大小事件的触发，但这个解决方案似乎...... janky。是否有任何看起来更合适的解决方案的想法，例如将 init 对象传递给巧妙的初始化方法，从根源上解决问题？
我在 Stack Overflow 和 GitHub 上看到过类似的问题，但所提供的解决方案似乎都不适合我。
<!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')在内容不可见时运行，从而避免用户看到 slider 在模式中调整自身大小。然后使内容再次可见。
关于jquery - 光滑的轮播 JS 库将所有内容堆叠在第一张幻灯片上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57861972/