如何在一行中显示更多轮播？

Question

我想建立一个图片库。每张图片将代表一组图像。我有点意识到一个很好的解决方案是这样的：每个图像都会触发一个模态，并且在模态内部我会将轮播放置在显示其他图像的位置。但是我遇到了一个问题，我无法使轮播正常工作（它们嵌入在一行中）。更多信息请查看 jsfiddle：https://jsfiddle.net/r0ukv00d/4/

<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">&times;</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">&times;</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>

Answer 1

您正在为两个图像调用相同的模型 ID。更新代码请见https://jsfiddle.net/r0ukv00d/5/

<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">&times;</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="#myModal1">
        <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="myModal1" 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">&times;</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>

Answer 2

下面给出的是现代的做法。您可以参考this link 了解动态创建模态的方式的更多详细信息。否则，message 或 msg 中的 javascript 代码由我完成以动态生成所有内容，因此如果您已将所有内容存储在数据库中，您只需在此处创建一个类似的 json 并在此处解析即可完成。添加和删​​除图片，国家也将变得容易也将变得容易。

var countryjson={
			
			list : [
				{
					name    : 'Iceland',
					img_path : 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg',
					otherimages : [
						{
							image_path : 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg',
							image_title: 'Title goes here.',
							image_caption : 'This is 1st image of iceland and this is its caption',
						},
						{
							image_path : 'http://www.icelandprocruises.co.uk/media/img/gallery/home/0002-gallery-iceland-waterfall-1.jpg',
							image_title: 'Title goes here.',
							image_caption : 'This is 2nd image of iceland and this is its caption',
						},
						{
							image_path : 'http://querzy.com/wp-content/uploads/2016/06/iceland.jpg',
							image_title: 'Title goes here.',
							image_caption : 'This is 3rd image of iceland and this is its caption',
						}
					]
				},
				{
					name    : 'Brazil',
					img_path : 'https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg',
					otherimages : [
						{
							image_path : 'https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg',
							image_title: 'Title goes here.',
							image_caption : 'This is 1st image of iceland and this is its caption',
						},
						{
							image_path : 'http://www.sportiputovanja.hr/wp-content/uploads/2016/12/RIO-BEACH.jpg',
							image_title: 'Title goes here.',
							image_caption : 'This is 2nd image of iceland and this is its caption',
						},
						{
							image_path : 'http://riotimesonline.com/wp-content/uploads/2014/01/Fernando-Maia-Riotur.png',
							image_title: 'Title goes here.',
							image_caption : 'This is 3rd image of iceland and this is its caption',
						}
					]
				}
			]
			
			
			
		}
		
		
		function loadCountries()
		{
		
			for(i=0;i<countryjson.list.length;i++)
			{
				var countrybean=countryjson.list[i];
				
				var msg='';
				msg+='<div class="col-sm-3">';
				msg+='	<div class="panel panel-default" onclick="showModal('+i+')">';
				msg+='		<div class="panel-body">';
				msg+='			<img src="'+countrybean.img_path+'" class="adjust-img" alt="'+countrybean.name+' Image">';
				msg+='		</div>';
				msg+='		<div class="panel-footer" align="center">'+countrybean.name+'</div>';
				msg+='	</div>';
				msg+='</div>';
				
				$('#country_list').append(msg);
				
			}
		}
		
		
		function showModal(country_id){
		
			BootstrapDialog.show({
				title: 'Other images of '+countryjson.list[country_id].name,
				message: function(dialog) {
					
					var message ='';
					var ol_list='';
					var image_list='';
					var corosol_id='myCarousel_'+country_id;
					
					
					var countrybean=countryjson.list[country_id];
					
					for(i=0;i<countrybean.otherimages.length;i++)
					{
						var imagebean=countrybean.otherimages[i];
						ol_list+='<li data-target="#'+corosol_id+'" data-slide-to="'+i+'" '+ (i==0?'class="active"':'') +'></li>';
						image_list+='<div class="item '+ (i==0?'active':'') +'">';
						image_list+='	<img src="'+imagebean.image_path+'" alt="'+imagebean.image_title+'" >';
						image_list+='	<div class="carousel-caption">';
						image_list+='		<h3>'+imagebean.image_title+'</h3>';
						image_list+='		<p>'+imagebean.image_caption+'</p>';
						image_list+='	</div>';
						image_list+='</div>';
					}
					
					message+='<div id="'+corosol_id+'" class="carousel slide" data-ride="carousel">';
					message+='	<!-- Indicators -->';
					message+='	<ol class="carousel-indicators">'+ol_list+'</ol>';
					
					message+='	<!-- Wrapper for slides -->';
					message+='	<div class="carousel-inner" role="listbox">'+image_list+'</div>';
					
					message+='	<!-- Left and right controls -->';
					message+='	<a class="left carousel-control" href="#'+corosol_id+'" role="button" data-slide="prev">';
					message+='		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>';
					message+='		<span class="sr-only">Previous</span>';
					message+='	</a>';
					message+='	<a class="right carousel-control" href="#'+corosol_id+'" role="button" data-slide="next">';
					message+='		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>';
					message+='		<span class="sr-only">Next</span>';
					message+='	</a>';
					message+='</div>';
					
					return message;
				}
			});
		
		}
		
		
		$(document).ready(function(){
			loadCountries();
		});

.adjust-img
		{
			width : 100%;
			height : 300px;
		}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>


<div class="container-fluid">
		<div clas="rows" id="country_list">
		</div>
	</div>