@mixin multiItemCarousel($list: (("xs", 0, 767), ("sm", 768, 991), ("md", 992, 1199), ("xs", 1200, 0)), $actives: 12) {
  @each $item in $list {
    $media: "(min-width: " + nth($item , 2) + ") and (max-width: " + nth( $item, 3) + ")";
    @if nth($item , 2) < 1 {
      $media: "(max-width: " + nth( $item, 3) + ")";
    } @else if nth($item , 3) < 1 {
      $media: "(min-width: " + nth($item , 2) + ")";
    }
    @media #{$media} {
      @for $i from 1 through $actives {
        $size: 100 / $i;
        $selector: "." + nth($item, 1) + "-items-" + $i;
        #{$selector} {
          .carousel-inner {
            .active {
              &.left {
                left: $size * -1%;
              }
              &.right {
                left: $size * 1%;
              }
            }
            .next {
              left: $size * 1%;
            }
            .prev {
              left: $size * -1%;
            }
          }
        }
      }
    }
  }
}

@include multiItemCarousel();

.multi-item-carousel {
  .carousel-inner {
    > .item {
      transition: 500ms ease-in-out left;
    }
    @media all and (transform-3d), (-webkit-transform-3d) {
      > .item {
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none !important;
      }
    }
  }
  .carousel-control {
    &.left, &.right {
      background-image: none;
    }
  }
}