The Slick JS library for carousels and sliders has been working well for me aside from one irritating, buggy instance. My slider of four slides (removed infinite looping so it's more a slider than a carousel) is implemented within a Bootstrap modal. Upon clicking the button to bring the modal up, it's clear that all the content of all the Slick slides is stacked and overlapped upon one another on the first slide. Strangely, a fix seems to be resizing the browser window. A window resize event seems to adjust the slider appropriately so that the first slide only shows its content. I believe I would be able to implement the triggering of a window resize event, but this solution seems...janky. Is there any ideas for solutions that seem more suitable, e.g. passing in an init object to the slick initialization method that fixes the problem at its source?
I've seen similar questions on Stack Overflow and GitHub, but none of the provided solutions seems to work for me.
<!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>
Thanks to the helpful comment, I was able to find a suitable solution. Change the visibility style of div.modal-content to hidden. Then add the following event handler to the script:
$('#exampleModal').on('shown.bs.modal', (event) => {
$slickSlider.slick('setPosition');
$('.modal-content').css('visibility', 'visible');
});
This allows .slick('setPosition') to run when the content is invisible which avoids the user seeing the slider resize itself within the modal. Then make the content visible once again.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments