如何在一排显示更多轮播? [英] How to display more carousels in one row?
本文介绍了如何在一排显示更多轮播?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想建立一个图片库.每张图片将代表一组图像.我有点意识到解决这个问题的好办法是:每个图像都将触发一个模态，而在模态内部，我将轮播放置在其他图像将要显示的位置.但是我遇到了一个问题，我无法使旋转木马正常工作(它们嵌入在一行中).请检查jsfiddle以获取更多信息: https://jsfiddle.net/r0ukv00d/4/
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>
推荐答案
下面给出的是现代的实现方法.您可以参考此链接，以获取有关动态创建模式的方法的更多详细信息.否则，我会完成message或msg中的javascript代码以动态生成所有内容，因此，如果您将所有内容存储在数据库中，则只需要在其中创建一个类似的json并在此处进行解析就可以了.添加和删除图像，国家也将变得容易.
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屋！
查看全文
