Bootstrap как сделать слайдер изображений в модальном окне?

Question

[roma4ever2012]

Добрый день!
Увеличиваю изображения таким образом: https://jsfiddle.net/4gW4y/823/

<div class="row">
  
  <div class="col-sm-6 col-md-4 col-lg-3"> 
    <a href="#" class="thumbnail">
       <img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
    </a>
  </div>
  
  <div class="col-sm-6 col-md-4 col-lg-3"> 
    <a href="#" class="thumbnail">
       <img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
    </a>
  </div>
  
</div>
 
<div class="modal fade" id="image-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">Г—</span></button>
        <div class="modal-title">Просмотр изображения</div>
      </div>
      <div class="modal-body">
        <img class="img-responsive center-block" src="" alt="">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

$(function() {     
  $('a.thumbnail').click(function(e) {
    e.preventDefault();
    $('#image-modal .modal-body img').attr('src', $(this).find('img').attr('src'));
    $("#image-modal").modal('show');
  });
  $('#image-modal .modal-body img').on('click', function() {
    $("#image-modal").modal('hide')
  });
});

Подскажите, как передать в модальное окно сразу несколько изображений. т.е:

<a href="#" class="thumbnail">
       <img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
       <img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
       <img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
    </a>

Чтобы на странице отображалось только первая картинка, а в модальном окне все 3 можно было слайдером переключать между собой. Как это можно сделать?

Answer 1

[Stalker_RED]

let foo = `<div class="mySlideshow">
       <img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
       <img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
       <img src="https://cdn.wallpapersafari.com/15/32/0IAiM3.jpg">
    </div>`


// заталкиваем в модалку любой html код
$('#image-modal .modal-body').html(foo)
// вот здесь нужно запустить слайдер!!!1
// и показываем модалку
$("#image-modal").modal('hide')
// возможно в другом порядке
// не знаю какой у вас слайдер и запустится ли он нормально в скрытом виде.

Answer 2

[Николай]

https://codepen.io/krnlde/pen/pGijB