<link rel="stylesheet" href="http://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" /> <script src="http://bootstraptema.ru/plugins/jquery/jquery-1.11.3.min.js"></script> <script src="http://bootstraptema.ru/plugins/2015/b-v3-3-6/bootstrap.min.js"></script> <style> body{background:url(http://bootstraptema.ru/images/bg/bg-4.png)} .carousel { margin-top: 20px; } .item .thumb { width: 25%; cursor: pointer; float: left; } .item .thumb img { width: 100%; margin: 2px; } .item img { width: 100%; } </style> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div id="carousel" class="carousel slide" data-interval="3000" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-1-.jpg"> </div> <div class="item"> <img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-2-.jpg"> </div> <div class="item"> <img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-3-.jpg"> </div> <div class="item"> <img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-4-.jpg"> </div> <div class="item"> <img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-5-.jpg"> </div> <div class="item"> <img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-6-.jpg"> </div> <div class="item"> <img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-7-.jpg"> </div> <div class="item"> <img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-8-.jpg"> </div> </div> </div> <div class="clearfix"> <div id="thumbcarousel" class="carousel slide" data-interval="12000" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-1-.jpg"></div> <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-2-.jpg"></div> <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-3-.jpg"></div> <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-4-.jpg"></div> </div> <div class="item"> <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-5-.jpg"></div> <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-6-.jpg"></div> <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-7-.jpg"></div> <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-8-.jpg"></div> </div> </div> <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div><!-- /.row --> </div><!-- /.container --> <div class="modal fade bs-example-modal-lg" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <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> <h4 class="modal-title" id="myModalLabel">Modal Name</h4> </div> <div class="modal-body"> <img src="" class="imagepreview" style="width: 100%;" /> </div> </div> </div> </div> <script> $(function() { $('.item').on('click', function() { $('.imagepreview').attr('src', $(this).find('img').attr('src')); $('#imagemodal').modal('show'); }); }); </script>