Slick Carousel Opens Synced Bootstrap Modal

index.html

<div class="slider-nav">
<div data-toggle="modal" data-target="#myModal"><img src="http://placehold.it/390x245&text=1" alt=""></div>
<div data-toggle="modal" data-target="#myModal"><img src="http://placehold.it/390x245&text=2" alt=""></div>
<div data-toggle="modal" data-target="#myModal"><img src="http://placehold.it/390x245&text=3" alt=""></div>
<div data-toggle="modal" data-target="#myModal"><img src="http://placehold.it/390x245&text=4" alt=""></div>
<div data-toggle="modal" data-target="#myModal"><img src="http://placehold.it/390x245&text=5" alt=""></div>
<div data-toggle="modal" data-target="#myModal"><img src="http://placehold.it/390x245&text=6" alt=""></div>
<div data-toggle="modal" data-target="#myModal"><img src="http://placehold.it/390x245&text=7" alt=""></div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        
      </div>
      <div class="modal-body">
        <div class="slider-for">
          
<div><img src="http://placehold.it/600x400&text=1" alt=""></div>
<div><img src="http://placehold.it/600x400&text=2" alt=""></div>
<div><img src="http://placehold.it/600x400&text=3" alt=""></div>
<div><img src="http://placehold.it/600x400&text=4" alt=""></div>
<div><img src="http://placehold.it/600x400&text=5" alt=""></div>
<div><img src="http://placehold.it/600x400&text=6" alt=""></div>
<div><img src="http://placehold.it/600x400&text=7" alt=""></div>
      </div>
      </div>
    </div>
  </div>
</div>

script.js

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  centerMode: true,
  focusOnSelect: true,
  initialSlide: 2,
  arrows: true
});


				

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script>

slick-carousel-opens-synced-bootstrap-modal.markdown

Slick Carousel Opens Synced Bootstrap Modal

A Pen by Cody McAfee on CodePen.

License.

style.less

.slider-nav img {
  max-width: 100%;
}
.slider-for img {
  width: 100%;
}

.slider-nav slick-slide:hover {
  cursor: pointer;
}


.slick-prev, .slick-next {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: 0;
  &:before {
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    display: block;
    height: 60px;
    opacity: 1;
    width: 30px;
  }
  &:hover:before {
    opacity: .8;
  }
}

.slick-prev {
  left: 0;
  &:before {
    background-image: url("http://www.flagshipsd.com/sites/default/files/userfiles/images/slick-prev.png");
  }
}

.slick-next {
  right: 0;
  &:before {
    background-image: url("http://www.flagshipsd.com/sites/default/files/userfiles/images/slick-next.png");
  }
}
.modal-content {
  background-color: rgba(0, 0, 0, 0);
  border: 0 none;
  border-radius: 0;
  margin-left: 1px;
  .modal-body {
    padding: 0;
    iframe {
      margin-bottom: -5px;
    }
  }
  .modal-header {
    border: 0 none;
    height: 0;
    min-height: 0;
    padding: 0;
    .close {
      background-color: #000000 !important;
      border: 2px solid #ffffff !important;
      border-radius: 13px;
      color: #ffffff;
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 20px;
      font-weight: 700;
      height: 26px;
      opacity: 1;
      padding-bottom: 0;
      position: absolute;
      right: -13px;
      text-shadow: none;
      top: -13px;
      width: 26px;
      z-index: 1;
    }
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.5/slick.css" rel="stylesheet" />