Responsive Multi Item Carousel in Bootstrap 3 (a fork of https://codepen.io/mephysto/pen/ZYVKRY and optimized for responsive design and flexible active items)

responsive-multi-item-carousel.css

/**
compiled for max 12 active items 
**/
@media (max-width: 767px) {
  .xs-items-1 .carousel-inner .active.left {
    left: -100%;
  }
  .xs-items-1 .carousel-inner .active.right {
    left: 100%;
  }
  .xs-items-1 .carousel-inner .next {
    left: 100%;
  }
  .xs-items-1 .carousel-inner .prev {
    left: -100%;
  }

  .xs-items-2 .carousel-inner .active.left {
    left: -50%;
  }
  .xs-items-2 .carousel-inner .active.right {
    left: 50%;
  }
  .xs-items-2 .carousel-inner .next {
    left: 50%;
  }
  .xs-items-2 .carousel-inner .prev {
    left: -50%;
  }

  .xs-items-3 .carousel-inner .active.left {
    left: -33.33333%;
  }
  .xs-items-3 .carousel-inner .active.right {
    left: 33.33333%;
  }
  .xs-items-3 .carousel-inner .next {
    left: 33.33333%;
  }
  .xs-items-3 .carousel-inner .prev {
    left: -33.33333%;
  }

  .xs-items-4 .carousel-inner .active.left {
    left: -25%;
  }
  .xs-items-4 .carousel-inner .active.right {
    left: 25%;
  }
  .xs-items-4 .carousel-inner .next {
    left: 25%;
  }
  .xs-items-4 .carousel-inner .prev {
    left: -25%;
  }

  .xs-items-5 .carousel-inner .active.left {
    left: -20%;
  }
  .xs-items-5 .carousel-inner .active.right {
    left: 20%;
  }
  .xs-items-5 .carousel-inner .next {
    left: 20%;
  }
  .xs-items-5 .carousel-inner .prev {
    left: -20%;
  }

  .xs-items-6 .carousel-inner .active.left {
    left: -16.66667%;
  }
  .xs-items-6 .carousel-inner .active.right {
    left: 16.66667%;
  }
  .xs-items-6 .carousel-inner .next {
    left: 16.66667%;
  }
  .xs-items-6 .carousel-inner .prev {
    left: -16.66667%;
  }

  .xs-items-7 .carousel-inner .active.left {
    left: -14.28571%;
  }
  .xs-items-7 .carousel-inner .active.right {
    left: 14.28571%;
  }
  .xs-items-7 .carousel-inner .next {
    left: 14.28571%;
  }
  .xs-items-7 .carousel-inner .prev {
    left: -14.28571%;
  }

  .xs-items-8 .carousel-inner .active.left {
    left: -12.5%;
  }
  .xs-items-8 .carousel-inner .active.right {
    left: 12.5%;
  }
  .xs-items-8 .carousel-inner .next {
    left: 12.5%;
  }
  .xs-items-8 .carousel-inner .prev {
    left: -12.5%;
  }

  .xs-items-9 .carousel-inner .active.left {
    left: -11.11111%;
  }
  .xs-items-9 .carousel-inner .active.right {
    left: 11.11111%;
  }
  .xs-items-9 .carousel-inner .next {
    left: 11.11111%;
  }
  .xs-items-9 .carousel-inner .prev {
    left: -11.11111%;
  }

  .xs-items-10 .carousel-inner .active.left {
    left: -10%;
  }
  .xs-items-10 .carousel-inner .active.right {
    left: 10%;
  }
  .xs-items-10 .carousel-inner .next {
    left: 10%;
  }
  .xs-items-10 .carousel-inner .prev {
    left: -10%;
  }

  .xs-items-11 .carousel-inner .active.left {
    left: -9.09091%;
  }
  .xs-items-11 .carousel-inner .active.right {
    left: 9.09091%;
  }
  .xs-items-11 .carousel-inner .next {
    left: 9.09091%;
  }
  .xs-items-11 .carousel-inner .prev {
    left: -9.09091%;
  }

  .xs-items-12 .carousel-inner .active.left {
    left: -8.33333%;
  }
  .xs-items-12 .carousel-inner .active.right {
    left: 8.33333%;
  }
  .xs-items-12 .carousel-inner .next {
    left: 8.33333%;
  }
  .xs-items-12 .carousel-inner .prev {
    left: -8.33333%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .sm-items-1 .carousel-inner .active.left {
    left: -100%;
  }
  .sm-items-1 .carousel-inner .active.right {
    left: 100%;
  }
  .sm-items-1 .carousel-inner .next {
    left: 100%;
  }
  .sm-items-1 .carousel-inner .prev {
    left: -100%;
  }

  .sm-items-2 .carousel-inner .active.left {
    left: -50%;
  }
  .sm-items-2 .carousel-inner .active.right {
    left: 50%;
  }
  .sm-items-2 .carousel-inner .next {
    left: 50%;
  }
  .sm-items-2 .carousel-inner .prev {
    left: -50%;
  }

  .sm-items-3 .carousel-inner .active.left {
    left: -33.33333%;
  }
  .sm-items-3 .carousel-inner .active.right {
    left: 33.33333%;
  }
  .sm-items-3 .carousel-inner .next {
    left: 33.33333%;
  }
  .sm-items-3 .carousel-inner .prev {
    left: -33.33333%;
  }

  .sm-items-4 .carousel-inner .active.left {
    left: -25%;
  }
  .sm-items-4 .carousel-inner .active.right {
    left: 25%;
  }
  .sm-items-4 .carousel-inner .next {
    left: 25%;
  }
  .sm-items-4 .carousel-inner .prev {
    left: -25%;
  }

  .sm-items-5 .carousel-inner .active.left {
    left: -20%;
  }
  .sm-items-5 .carousel-inner .active.right {
    left: 20%;
  }
  .sm-items-5 .carousel-inner .next {
    left: 20%;
  }
  .sm-items-5 .carousel-inner .prev {
    left: -20%;
  }

  .sm-items-6 .carousel-inner .active.left {
    left: -16.66667%;
  }
  .sm-items-6 .carousel-inner .active.right {
    left: 16.66667%;
  }
  .sm-items-6 .carousel-inner .next {
    left: 16.66667%;
  }
  .sm-items-6 .carousel-inner .prev {
    left: -16.66667%;
  }

  .sm-items-7 .carousel-inner .active.left {
    left: -14.28571%;
  }
  .sm-items-7 .carousel-inner .active.right {
    left: 14.28571%;
  }
  .sm-items-7 .carousel-inner .next {
    left: 14.28571%;
  }
  .sm-items-7 .carousel-inner .prev {
    left: -14.28571%;
  }

  .sm-items-8 .carousel-inner .active.left {
    left: -12.5%;
  }
  .sm-items-8 .carousel-inner .active.right {
    left: 12.5%;
  }
  .sm-items-8 .carousel-inner .next {
    left: 12.5%;
  }
  .sm-items-8 .carousel-inner .prev {
    left: -12.5%;
  }

  .sm-items-9 .carousel-inner .active.left {
    left: -11.11111%;
  }
  .sm-items-9 .carousel-inner .active.right {
    left: 11.11111%;
  }
  .sm-items-9 .carousel-inner .next {
    left: 11.11111%;
  }
  .sm-items-9 .carousel-inner .prev {
    left: -11.11111%;
  }

  .sm-items-10 .carousel-inner .active.left {
    left: -10%;
  }
  .sm-items-10 .carousel-inner .active.right {
    left: 10%;
  }
  .sm-items-10 .carousel-inner .next {
    left: 10%;
  }
  .sm-items-10 .carousel-inner .prev {
    left: -10%;
  }

  .sm-items-11 .carousel-inner .active.left {
    left: -9.09091%;
  }
  .sm-items-11 .carousel-inner .active.right {
    left: 9.09091%;
  }
  .sm-items-11 .carousel-inner .next {
    left: 9.09091%;
  }
  .sm-items-11 .carousel-inner .prev {
    left: -9.09091%;
  }

  .sm-items-12 .carousel-inner .active.left {
    left: -8.33333%;
  }
  .sm-items-12 .carousel-inner .active.right {
    left: 8.33333%;
  }
  .sm-items-12 .carousel-inner .next {
    left: 8.33333%;
  }
  .sm-items-12 .carousel-inner .prev {
    left: -8.33333%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .md-items-1 .carousel-inner .active.left {
    left: -100%;
  }
  .md-items-1 .carousel-inner .active.right {
    left: 100%;
  }
  .md-items-1 .carousel-inner .next {
    left: 100%;
  }
  .md-items-1 .carousel-inner .prev {
    left: -100%;
  }

  .md-items-2 .carousel-inner .active.left {
    left: -50%;
  }
  .md-items-2 .carousel-inner .active.right {
    left: 50%;
  }
  .md-items-2 .carousel-inner .next {
    left: 50%;
  }
  .md-items-2 .carousel-inner .prev {
    left: -50%;
  }

  .md-items-3 .carousel-inner .active.left {
    left: -33.33333%;
  }
  .md-items-3 .carousel-inner .active.right {
    left: 33.33333%;
  }
  .md-items-3 .carousel-inner .next {
    left: 33.33333%;
  }
  .md-items-3 .carousel-inner .prev {
    left: -33.33333%;
  }

  .md-items-4 .carousel-inner .active.left {
    left: -25%;
  }
  .md-items-4 .carousel-inner .active.right {
    left: 25%;
  }
  .md-items-4 .carousel-inner .next {
    left: 25%;
  }
  .md-items-4 .carousel-inner .prev {
    left: -25%;
  }

  .md-items-5 .carousel-inner .active.left {
    left: -20%;
  }
  .md-items-5 .carousel-inner .active.right {
    left: 20%;
  }
  .md-items-5 .carousel-inner .next {
    left: 20%;
  }
  .md-items-5 .carousel-inner .prev {
    left: -20%;
  }

  .md-items-6 .carousel-inner .active.left {
    left: -16.66667%;
  }
  .md-items-6 .carousel-inner .active.right {
    left: 16.66667%;
  }
  .md-items-6 .carousel-inner .next {
    left: 16.66667%;
  }
  .md-items-6 .carousel-inner .prev {
    left: -16.66667%;
  }

  .md-items-7 .carousel-inner .active.left {
    left: -14.28571%;
  }
  .md-items-7 .carousel-inner .active.right {
    left: 14.28571%;
  }
  .md-items-7 .carousel-inner .next {
    left: 14.28571%;
  }
  .md-items-7 .carousel-inner .prev {
    left: -14.28571%;
  }

  .md-items-8 .carousel-inner .active.left {
    left: -12.5%;
  }
  .md-items-8 .carousel-inner .active.right {
    left: 12.5%;
  }
  .md-items-8 .carousel-inner .next {
    left: 12.5%;
  }
  .md-items-8 .carousel-inner .prev {
    left: -12.5%;
  }

  .md-items-9 .carousel-inner .active.left {
    left: -11.11111%;
  }
  .md-items-9 .carousel-inner .active.right {
    left: 11.11111%;
  }
  .md-items-9 .carousel-inner .next {
    left: 11.11111%;
  }
  .md-items-9 .carousel-inner .prev {
    left: -11.11111%;
  }

  .md-items-10 .carousel-inner .active.left {
    left: -10%;
  }
  .md-items-10 .carousel-inner .active.right {
    left: 10%;
  }
  .md-items-10 .carousel-inner .next {
    left: 10%;
  }
  .md-items-10 .carousel-inner .prev {
    left: -10%;
  }

  .md-items-11 .carousel-inner .active.left {
    left: -9.09091%;
  }
  .md-items-11 .carousel-inner .active.right {
    left: 9.09091%;
  }
  .md-items-11 .carousel-inner .next {
    left: 9.09091%;
  }
  .md-items-11 .carousel-inner .prev {
    left: -9.09091%;
  }

  .md-items-12 .carousel-inner .active.left {
    left: -8.33333%;
  }
  .md-items-12 .carousel-inner .active.right {
    left: 8.33333%;
  }
  .md-items-12 .carousel-inner .next {
    left: 8.33333%;
  }
  .md-items-12 .carousel-inner .prev {
    left: -8.33333%;
  }
}
@media (min-width: 1200px) {
  .lg-items-1 .carousel-inner .active.left {
    left: -100%;
  }
  .lg-items-1 .carousel-inner .active.right {
    left: 100%;
  }
  .lg-items-1 .carousel-inner .next {
    left: 100%;
  }
  .lg-items-1 .carousel-inner .prev {
    left: -100%;
  }

  .lg-items-2 .carousel-inner .active.left {
    left: -50%;
  }
  .lg-items-2 .carousel-inner .active.right {
    left: 50%;
  }
  .lg-items-2 .carousel-inner .next {
    left: 50%;
  }
  .lg-items-2 .carousel-inner .prev {
    left: -50%;
  }

  .lg-items-3 .carousel-inner .active.left {
    left: -33.33333%;
  }
  .lg-items-3 .carousel-inner .active.right {
    left: 33.33333%;
  }
  .lg-items-3 .carousel-inner .next {
    left: 33.33333%;
  }
  .lg-items-3 .carousel-inner .prev {
    left: -33.33333%;
  }

  .lg-items-4 .carousel-inner .active.left {
    left: -25%;
  }
  .lg-items-4 .carousel-inner .active.right {
    left: 25%;
  }
  .lg-items-4 .carousel-inner .next {
    left: 25%;
  }
  .lg-items-4 .carousel-inner .prev {
    left: -25%;
  }

  .lg-items-5 .carousel-inner .active.left {
    left: -20%;
  }
  .lg-items-5 .carousel-inner .active.right {
    left: 20%;
  }
  .lg-items-5 .carousel-inner .next {
    left: 20%;
  }
  .lg-items-5 .carousel-inner .prev {
    left: -20%;
  }

  .lg-items-6 .carousel-inner .active.left {
    left: -16.66667%;
  }
  .lg-items-6 .carousel-inner .active.right {
    left: 16.66667%;
  }
  .lg-items-6 .carousel-inner .next {
    left: 16.66667%;
  }
  .lg-items-6 .carousel-inner .prev {
    left: -16.66667%;
  }

  .lg-items-7 .carousel-inner .active.left {
    left: -14.28571%;
  }
  .lg-items-7 .carousel-inner .active.right {
    left: 14.28571%;
  }
  .lg-items-7 .carousel-inner .next {
    left: 14.28571%;
  }
  .lg-items-7 .carousel-inner .prev {
    left: -14.28571%;
  }

  .lg-items-8 .carousel-inner .active.left {
    left: -12.5%;
  }
  .lg-items-8 .carousel-inner .active.right {
    left: 12.5%;
  }
  .lg-items-8 .carousel-inner .next {
    left: 12.5%;
  }
  .lg-items-8 .carousel-inner .prev {
    left: -12.5%;
  }

  .lg-items-9 .carousel-inner .active.left {
    left: -11.11111%;
  }
  .lg-items-9 .carousel-inner .active.right {
    left: 11.11111%;
  }
  .lg-items-9 .carousel-inner .next {
    left: 11.11111%;
  }
  .lg-items-9 .carousel-inner .prev {
    left: -11.11111%;
  }

  .lg-items-10 .carousel-inner .active.left {
    left: -10%;
  }
  .lg-items-10 .carousel-inner .active.right {
    left: 10%;
  }
  .lg-items-10 .carousel-inner .next {
    left: 10%;
  }
  .lg-items-10 .carousel-inner .prev {
    left: -10%;
  }

  .lg-items-11 .carousel-inner .active.left {
    left: -9.09091%;
  }
  .lg-items-11 .carousel-inner .active.right {
    left: 9.09091%;
  }
  .lg-items-11 .carousel-inner .next {
    left: 9.09091%;
  }
  .lg-items-11 .carousel-inner .prev {
    left: -9.09091%;
  }

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

responsive-multi-item-carousel.js

jQuery(function ($) {
    // Instantiate the Bootstrap carousel
    $('.multi-item-carousel').carousel({
        interval: false
    });

    // for every slide in carousel, copy the next slide's item in the slide.
    // Do the same for the next, next item.
    function initMultiItemCarousels($) {
        $('.multi-item-carousel').each(function () {
            var parent = $(this), actives = 1, helper = "xs-items-3", bodyWidth = $("body").width(), screenSizes = ["xs"], finalHelper = {};
            if (bodyWidth >= 768) {
                screenSizes.push("sm");
            }
            if (bodyWidth >= 992) {
                screenSizes.push("md");
            }
            if (bodyWidth >= 1200) {
                screenSizes.push("lg");
            }
            screenSizes.reverse();
            if (parent.attr("class").length) {
                helper = parent.attr("class");
            }
            var patt = /(xs|sm|md|lg)\-items\-(\d+)/ig, item;
            while (item = patt.exec(helper)) {
                finalHelper[item[1].toLocaleLowerCase()] = item[2];
            }
            for (var x in screenSizes) {
                if (finalHelper.hasOwnProperty(screenSizes[x])) {
                    actives = finalHelper[screenSizes[x]];
                    break;
                }
            }
            if (actives > 0) {
                $('.item', parent).each(function () {
                    var obj = $(this), next = obj, num = actives;
                    
                    // remove old cloned items if exists
                    obj.children().filter(":gt(0)").remove();
                    while (num > 1) {
                        num--;
                        next = next.next();
                        if (!next.length) {
                            next = $('.item', parent).eq(0);
                        }
                        next.children(':first-child').clone().appendTo(obj);
                    }
                });
            }
        });
    }

    // initial setup
    initMultiItemCarousels($);
    
    // re setup in screen resizes
    $.timeoutMultiItemCarousels = null;
    $(window).resize(function () {
        if ($.timeoutMultiItemCarousels) {
            clearTimeout($.timeoutMultiItemCarousels);
        }
        $.timeoutMultiItemCarousels = setTimeout(function () {
            initMultiItemCarousels($);
        }, 200);
    });
});

responsive-multi-item-carousel.scss

@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;
    }
  }
}

sample1.html

<!-- 
There is:
1 active items in extra small screens
2 active items in small screens
3 active items in medium screens
4 active items in large screens
-->
<div class="carousel slide multi-item-carousel xs-items-1 sm-items-2 md-items-3 lg-items-4" id="sample1">
    <div class="carousel-inner">
        <div class="item active">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <a href="#">
                    <img src="http://placehold.it/300/f44336/000000" class="img-responsive">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <a href="#">
                    <img src="http://placehold.it/300/e91e63/000000" class="img-responsive">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <a href="#">
                    <img src="http://placehold.it/300/9c27b0/000000" class="img-responsive">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <a href="#">
                    <img src="http://placehold.it/300/673ab7/000000" class="img-responsive">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <a href="#">
                    <img src="http://placehold.it/300/4caf50/000000" class="img-responsive">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <a href="#">
                    <img src="http://placehold.it/300/8bc34a/000000" class="img-responsive">
                </a>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#sample1" data-slide="prev">
        <i class="glyphicon glyphicon-chevron-left"></i>
    </a>
    <a class="right carousel-control" href="#sample1" data-slide="next">
        <i class="glyphicon glyphicon-chevron-right"></i>
    </a>
</div>

sample2.html

<!-- 
There is:
3 active items in extra small and small screens
4 active items in medium screens
6 active items in large screens
-->
<div class="carousel slide multi-item-carousel xs-items-3 md-items-4 lg-items-6" id="sample2">
    <div class="carousel-inner">
        <div class="item active">
            <div class="col-xs-4 col-md-3 col-lg-2">
                <a href="#">
                    <img src="http://placehold.it/300/f44336/000000" class="img-responsive">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-4 col-md-3 col-lg-2">
                <a href="#">
                    <img src="http://placehold.it/300/e91e63/000000" class="img-responsive">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-4 col-md-3 col-lg-2">
                <a href="#">
                    <img src="http://placehold.it/300/9c27b0/000000" class="img-responsive">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-4 col-md-3 col-lg-2">
                <a href="#">
                    <img src="http://placehold.it/300/673ab7/000000" class="img-responsive">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-4 col-md-3 col-lg-2">
                <a href="#">
                    <img src="http://placehold.it/300/4caf50/000000" class="img-responsive">
                </a>
            </div>
        </div>
        <div class="item">
            <div class="col-xs-4 col-md-3 col-lg-2">
                <a href="#">
                    <img src="http://placehold.it/300/8bc34a/000000" class="img-responsive">
                </a>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#sample2" data-slide="prev">
        <i class="glyphicon glyphicon-chevron-left"></i>
    </a>
    <a class="right carousel-control" href="#sample2" data-slide="next">
        <i class="glyphicon glyphicon-chevron-right"></i>
    </a>
</div>