我正在使用自举媒体滑块轮播。但是,如果项目小于4,则重复项目。我想每次点击一个项目。
请参阅下面的代码
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));
}
});
});
已经尝试改变[for(var i = 0; i&lt; 2; i ++){] i&lt; 4&i&lt; 6而不是i&lt; 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>
看到它重复2.我只有两个项目1和2.我怎么能停止重复项目?
答案 0 :(得分:1)
通过使用 array_chunk()和 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
});
});