javascript - 轮播仅显示 1 div bootstrap 3 javascript

Question

我使用 bootstrap 3 和 javascript 创建了一个轮播。轮播完美无缺，唯一的问题是我打算显示三联显示（一次 3 个 div），但只有一个 div 显示。按钮可以向后和向前工作。为什么只显示一个 div 以及如何更改我的代码以便轮播类似于此示例？：https ://codepen.io/mephysto/pen/ZYVKRY

$( document ).ready(function() {
    $('.carosuelProperties').each(function() {
        var current = $(this);
        var image = current.find('img');
        current.css('background-image', 'url(' + image.attr('src') + ')');
    });
    $('.item:nth-child(1), .item:nth-child(2), .item:nth-child(3)').addClass('active');
});

$slides.on('mouseenter', _.debounce(function() {
}, 350));


$('#myCarousel').carousel({
  interval: 4000
});

$('.carousel .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));
  }

});

.caroImgClass {
  display: none;
}

.arrowOf {
    color: #008692!important;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin-top: -25px;
}

.arrowOf:hover {
    color: #000000!important;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.itemProperties {
  min-height: 300px;
  min-width: 300px;
  max-height: 300px;
  max-width: 300px;
  width: 20vw;
  border-radius: 20vw;
  background-color: #008692;
}

.carosuelProperties {
  min-height: 300px;
  min-width: 300px;
  max-height: 300px;
  max-width: 300px;
  width: 20vw;
  border-radius: 20vw;
    top: 0px;
  left: 0px;
  position: absolute;
  transition: .5s ease-in-out;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.carosuelProperties:hover {
    opacity: 0;
    transition: .5s ease-in-out;
}

@media only screen and (min-width: 1900px) {
.propertyTitleCaro {
    padding: 1vw;
    padding-bottom: 0;
    font-size: 1.5rem;
    font-weight: 1000;
    margin-top: 1.5vw;
}}

@media only screen and (max-width: 1900px) {
.propertyTitleCaro {
    font-size: 1.5rem;
    font-weight: 1000;
    margin-top: 3vw;
    padding: 10%;
    padding-bottom: 0%;
}}

.propertyDesCaro {
    padding: 1.5vw;
    padding-top: 0px;
}

$carousel-visible-count: 3;

@mixin clearfix() {
  &:before,
  &:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
  }
  &:after { clear: both; } 
}

* {
  box-sizing: border-box;
}

.carousel__control {
  position: absolute;
  top: 25%;
  bottom: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  outline: 0;
  background: none;
}

.carousel-control {
  background: none!important;
  padding-top: 13%;
}

.carousel-control.left {
    margin-left: -155px;
}

.multi-item-carousel{
  .carousel-inner{
    > .item{
      transition: 500ms ease-in-out left;
    }
    .active{
      &.left{
        left:-33%;
      }
      &.right{
        left:33%;
      }
    }
    .next{
      left: 33%;
    }
    .prev{
      left: -33%;
    }
    @media all and (transform-3d), (-webkit-transform-3d) {
      > .item{
        // use your favourite prefixer here
        transition: 100000ms ease-in-out left;
        transition: 100000ms ease-in-out all;
        backface-visibility: visible;
        transform: none!important;
      }
    }
  }
  .carouse-control{
    &.left, &.right{
      background-image: none;
    }
  }
}

<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="2000" data-pause="hover">
  <div class="carousel-inner">
      @if (isset($participatingProperties) && !empty($participatingProperties) && is_array($participatingProperties))
        @foreach ($participatingProperties as $property)
        <a href="/view/property/{{ $property->property_slug or $property->id }}">  
          <div class="carousel__box itemProperties col-md-4 col-sm-12 item">
            <h2 class="propertyTitleCaro centered white sub-header">
                <?php echo mb_strimwidth(strip_tags($property->property_name), 0, 45, '...'); ?>   
            </h2>
            <p class="centered white smallerText propertyDesCaro"><?php echo mb_strimwidth(strip_tags($property->property_short_descript), 0, 140, '...<br><br>SEE MORE'); ?></p>
            <div class="carosuelProperties" id="{{ $property->id }}">
                <img class="caroImgClass" src="{{$property->property_main_image->images_main}}" alt="{{ $property->property_name or 'No name' }}" title="{{ $property->property_name or 'No name' }}">
            </div>
            </a>
        </div>
        @endforeach
        @endif
    </div>
  <a class="left carousel-control arrowOf" href="#myCarousel" data-slide="prev">
    <i class="fa fa-chevron-left fa-3x"></i></a>
  <a class="right carousel-control arrowOf" href="#myCarousel" data-slide="next">
    <i class="fa fa-chevron-right fa-3x"></i></a>
</div>

标签： javascript