/sass/bootstrap/_carousel.scss

  1// CAROUSEL
  2// --------
  3
  4.carousel {
  5  position: relative;
  6  margin-bottom: $baseLineHeight;
  7  line-height: 1;
  8}
  9
 10.carousel-inner {
 11  overflow: hidden;
 12  width: 100%;
 13  position: relative;
 14}
 15
 16.carousel {
 17
 18  .item {
 19    display: none;
 20    position: relative;
 21    @include transition(.6s ease-in-out left);
 22  }
 23
 24  // Account for jankitude on images
 25  .item > img {
 26    display: block;
 27    line-height: 1;
 28  }
 29
 30  .active, .next, .prev { display: block; }
 31
 32  .active {
 33    left: 0;
 34  }
 35
 36  .next, .prev {
 37    position: absolute;
 38    top: 0;
 39    width: 100%;
 40  }
 41
 42  .next {
 43    left: 100%;
 44  }
 45  .prev {
 46    left: -100%;
 47  }
 48  .next.left, .prev.right {
 49    left: 0;
 50  }
 51
 52  .active.left {
 53    left: -100%;
 54  }
 55  .active.right {
 56    left: 100%;
 57  }
 58
 59}
 60
 61// Left/right controls for nav
 62// ---------------------------
 63
 64.carousel-control {
 65  position: absolute;
 66  top: 40%;
 67  left: 15px;
 68  width: 40px;
 69  height: 40px;
 70  margin-top: -20px;
 71  font-size: 60px;
 72  font-weight: 100;
 73  line-height: 30px;
 74  color: $white;
 75  text-align: center;
 76  background: $grayDarker;
 77  border: 3px solid $white;
 78  @include border-radius(23px);
 79  @include opacity(0.5);
 80
 81  // we can't have this transition here
 82  // because webkit cancels the carousel
 83  // animation if you trip this while
 84  // in the middle of another animation
 85  // ;_;
 86  // @include transition(opacity .2s linear);
 87
 88  // Reposition the right one
 89  &.right {
 90    left: auto;
 91    right: 15px;
 92  }
 93
 94  // Hover state
 95  &:hover {
 96    color: $white;
 97    text-decoration: none;
 98    @include opacity(0.9);
 99  }
100}
101
102// Caption for text below images
103// -----------------------------
104
105.carousel-caption {
106  position: absolute;
107  left: 0;
108  right: 0;
109  bottom: 0;
110  padding: 10px 15px 5px;
111  background: $grayDark;
112  background: rgba(0,0,0,.75);
113}
114.carousel-caption h4, .carousel-caption p {
115  color: $white;
116}