Glyphicon вместо индикаторов карусели

Question

Я пытаюсь заменить круги индикаторов самонастройки некоторыми глификонами. Я попытался добавить глификон к индикатору карусели, но не работал. http://jsfiddle.net/bn6aA/57/

HTML

<div id="locations" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators glyphicon glyphicon-refresh"> 
       <li data-target="#locations" data-slide-to="0" class="active"></li> 
       <li data-target="#locations" data-slide-to="1"></li> 
       <li data-target="#locations" data-slide-to="2"></li> 
       <li data-target="#locations" data-slide-to="3"></li> 
      </ol> 

      <div class="carousel-inner"> 
       <div class="item active "> 
        <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> 
       </div> 

       <div class="item"> 
        <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> 
       </div> 

       <div class="item"> 
        <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> 
       </div> 

       <div class="item"> 
        <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt=""> 
       </div> 
      </div> 

      <a class="left carousel-control" href="#locations" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 
      <a class="right carousel-control" href="#locations" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 

     </div> 

Answer 1

Использование глификонов в качестве индикаторов карусели не так просто, потому что мы должны внести некоторые изменения.

Я удалил класс carousel-indicators из списка, я поместил глификоны внутри элементов списка custom-list и использовал свой класс custom-list для создания глифов.

Также я удалил импортированную библиотеку bootstrap-combined, потому что она испортила управление каруселями left и right.

Приведенный выше подход имеет одну отрицательную сторону, и мы не можем сгладить глификон, соответствующий текущему слайду active, потому что мы удалили класс carousel-indicators из списка. не

.custom-list li { 
 
    display: inline; 
 
    font-size: 40px; 
 
    color: #fff; 
 
} 
 
.custom-list li:hover { 
 
    color: #888; 
 
    cursor: pointer; 
 
} 
 
.item img { 
 
    width: 100%; 
 
} 
 
.custom-list { 
 
    top: 15px; 
 
    margin: auto; 
 
    position: absolute; 
 
    width: 50%; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    right: 15px; 
 
    z-index: 1; 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div id="locations" class="carousel slide" data-ride="carousel"> 
 
    <ol class="custom-list"> 
 
    <li data-target="#locations" data-slide-to="0" class="active"><span class="glyphicon glyphicon-th-large"></span> 
 
    </li> 
 
    <li data-target="#locations" data-slide-to="1"><span class="glyphicon glyphicon-th"></span> 
 
    </li> 
 
    <li data-target="#locations" data-slide-to="2"><span class="glyphicon glyphicon-th-list"></span> 
 
    </li> 
 
    <li data-target="#locations" data-slide-to="3"><span class="glyphicon glyphicon-list"></span> 
 
    </li> 
 
    </ol> 
 
    <div class="carousel-inner"> 
 
    <div class="item active "> 
 
     <img src="http://placehold.it/900x200?text=First slide" alt=""> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x200?text=Second slide" alt=""> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x200?text=Third slide" alt=""> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x200?text=Fourth slide" alt=""> 
 
    </div> 
 
    </div> 
 
    <a class="left carousel-control" href="#locations" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left"></span> 
 
    </a> 
 
    <a class="right carousel-control" href="#locations" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right"></span> 
 
    </a> 
 
</div>

Answer 2

Прямо с сайта начальной загрузки():

<!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 

Однако, что-то будет немного шаткий здесь, так что удалить круги, как это с помощью CSS

.carousel-control { 
    background: none !important; 
    border: none; 
} 

Про of: http://jsfiddle.net/bn6aA/65/

Как вы можете видеть, это по-прежнему не соответствует точно. Некоторые вещи неуместны и имеют слишком большой размер и т. Д. Это связано с тем, что вы используете bootstrap-combination.min.css V2.3.1 и bootstrap.css V3.0.0

Удаление результатов bootstrap-combination.min.css в гораздо лучшем решении: http://jsfiddle.net/bn6aA/64/