Есть slick
слайдер, который хочу вызывать в модальном окне bootstrap
.
Как это сделать? Проблема в том, что слайдер не инициализируется..
Код
$('#modal-gallery').on('shown.bs.modal', function() {
$('#gallery-slider').not('.slick-initialized').slick();
});
$('#modal-gallery').on('hidden.bs.modal', function() {
$('#gallery-slider').slick('unslick').empty();
});
$('#gallery-slider').slick({
arrows: true,
prevArrow: '<button type="button" class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></button>',
nextArrow: '<button type="button" class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></button>',
dots: false,
infinite: true,
adaptiveHeight: true
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<a href="" data-toggle="modal" data-target="#modal-gallery"><img class="img-fluid rounded" src="http://placehold.it/150x100/2ecc71/ecf0f1" alt="gallery 1" width="370" height="249"></a>
<div id="modal-gallery" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="ModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-body">
<div id="gallery-slider-wrapper" class="container">
<div id="gallery-slider">
<div><img class="img-fluid" src="http://placehold.it/600x400/2ecc71/ecf0f1" alt="slide 1"></div>
<div><img class="img-fluid" src="http://placehold.it/600x400/2ecc71/ecf0f1" alt="slide 1"></div>
<div><img class="img-fluid" src="http://placehold.it/600x400/2ecc71/ecf0f1" alt="slide 1"></div>
</div>
</div>
</div>
</div>
</div>