如何在一行中显示更多轮播?
[英] How to display more carousels in one row?
本文介绍了如何在一行中显示更多轮播?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想建立一个图片库.每张图片将代表一组图像.我有点意识到一个很好的解决方案是这样的:每个图像都会触发一个模态，在模态内部我会把轮播放在其他图像将被显示的地方.但是我遇到了一个问题，我无法使转盘正常工作(它们嵌入在一行中).请查看 jsfiddle 了解更多信息:https://jsfiddle.net/r0ukv00d/4/>
<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" 数据-target="#myModal"><h5>单击图像，您将能够看到来自冰岛的图像.<div id="myModal" class="modalfade"><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 class="modal-body"><!-- 模态内容--><div id="carousel-1" class="carousel slide" data-ride="carousel"><!-- 指标--><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><!-- 幻灯片包装器--><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">冰岛1
<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 class="item"><img src="http://querzy.com/wp-content/uploads/2016/06/iceland.jpg" alt="..."><div class="carousel-caption">冰岛3
<!-- 控件--><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">以前的</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">下一步</span></a>
<!--/.modal-content -->
<!--/.modal-dialog -->
<!--/.modal -->
<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>单击图像，您将能够看到来自巴西的图像.<h3 style="color:red">第二个旋转木马不工作！它显示的是来自冰岛而不是巴西的图片！<div id="myModal" class="modalfade"><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 class="modal-body"><!-- 模态内容--><div id="carousel-2" class="carousel slide" data-ride="carousel"><!-- 指标--><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><!-- 幻灯片包装器--><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">巴西1
<div class="item"><img src="http://www.sportiputovanja.hr/wp-content/uploads/2016/12/RIO-BEACH.jpg" alt="..."><div class="carousel-caption">巴西2
<div class="item"><img src="http://riotimesonline.com/wp-content/uploads/2014/01/Fernando-Maia-Riotur.png" alt="..."><div class="carousel-caption">巴西3
<!-- 控件--><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">以前的</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">下一步</span></a>
<!--/.modal-content -->
<!--/.modal-dialog -->
<!--/.modal -->
解决方案
下面给出了现代的解决方案.您可以参考此链接，了解有关动态创建模态的方式的更多详细信息.否则，message 或 msg 中的 javascript 代码由我完成以动态生成所有内容，以便如果您已将所有内容存储在数据库中，您只需在那里创建一个类似的 json并在这里解析它，你就完成了.添加删除图片，国家也容易也容易.
var countryjson={列表 : [{name : '冰岛',img_path : 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg',其他图片:[{image_path : 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg',image_title: '标题在这里.',image_caption : '这是冰岛的第一张图片，这是它的标题',},{image_path : 'http://www.icelandprocruises.co.uk/media/img/gallery/home/0002-gallery-iceland-waterfall-1.jpg',image_title: '标题在这里.',image_caption : '这是冰岛的第二张图片，这是它的标题',},{image_path : 'http://querzy.com/wp-content/uploads/2016/06/iceland.jpg',image_title: '标题在这里.',image_caption : '这是冰岛的第三张图片，这是它的标题',}]},{name : '巴西',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',其他图片:[{图像路径:'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: '标题在这里.',image_caption : '这是冰岛的第一张图片，这是它的标题',},{image_path : 'http://www.sportiputovanja.hr/wp-content/uploads/2016/12/RIO-BEACH.jpg',image_title: '标题在这里.',image_caption : '这是冰岛的第二张图片，这是它的标题',},{image_path : 'http://riotimesonline.com/wp-content/uploads/2014/01/Fernando-Maia-Riotur.png',image_title: '标题在这里.',image_caption : '这是冰岛的第三张图片，这是它的标题',}]}]}函数 loadCountries(){for(i=0;i<countryjson.list.length;i++){var countrybean=countryjson.list[i];var msg='';msg+='';msg+=' <div class="panel panel-default" onclick="showModal('+i+')">';msg+='
';msg+=' <img src="'+countrybean.img_path+'" class="adjust-img" alt="'+countrybean.name+'图片">';msg+='</div>';msg+=' <div class="panel-footer" align="center">'+countrybean.name+'</div>';msg+='</div>';msg+='
';$('#country_list').append(msg);}}功能 showModal(country_id){BootstrapDialog.show({title: '+countryjson.list[country_id].name 的其他图片，消息:功能(对话){var 消息 ='';var ol_list='';var image_list='';var corosol_id='myCarousel_'+country_id;var countrybean=countryjson.list[country_id];for(i=0;i';image_list+=' <img src="'+imagebean.image_path+'" alt="'+imagebean.image_title+'" >';image_list+='
';回消息；}});}$(document).ready(function(){加载国家()；});
.adjust-img{宽度:100%；高度:300px；}
<!-- 最新编译和缩小的 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+QkPxCAFlNEevognV="cross-awesome.min.css"匿名"><!-- jQuery 库--><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><!-- 最新编译的 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">
I want to build an image gallery. Each picture would represent set of images. I kind of realized that nice solution to that would be this: each image would trigger a modal, and inside of a modal I would put carousel where other images would be displayed. But I ran into a problem, I am not able to make carousels to work properly (they are embedded in one row). Please check jsfiddle for more info: 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>
解决方案
Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically. Else then that javascript code in either message or msg is done by me to dynamically generate everything so that if you have stored everything in database you just have to create a similar json there and parse it here and you are done. Adding and deleting images,country will also be easy will also be easy.
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>
这篇关于如何在一行中显示更多轮播?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
