CODEWITHSUNDEEP
htmltwitter-bootstrap
RS92
RS92

Reputation: 485

Glyphicon instead of carousel indicators

I'm trying to replace bootstrap indicators circles with some glyphicons. I tried to add glyphicon to carousel indicator, but not working. 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>

Upvotes: 0

Views: 1146

Answers (2)

aleksandar
aleksandar

Reputation: 2399

Using glyphicons as carousel indicators is not such easy thing to do because we must do some modifications.

I removed the class carousel-indicators from the list, i put the glyphicons inside the custom-list list items, and used my custom-list class to style the glyphicons.

Also i removed the imported bootstrap-combined library because it was messing up the left and right carousel controls.

The above approach has one negative side which is we cannot style the glyphicon coresponding to the current active slide because we removed the carousel-indicators class from the list.

.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>

Upvotes: 2

JDrost1818
JDrost1818

Reputation: 1126

Straight from the bootstrap website (http://getbootstrap.com/javascript/#carousel): 

<!-- 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>

However, something is going a little wonky here, so remove the circles like this with CSS

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

Proof: http://jsfiddle.net/bn6aA/65/

As you can see, this is still not rendering exactly correct. Some things are out of place and sized too big etc... This is because you are using bootstrap-combined.min.css V2.3.1 and bootstrap.css V3.0.0

Removing bootstrap-combined.min.css results in a much better looking solution: http://jsfiddle.net/bn6aA/64/

Upvotes: 0

Related Questions