JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container" style="background-color:white; height:140px; padding-top:15px">
  <div class="row">
    <div class="col-xs-11 col-md-12 col-centered">
      <div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3500" id="myCarousel">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-md-2 col-sm-3 col-xs-6">
              <div>
                <a href="">
                  <img src="" class="img-responsive" style="max-width:100px; max-height:110px">
                </a>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="col-md-2 col-sm-3 col-xs-6">
              <a href="">
                <img src="" class="img-responsive" style="max-width:100px; max-height:110px">
              </a>
            </div>
          </div>
          <div class="item">
            <div class="col-md-2 col-sm-3 col-xs-6">
              <a href="{% url 'category-2' category2='fcb' %}">
                <img src="{% static 'logo/barcelona_logo.png' %}" class="img-responsive" style="max-width:100px; max-height:110px">
              </a>
            </div>
          </div>
          <div class="item">
            <div class="col-md-2 col-sm-3 col-xs-6">
              <a href="">
                <img src="" class="img-responsive" style="max-width:100px; max-height:110px">
              </a>
            </div>
          </div>
          <div class="item">
            <div class="col-md-2 col-sm-3 col-xs-6">
              <a href="">
                <img src="" class="img-responsive" style="max-width:100px; max-height:110px">
              </a>
            </div>
          </div>
          <div class="item">
            <div class="col-md-2 col-sm-3...

CSS

.carousel {
  background: pink;
}

.carousel-inner {
  margin: auto;
  width: 90%;
  background: coral;
}

.carousel-control {
  width: 4%;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

.glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  margin-top: -10px;
  margin-left: -10px;
  color: #444;
}

.carousel-inner {
  a {
    display: table-cell;
    height: 180px;
    width: 200px;
    vertical-align: middle;
  }
  
  .item {
    background: limegreen;
  }

  img {
    max-height: 150px;
    margin: auto auto;
    border: solid 1px black;
    max-width: 100%;
  }
}

@media (min-width: 992px) {

  .carousel-inner>.item.next,
  .carousel-inner>.item.active.right {
    left: 0;
    -webkit-transform: translate3d(16.7%, 0, 0);
    transform: translate3d(16.7%, 0, 0);
  }

  .carousel-inner>.item.prev,
  .carousel-inner>.item.active.left {
    left: 0;
    -webkit-transform: translate3d(-16.7%, 0, 0);
    transform: translate3d(-16.7%, 0, 0);
  }

}


@media (max-width: 992px) {

  .carousel-inner>.item.next,
  .carousel-inner>.item.active.right {
    left: 0;
    -webkit-transform: translate3d(25%, 0, 0);
    transform: translate3d(25%, 0, 0);
  }

  .carousel-inner>.item.prev,
  .carousel-inner>.item.active.left {
    left: 0;
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
  }
}

JavaScript

$('.carousel[data-type="multi"] .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    
    next.children(':first-child').clone().appendTo($(this));
  }
});