Slick slider inside modal bootstrap
Full silk slider code is here :
HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Slick slider inside modal bootstrap</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css'>
<link rel='stylesheet' href='https://kenwheeler.github.io/slick/slick/slick-theme.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
open slick slider inside modal bootstrap
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">slick slider inside modal bootstrap</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="wrap-modal-slider">
<div class="your-class">
<div class="coln"><img src="https://dummyimage.com/600x400/000/fff" alt="" style="width: 300px;"></div>
<div class="coln"><img src="https://dummyimage.com/600x400/000/fff" alt="" style="width: 300px;"></div>
</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">Save changes</button>
</div>
</div>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js'></script><script src="./script.js"></script>
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 15px;
}
.modal-dialog {
max-width: 730px;
}
.wrap-modal-slider {
padding: 0 30px;
opacity: 0;
transition: all 0.3s;
}
.wrap-modal-slider.open {
opacity: 1;
}
.slick-prev:before, .slick-next:before {
color: red;
}
JS:
$(document).ready(function(){
$('.your-class').slick({
slidesToShow:2,
slidesToScroll:1,
autoplay: true,
autoplaySpeed: 3000,
arrows: true,
});
});
$('.modal').on('shown.bs.modal', function (e) {
$('.your-class').slick('setPosition');
$('.wrap-modal-slider').addClass('open');
})
How to Slick slider inside modal bootstrap
Reviewed by TechTubeHQ
on
September 11, 2022
Rating:
Reviewed by TechTubeHQ
on
September 11, 2022
Rating:
No comments: