Bootstrap - für jedes Karussellelement ein anderes Intervall einstellen [duplizieren]
Diese Frage hat hier bereits eine Antwort:
Unterschiedliche Foliendauer für jedes Element im Bootstrap 3.1-Karussell 4 AntwortenHi Ich habe ein Karussell auf Bootstrap und möchte jedes Element auf ein anderes Intervall einstellen, sodass das erste Element im Grunde eine Dauer von 10 Sekunden, das zweite 5 Sekunden, das dritte 3 Sekunden usw. usw. haben kann ..
Daher habe ich beschlossen, ein Datenattribut wie dieses zu verwenden
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2" ></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" data-interval="8000">
<img src="carousel/icon_1.jpg" />
<div class="carousel-caption">
<h2 class="carousel-title">Welcome to My Site</h2>
<p class="carousel-text">Lorem ipsum dolor sit amet</p>
<p class="carousel-text">Lorem ipsum dolor sit amet</p>
</div>
</div><!-- /.item -->
<div class="item" data-interval="4000">
<img src="carousel/icon_2.jpg" />
<div class="carousel-caption">Lorem ipsum dolor sit amet</div>
</div><!-- /.item -->
<div class="item" data-interval="4000">
<img src="carousel/icon_3.jpg" />
<div class="carousel-caption">Lorem ipsum dolor sit amet</div>
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
</div> <!-- Carousel -->
<script type="text/javascript">
$(document).ready(function () {
// more scripts here ...
// the main part
var t;
var start = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000);
$('#myCarousel').on('slid.bs.carousel', function () {
clearTimeout(t);
var duration = $(this).find('.active').attr('data-interval');
$('#myCarousel').carousel('pause');
t = setTimeout("$('#myCarousel').carousel();", duration-1000);
});
});
</script>
für den Fall, dass ich in Zukunft ein Zeitintervall ändern muss. Das Problem ist, dass alle Folien das gleiche Intervall anwenden (ca. 2 oder 1 Sek.). Wie kann ich das beheben?