1
Ich möchte eine Bildergalerie erstellen. Jedes Bild würde eine Gruppe von Bildern darstellen. Ich erkannte, dass das eine gute Lösung wäre: Jedes Bild würde ein Modal auslösen, und innerhalb eines Modales würde ich ein Karussell platzieren, wo andere Bilder angezeigt würden. Aber ich stieß auf ein Problem, ich bin nicht in der Lage, Karussells richtig funktionieren zu lassen (sie sind in einer Reihe eingebettet). Bitte überprüfen Sie jsfiddle für weitere Informationen: https://jsfiddle.net/r0ukv00d/4/Wie werden mehr Karussells in einer Zeile angezeigt?
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg" height="42" width="42" data-toggle="modal" data-target="#myModal"><h5>
Click on the image and you will be able to see images from Iceland.
</h5>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<!-- Modal content-->
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg" alt="...">
<div class="carousel-caption"> Iceland1 </div>
</div>
<div class="item"> <img src="http://www.icelandprocruises.co.uk/media/img/gallery/home/0002-gallery-iceland-waterfall-1.jpg" alt="...">
<div class="carousel-caption">Iceland2 </div>
</div>
<div class="item"> <img src="http://querzy.com/wp-content/uploads/2016/06/iceland.jpg" alt="...">
<div class="carousel-caption"> Iceland3 </div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="right carousel-control" href="#carousel-1" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<div class="col-md-6 col-sm-6 col-xs-12"> <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg" height="42" width="42" data-toggle="modal" data-target="#myModal">
<h5>
Click on the image and you will be able to see images from Brazil.
</h5>
<h3 style="color:red">
Second carousel is not working! It shows pictures from Iceland instead of Brazil!
</h3>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<!-- Modal content-->
<div id="carousel-2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-2" data-slide-to="1"></li>
<li data-target="#carousel-2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg" alt="...">
<div class="carousel-caption"> Brazil1 </div>
</div>
<div class="item"> <img src="http://www.sportiputovanja.hr/wp-content/uploads/2016/12/RIO-BEACH.jpg" alt="...">
<div class="carousel-caption"> Brazil2 </div>
</div>
<div class="item"> <img src="http://riotimesonline.com/wp-content/uploads/2014/01/Fernando-Maia-Riotur.png" alt="...">
<div class="carousel-caption"> Brazil3 </div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-2" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="right carousel-control" href="#carousel-2" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</div>
</div>
Das ist sehr ordentlich! Vielen Dank für die detaillierte Wiedergabe, da Datenbankproblem sowieso meine nächste Frage sein würde. Ich werde versuchen, es so umzusetzen! –