Replace Carousel Arrow

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by Kyle Mitofsky

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
    <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://lorempixel.com/1280/1024/technics" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Sign up today</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="http://lorempixel.com/1280/1024/technics" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Learn more</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="http://lorempixel.com/1280/1024/abstract" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel"...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
/* GLOBAL STYLES */
/* Padding below the footer and lighter body text */

    body {
      padding-bottom: 40px;
      color: #5a5a5a;
    }


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 60px;
}

.carousel .container {
  position: relative;
  z-index: 9;
}

.carousel-control {
  height: 80px;
  margin-top: 0;
  font-size: 120px;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background-color: transparent;
  border: 0;
  z-index: 10;
}

.carousel .item {
  height: 500px;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

.carousel-caption {
  background-color: transparent;
  position: static;
  max-width: 550px;
  padding: 0 20px;
  margin-top: 200px;
}
.carousel-caption h1,
.carousel-caption .lead {
  margin: 0;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
  margin-top: 10px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 979px) {

.container.navbar-wrapper {
      margin-bottom: 0;
      width: auto;
    }
    .navbar-inner {
    border-radius: 0;
    margin: -20px 0;
  }
  
  .carousel .item {
  height: 500px;
}
.carousel img {
  width: auto;
  height: 500px;
}

.featurette {
  height: auto;
  padding: 0;
}
.featurette-image.pull-left,
.featurette-image.pull-right {
  display: block;
  float: none;
  max-width: 40%;
  margin: 0 auto 20px;
}
}


@media (max-width: 767px) {

.navbar-inner {
    margin: -20px;
  }
  
  .carousel {
  margin-left: -20px;
  margin-right: -20px;
}
.carousel .container {
  
}
.carousel .item {
  height: 300px;
}
.carousel img {
  height: 300px;
}
.carousel-caption {
  width: 65%;
  padding: 0 70px;
  margin-top: 100px;
}
.carousel-caption h1 {
  font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
 ...