javascript - 轮播控件； glyphicon-chevron 显示不正确

Question

我正在尝试为我的画廊实现一个简单的模式。在页面顶部我实现了一个幻灯片轮播，而在它的底部有画廊的缩略图。

我的问题是，虽然幻灯片轮播控制按钮工作正常，但画廊却不行。应该有 > 和 < 的 Glyphicon，但它们显示为 Next>> 和 Prev<< Text

我的画廊代码看起来像这样:

<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 &raquo;</a>';
    html += '<a class="controls previous" href="' + (index) + '">&laquo; 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;
});

这是截图:

Screenshot

我认为轮播控件有问题？任何建议将不胜感激...

Answer 1

在您的 Javascript 中，附加的导航控件没有正确的字形图标类。

应该是:

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>';

我建议向两个控件类添加一个自定义类，以确保字体大小合适。