Запустить
<!doctype html> <html lang="ru"> <head> <title>Bootstrap 3 - Carousel (пример работы с событиями)</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- Контент страницы --> <div class="container text-center"> <h1 class="h3 mt-5 mb-1">Bootstrap 3 - Carousel (карусель)</h1> <h2 class="lead mt-0 mb-5">пример работы с событиями</h2> <div class="row"> <div class="col-6"> <div id="carousel" class="carousel slide" data-ride="carousel" style="display: inline-block;"> <!-- Индикаторы --> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div id="slide_1" class="item active"> <img src="/examples/images/c-1.jpg" alt="..."> </div> <div id="slide_2" class="item"> <img src="/examples/images/c-2.jpg" alt="..."> </div> <div id="slide_3" class="item"> <img src="/examples/images/c-3.jpg" alt="..."> </div> </div> <!-- Элементы управления --> <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Предыдущий</span> </a> <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Следующий</span> </a> </div> <ul class="info text-left"></ul> </div> <div class="col-6"> <ul class="log text-left" style="height: 200px; overflow-y: auto;"></ul> </div> </div> </div> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-3.3.1.min.js"></script> <!-- Bootstrap --> <script src="/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script> <script> $(function () { var t = function () { var now = new Date(); var m = now.getMinutes(); var s = now.getSeconds(); if (m < 10) m = '0' + m; if (s < 10) s = '0' + s; return m + ':' + s; }; $('#carousel').on('slide.bs.carousel', function (e) { $('.log').prepend('<li>' + t() + ' - slide.bs.carousel</li>'); var to, from; var count = $(e.relatedTarget).parent().find('.item').length - 1; $(e.relatedTarget).parent().find('.item').each(function (index, element) { if (element === e.relatedTarget) { to = index; } }); if (e.direction === "left") { from = (to === 0) ? count : to - 1; } else { from = (to === count) ? 0 : to + 1; } var info = '<li><b>direction</b> = ' + e.direction + '</li>'; info += '<li><b>DOM-элемент</b> = ' + $(e.relatedTarget).attr('id') + '</li>'; info += '<li><b>from</b> = ' + from + '</li>'; info += '<li><b>to</b> = ' + to + '</li>'; $('.info').html(info); }); $('#carousel').on('slid.bs.carousel', function (e) { $('.log').prepend('<li>' + t() + ' - slid.bs.carousel</li>'); }); }); </script> </body> </html>