Это не совсем прямой ответ, но я не думаю, что есть событие pause как таковое, но вы можете обнаружить события slide.bs.carousel и slid.bs.carousel.Здесь, когда он сдвинулся, я делаю паузу и запускаю пользовательское событие pause-detect.
Что хорошего в этом?Если вам известны события, которые вызывают паузу (например, «mouseenter»), вы можете отслеживать это событие и запускать в нем настраиваемое событие.
Обновление: в качестве примера добавлено событие паузы mouseenter по умолчанию,прокомментировал событие скольжения, когда эта вызванная пауза.
$('#carouselExampleIndicators').carousel();
$('#carouselExampleIndicators')
.on('slid.bs.carousel', function(event) {
// do something…
let mycar = $(this);
// mycar.carousel("pause");
let currentSlide = $(event.relatedTarget);
/* mycar.trigger('pause-detect', [{
slide: currentSlide
}]);
*/
}).on('mouseenter', function(event) {
let mycar = $(this);
let currentSlide = mycar.find('.active');
mycar.trigger('pause-detect', [{
slide: currentSlide
}]);
}).on('pause-detect', function(event, mycarousel) {
// let mycar = $(this);
// let elemEvents = $._data(mycar.get(0), "events");
// console.log(elemEvents);
console.log("paused:", event.target); // carousel element
console.log("slide:", mycarousel.slide.get(0), mycarousel.slide.find('img').attr('alt'));
});
.carousel-item {
height: 200px;
border: solid lime 1px;
background-color: #AADDFF;
color: blue;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> mytext
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>