如何在一行中显示多个轮播？
How to display more carousels in one row?
我想建立一个图片库。每张图片将代表一组图像。我有点意识到一个很好的解决方案是这样的：每个图像都会触发一个模态，然后在模态内部我会把轮播放在显示其他图像的地方。但是我 运行 遇到了一个问题，我无法使轮播正常工作（它们嵌入在一行中）。请检查 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">×</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>
您为两张图片调用了相同的模型 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">×</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">×</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>
下面给出的是现代的实现方式。您可以参考 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>
我想建立一个图片库。每张图片将代表一组图像。我有点意识到一个很好的解决方案是这样的：每个图像都会触发一个模态，然后在模态内部我会把轮播放在显示其他图像的地方。但是我 运行 遇到了一个问题，我无法使轮播正常工作（它们嵌入在一行中）。请检查 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">×</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>
您为两张图片调用了相同的模型 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">×</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">×</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>
下面给出的是现代的实现方式。您可以参考 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>