光滑的轮播 JS 库在第一张幻灯片上堆叠所有内容
Posted
技术标签:
【中文标题】光滑的轮播 JS 库在第一张幻灯片上堆叠所有内容【英文标题】：Slick carousel JS library stacking all content on the first slide 【发布时间】：2020-01-11 16:34:25 【问题描述】：用于轮播和滑块的 Slick JS 库对我来说一直运行良好，除了一个令人讨厌的、错误的实例。我的四张幻灯片的滑块（删除了无限循环，因此它更像是一个滑块而不是轮播）是在 Bootstrap 模式中实现的。单击按钮以调出模态框后，很明显所有 Slick 幻灯片的所有内容都在第一张幻灯片上堆叠并相互重叠。奇怪的是，一个修复似乎正在调整浏览器窗口的大小。窗口调整大小事件似乎会适当地调整滑块，以便第一张幻灯片仅显示其内容。我相信我将能够实现窗口调整大小事件的触发，但这个解决方案似乎......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>
【问题讨论】：
您可以使用slickSlider.slick('setPosition') 强制轮播重新计算其大小（我相信这是在调整窗口大小时在内部触发的，正如您所发现的）。以我的经验，这个问题总是由轮播在隐藏时被初始化引起的，所以你的选择是手动刷新提到的大小，或者在打开模式时初始化轮播。
谢谢，这绝对是答案。
【参考方案1】：
感谢有用的评论，我能够找到合适的解决方案。将div.modal-content 的visibility 样式更改为hidden。然后将以下事件处理程序添加到脚本中：
$('#exampleModal').on('shown.bs.modal', (event) =>
$slickSlider.slick('setPosition');
$('.modal-content').css('visibility', 'visible');
);
这允许.slick('setPosition') 在内容不可见时运行，从而避免用户看到滑块在模式中自行调整大小。然后再次使内容可见。
【讨论】：
以上是关于光滑的轮播 JS 库在第一张幻灯片上堆叠所有内容的主要内容，如果未能解决你的问题，请参考以下文章
我正在尝试将 Vue 数据实现到 Bootstrap 轮播中