我正在尝试为我的画廊实现一个简单的模态。在页面的顶部我正在实现一个幻灯片旋转木马，而在它的底部有画廊的缩略图。
我的问题是，虽然幻灯片旋转木马控制按钮工作得很好，但画廊却没有。应该有一个＆gt;的Glyphicon。和＆lt;但相反，它们显示为下一个＆gt;＆gt; 和上一个＆lt;＆lt; 文字
我的代码对于图库来说是这样的：
<section class="bg-dark" id="gall">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading"><i class="fa fa-1x fa-picture-o wow bounceIn text-primary"></i> Workshop Gallery </h2>
<hr class="primary">
</div>
</div>
<ul class="row">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/1.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/2.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/3.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/4.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/5.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/6.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/7.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/8.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/9.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/10.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/11.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/12.jpg">
</li>
</ul>
</div> <!-- /container -->
<div class="modal fade modal-fullscreen force-fullscreen" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div id="modalCarousel" class="carousel">
<div class="carousel-inner"></div>
<a class="carousel-control left" href="#modalCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</section>
我的自定义CSS是：
/*Gallery */
#gall ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
#gall ul li {
list-style:none;
margin-bottom:25px;
}
#gall ul li img {
cursor: pointer;
}
#gall .modal-body {
padding:5px !important;
}
#gall .modal-content {
border-radius:0;
}
#gall .modal-dialog img {
text-align:center;
margin:0 auto;
}
#gall .controls{
width:50px;
display:block;
font-size:11px;
padding-top:8px;
font-weight:bold;
}
#gall .next {
float:right;
text-align:right;
}
/* End of Gallery */
/* Carousel */
.main-container {
padding: 40px 15px;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
.carousel-indicators {
bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
background-image: none;
}
.carousel .item {
min-height: 350px;
height: 100%;
width:100%;
}
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption button {
background-color: #CCCCCC;
}
.carousel-caption h3 {
padding: .5em;
}
.carousel .icon-container {
display: inline-block;
font-size: 25px;
line-height: 25px;
padding: 1em;
text-align: center;
border-radius: 50%;
}
.carousel-caption button {
border-color: #00bfff;
margin-top: 1em;
}
/* Animation delays */
.carousel-caption h3:first-child {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.carousel-caption button {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
/* End of Carousel */
javascript就是这样：
$(document).ready(function(){
$('li img').on('click',function(){
var src = $(this).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';
//start of new code new code
var index = $(this).parent('li').index();
var html = '';
html += img;
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls next" href="'+ (index+2) + '">next »</a>';
html += '<a class="controls previous" href="' + (index) + '">« prev</a>';
html += '</div>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(html);
//new code
$('a.controls').trigger('click');
})
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
});
})
$(document).on('click', 'a.controls', function(){
var index = $(this).attr('href');
var src = $('ul.row li:nth-child('+ index +') img').attr('src');
$('.modal-body img').attr('src', src);
var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if($(this).hasClass('previous')){
$(this).attr('href', newPrevIndex);
$('a.next').attr('href', newNextIndex);
}else{
$(this).attr('href', newNextIndex);
$('a.previous').attr('href', newPrevIndex);
}
var total = $('ul.row li').length + 1;
//hide next button
if(total === newNextIndex){
$('a.next').hide();
}else{
$('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
$('a.previous').hide();
}else{
$('a.previous').show()
}
return false;
});
继续截图：
我认为旋转木马控制有问题吗？任何建议将不胜感激......
答案 0 :(得分：0)
在您的Javascript中，导航的附加控件没有正确的glyphicon类。
应该是：
var html = '';
html += img;
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls next glyphicon glyphicon-chevron-right" href="'+ (index+2) + '"></a>';
html += '<a class="controls prev glyphicon glyphicon-chevron-left " href="' + (index) + '"></a>';
html += '</div>';
我建议在两个控件类中添加一个自定义类，以确保字体大小合适。