Bootstrap Media Slider Carousel repeating items - carousel

Question

I am using bootstrap media slider carousel. but, it is repeating items if items are less than 4. I want to slide one item per click.
see my code below
JQUERY
$(document).ready(function(){
$('#media').carousel({
pause: true,
interval: false
});
$('.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));
}
});
});
Already tried to change [for (var i=0;i<2;i++) {] i<4 and i<6 instead of i<2
CSS :
/* carousel */
.carousel-pack{height:40px; margin:0; padding:0;}
.carousel-pack-inner{width:252px; margin: 0 auto;}
.media-carousel
{
margin-bottom: 0;
margin-top: 20px;
}
.carousel-control{line-height: 24px;}
/* Previous button */
.media-carousel .carousel-control.left
{
left: -37px;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 2px solid #FFFFFF;
height: 32px;
width: 32px;
margin-top: 4px;
}
/* Next button */
.media-carousel .carousel-control.right
{
right: -37px;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 2px solid #FFFFFF;
height: 32px;
width: 32px;
margin-top: 4px;
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li
{
background: #c0c0c0;
}
.media-carousel .carousel-indicators .active
{
background: #333333;
}
.thumbnail
{
width: 48px !important;
height: 40px!important;
border-radius:0;
border-radius: 8px !important;
}
.thumbs{
margin-right: 15px;
padding: 0;
float: left;
}
.thumbs:first-child{margin-left: 7px;}
.thumbs:last-child{margin-right: 7px;}
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="carousel-pack">
<div class="carousel-pack-inner">
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<div class="row-new">
<div class="thumbs">
<a class="thumbnail" href="#">1</a>
</div>
</div>
</div>
<div class="item">
<div class="row-new">
<div class="thumbs">
<a class="thumbnail" href="#">2</a>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
</div>
see it repeating 2. I have only two items 1 and 2. how can I stop repeating items?

Answer 1

Solved this by Splitting an array into chunks using array_chunk() and foreach.
HTML
<div class="carousel-pack">
<div class="carousel-pack-inner">
<div class="carousel slide media-carousel" data-ride="carousel" data-wrap="true" id="media">
<div class="carousel-inner">
<?php
$active = 'active';
$pages = array_chunk($file_array,3);
foreach ($pages as $key => $data) { ?>
<div class="item <?php echo $active; ?>">
<?php foreach ($data as $key => $value) { ?>
<div class="row-new">
<div class="thumbs">
<a class="thumbnail" href="#" target="_blank"><?php echo $value; ?></a>
</div>
</div>
<?php } ?>
</div>
<?php $active='';
} ?>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
JQUERY
$(document).ready(function(){
$('#media').carousel({
pause: true,
interval: false
});
});