ashleshajs/ashlesha/public/static/bootstrap/less/carousel.less

AshleshaJS is a framework to build high performance and maintainable single page web applications. It uses ExpressJS and YUI3 as foundation. It is tightly coupled with Twitter Bootstrap for the CSS framework but you can use any other framework as well.

// CAROUSEL
// --------

.carousel {
  position: relative;
  margin-bottom: @baseLineHeight;
  line-height: 1;
}

.carousel-inner {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.carousel {

  .item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);
  }

  // Account for jankitude on images
  .item > img {
    display: block;
    line-height: 1;
  }

  .active,
  .next,
  .prev { display: block; }

  .active {
    left: 0;
  }

  .next,
  .prev {
    position: absolute;
    top: 0;
    width: 100%;
  }

  .next {
    left: 100%;
  }
  .prev {
    left: -100%;
  }
  .next.left,
  .prev.right {
    left: 0;
  }

  .active.left {
    left: -100%;
  }
  .active.right {
    left: 100%;
  }

}

// Left/right controls for nav
// ---------------------------

.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  color: @white;
  text-align: center;
  background: @grayDarker;
  border: 3px solid @white;
  .border-radius(23px);
  .opacity(50);

  // we can't have this transition here
  // because webkit cancels the carousel
  // animation if you trip this while
  // in the middle of another animation
  // ;_;
  // .transition(opacity .2s linear);

  // Reposition the right one
  &.right {
    left: auto;
    right: 15px;
  }

  // Hover state
  &:hover {
    color: @white;
    text-decoration: none;
    .opacity(90);
  }
}

// Caption for text below images
// -----------------------------

.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 15px 5px;
  background: @grayDark;
  background: rgba(0,0,0,.75);
}
.carousel-caption h4,
.carousel-caption p {
  color: @white;
}