现在我正在尝试设置某种推荐小部件。
我有一个带有大量文字的旋转木马和一个打开模态的链接。当我打开模态时，我希望旋转木马停止循环以打开模态。
到目前为止，我已尝试过bootstrap文档中的pause和interval选项。以及通过添加/更改数据属性interval="false"
直播示例： https://codepen.io/anon/pen/QrYNQM
<div class="row">
<div class="col-4">
<!-- WIDGET -->
<aside class="card widget-card widget-feedback">
<header class="card-header">
<h4 class="h5 m-0 card-heading"><span class="text-primary">Deine</span> Meinung zählt</h4>
<div class="carousel-controls">
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Vor</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Zurück</span>
</a>
</div><!-- /.carousel-controls -->
</header><!-- /.card-header -->
<div class="card-body">
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-feedback-latest-tab" data-toggle="pill" href="#pills-feedback-latest" role="tab" aria-controls="pills-feedback-latest" aria-selected="true"><span class="fas fa-clock pr-2"></span>Neueste</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-feedback-add-new-tab" data-toggle="pill" href="#pills-feedback-add-new" role="tab" aria-controls="pills-feedback-add-new" aria-selected="false"><span class="fas fa-plus-circle pr-2"></span>Feedback abgeben</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-feedback-latest" role="tabpanel" aria-labelledby="pills-feedback-latest-tab">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-12">
<div class="tm-h mb-0 p-2 hero">
<p class="mb-0 pt-2 pr-2 pb-0 pl-2"><span class="fas fa-quote-left pr-2 text-primary"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum <a class="open-modal-stop-carousel" href="#" data-toggle="modal" data-target="#feedback-expanded-id">[...]</a><span class="fas fa-quote-right pl-2 text-primary"></span></p>
</div>
</div>
<div class="col-12">
<div class="tm-f p-2">
<div class="row my-2 mx-1">
<div class="col-4 d-flex align-items-center">
<div class="">
<img src="http://placeimg.com/70/70/people" class="img-fluid -circle border border-default" alt="" />
</div>
</div>
<div class="col-8">
<span><span class="fab fa-facebook pr-1"></span>Gabriella Luisa Wagner <small>vor 12 Tagen</small></span>
<ul class="mb-0 list-inline list-unstyled">
<li class="list-inline-item m-0" style="font-size: small">
<span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star-half pr-2"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12">
<div class="tm-h mb-0 p-2 hero">
<p class="mb-0 pt-2 pr-2 pb-0 pl-2"><span class="fas fa-quote-left pr-2 text-primary"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a class="open-modal-stop-carousel" href="#" data-toggle="modal" data-target="#feedback-expanded-id">[...]</a><span class="fas fa-quote-right pl-2 text-primary"></span></p>
</div>
</div>
<div class="col-12">
<div class="tm-f p-2">
<div class="row my-2 mx-1">
<div class="col-4 d-flex align-items-center">
<div class="">
<img src="http://placeimg.com/70/70/people" class="img-fluid -circle border border-default" alt="" />
</div>
</div>
<div class="col-8">
<span><span class="fab fa-facebook pr-1"></span>Gabriella Luisa Wagner <small>vor 12 Tagen</small></span>
<ul class="mb-0 list-inline list-unstyled">
<li class="list-inline-item m-0" style="font-size: small">
<span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star-half pr-2"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-feedback-add-new" role="tabpanel" aria-labelledby="pills-feedback-add-new-tab">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div><!-- /. card-body -->
</aside><!-- /. xxx -->
<!-- END WIDGET -->
<!-- Modal -->
<div class="modal fade" id="feedback-expanded-id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Feedback von Gabriella Luisa Wagner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="tm-h mb-0 p-2 hero">
<p class="mb-0 pt-2 pr-2 pb-0 pl-2"><span class="fas fa-quote-left pr-2 text-primary"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="fas fa-quote-right pl-2 text-primary"></span></p>
</div>
</div>
<div class="col-12">
<div class="tm-f p-2">
<div class="row my-2 mx-1">
<div class="col-4 d-flex align-items-center">
<div class="">
<img src="http://placeimg.com/70/70/people" class="img-fluid -circle border border-default" alt="" />
</div>
</div>
<div class="col-8">
<span><span class="fab fa-facebook pr-1"></span>Gabriella Luisa Wagner <small class="d-block">vor 12 Tagen</small></span>
<ul class="mb-0 list-inline list-unstyled">
<li class="list-inline-item m-0" style="font-size: small">
<span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star pr-2"></span><span class="fas fa-star-half pr-2"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">schließen</button>
</div>
</div>
</div>
</div>
</div>
</div>
JS尝试一个
$(function () {
$('.open-modal-stop-carousel').on('click', function(){
$('#carouselExampleControls').data('interval', "false");
});
});
JS尝试两个
$(function () {
$('.open-modal-stop-carousel').on('click', function(){
$('#carouselExampleControls').carousel({
pause: true,
inverval: false
});
});
});
我的尝试都没有阻止旋转木马骑自行车。我不知道我错过了什么来阻止它。推动正确的方向。
答案 0 :(得分：1)
使用modal events shown.bs.modal 和 hidden.bs.modal ，以及carousel methods 暂停和周期
像这样：
$(function () {
$('#feedback-expanded-id').on('shown.bs.modal', function () {
$('#carouselExampleControls').carousel('pause');
});
$('#feedback-expanded-id').on('hidden.bs.modal', function () {
$('#carouselExampleControls').carousel('cycle');
});
});