Модальный внутри карусели, чтобы остановить движение карусели, когда модальная открыта

63
7

Сейчас я пытаюсь настроить какой-то викториальный виджет.

У меня есть карусель с большим количеством текста и ссылкой, чтобы открыть модальный. Когда я открываю модальный режим, я хочу, чтобы карусель перестала ездить на велосипеде, пока курс модального не был открыт.

До сих пор я пробовал варианты pause и interval из документов начальной загрузки. Помимо попытки остановить карусель, добавив/изменив interval="false" атрибутов данных 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 attemp one

$(function () {

$('.open-modal-stop-carousel').on('click', function(){
$('#carouselExampleControls').data('interval', "false");
});

});

JS attemp два

$(function () {

$('.open-modal-stop-carousel').on('click', function(){
$('#carouselExampleControls').carousel({
pause: true,
inverval: false
});
});

});

Ни один из моих помощников не остановил карусель от езды на велосипеде. Я не уверен, что мне не хватает, чтобы остановить его. Приветствуется толчок в правильном направлении.

спросил(а) 2021-01-25T14:12:11+03:00 5 месяцев назад
1
Решение
63

Используйте модальные события show.bs.modal и hidden.bs.modal, а методы карусели - пауза и цикл

Как это:

$(function () {

$('#feedback-expanded-id').on('shown.bs.modal', function () {
$('#carouselExampleControls').carousel('pause');
});

$('#feedback-expanded-id').on('hidden.bs.modal', function () {
$('#carouselExampleControls').carousel('cycle');
});

});

ответил(а) 2021-01-25T14:12:11+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема