Как сделать слайдер в модальном окне в bootstrap?

Подскажите пожалуйста, можно ли сделать что бы слайдер открывался в модальном окне, и листать изображения таким образом, не как обычный слайдер на странице, а именно в модальном окне?

Нужно предварительно подключить 3 cdn:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">

И используя встроенные классы bootstrap3 строим вот такую конструкцию, которая работает как нужно:

.modal.and.carousel {
position: fixed;
}

Это единственный стиль который нужно прописать, так как слайдер сам перегружает свойство позиции его нужно задать.

Теперь html:

<div class="container">
<ul
class="nav nav-pills nav-stacked">

  • <a
  • href="#lightbox" data-toggle="modal">Open Lightbox
  • <a
  • href="#lightbox" data-toggle="modal" data-slide-to="1">2nd Image
  • <a
  • href="#lightbox" data-toggle="modal" data-slide-to="2">3rd Image
  • <a
  • href="#lightbox" data-toggle="modal" data-slide-to="15">Open non existing Image

    <div
    class="modal fade and carousel slide" id="lightbox">
    <div
    class="modal-dialog">
    <div
    class="modal-content">
    <div
    class="modal-body">
    <ol
    class="carousel-indicators">
    <li
    data-target="#lightbox" data-slide-to="0" class="active">
    <li
    data-target="#lightbox" data-slide-to="1">
    <li
    data-target="#lightbox" data-slide-to="2">

    <div
    class="carousel-inner">
    <div
    class="item active">
    <img
    src="http://placehold.it/900x500/777/" alt="First slide">

    <div
    class="item">
    <img
    src="http://placehold.it/900x500/666/" alt="Second slide">

    <div
    class="item">
    <img
    src="http://placehold.it/900x500/555/" alt="Third slide">
    <div
    class="carousel-caption">even with captions...




    <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev">
    <span
    class="glyphicon glyphicon-chevron-left">

    <a class="right carousel-control" href="#lightbox" role="button" data-slide="next">
    <span
    class="glyphicon glyphicon-chevron-right">