Carousel w/ Twig

carousel.css

.carousel {
  height: 50%;
}
.item,
.active,
.carousel-inner {
  height: 100%;
}
.fill {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  -o-background-size: cover;
}
.carousel-control.left {
  background-image: none;
  width: 54px;
  height: 54px;
  top: 50%;
  left: 20px;
  margin-top: -27px;
  line-height: 54px;
  border: 0 none;
  opacity: 2;
  text-shadow: none;
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}
.carousel-control.right {
  background-image: none;
  width: 54px;
  height: 54px;
  top: 50%;
  right: 20px;
  margin-top: -27px;
  line-height: 54px;
  border: 0 none;
  opacity: 2;
  text-shadow: none;
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}
.carousel-indicators {
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
.carousel-indicators li {
  background: #c0c0c0;
}
.carousel-indicators .active {
  background: #1f1f21;
}
.carousel-indicators li {
  border: 0 none;
}
.carousel-control.right:hover,
.carousel-control.left:hover {
  opacity: 0.56;
  border: 1px solid #fff;
}
.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-control {
  z-index: 2;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

carousel.styl

.carousel
  height 50%
  
.item,
.active,
.carousel-inner
  height 100%

.fill
  width 100%
  height 100%
  background-position center
  -webkit-background-size cover
  -moz-background-size cover
  background-size cover
  -o-background-size cover

.carousel-control
  &.left
    background-image none
    width 54px
    height 54px
    top 50%
    left 20px
    margin-top -27px
    line-height 54px
    border 0 none
    opacity 2
    text-shadow none
    -webkit-transition all 0.2s ease-in-out 0s
    -o-transition all 0.2s ease-in-out 0s
    transition all 0.2s ease-in-out 0s
  &.right
    background-image none
    width 54px
    height 54px
    top 50%
    right 20px
    margin-top -27px
    line-height 54px
    border 0 none
    opacity 2
    text-shadow none
    -webkit-transition all 0.2s ease-in-out 0s
    -o-transition all 0.2s ease-in-out 0s
    transition all 0.2s ease-in-out 0s

.carousel-indicators
  right 50%
  top auto
  bottom 0px
  margin-right -19px
  li
    background $gris
  .active
    background $negro

.carousel-indicators li
  border: 0 none

.carousel-control.right:hover,
.carousel-control.left:hover
  opacity .56
  border 1px solid #fff

.carousel-fade
  .carousel-inner
    .item
      -webkit-transition-property opacity
      transition-property opacity
  .carousel-control
    z-index 2

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right
  opacity 0

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right
  opacity 1

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right
  left 0
  -webkit-transform translate3d(0, 0, 0)
  transform translate3d(0, 0, 0)

carousel.twig

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
    {# Indicators #}
    <ol class="carousel-indicators">
        {% for image in images %}
            {% if loop.first %}{% set active = 'active' %}{% else %}{% set active = '' %}{% endif %}
            <li data-target="#carousel-{{ name }}" data-slide-to="{{ loop.index0 }}" class="{{ active }}"></li>
        {% endfor %}
    </ol>

    {# Wrapper for slides #}
    <div class="carousel-inner" role="listbox">
        {% for image in images %}
            {% if loop.first %}{% set active = 'active' %}{% else %}{% set active = '' %}{% endif %}
            <div class="item {{ active }}">
                <img src="img/slider/{{ image.filename }}" alt="{{ image.title }}">
                <!-- div class="carousel-caption">{{ image.title }}</div -->
            </div>
        {% endfor %}
    </div>
    {# Controls #}
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <i class="fa fa-chevron-left"></i>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <i class="fa fa-chevron-right"></i>
    </a>
</div>