[英]How can i assign php variables for different div classes in bootstrap?
i am trying to create a photo slider.everything works fine when i hard code it.but when i try to get the values from database slider is not viewing in correct way.please have a look and give me a solution.problem is there are two classes called item active and item.so i cannot apply for each loop.我正在尝试创建一个照片滑块。当我对其进行硬编码时一切正常。但是当我尝试从数据库滑块中获取值时,没有以正确的方式查看。请看看并给我一个解决方案。有问题两个类称为 item active 和 item.so 我不能申请每个循环。
Code that have issue有问题的代码
<div class="container">
<!--The main div for carousel-->
<div class="container text-center">
<div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="2000" id="fruitscarousel">
<?php foreach($this->data['image_results']->result() as $image_result):?><?php echo $image_result->Url;?>
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3 col-sm-4 col-xs-12">
<a class="item active" href="Counting?img_id=<?php echo $image_result->ImgId;?>&href=<?php echo $image_result->Url;?>"><img class="img-responsive" src="<?php echo $image_result->ImgPath; ?>"></a>
</div>
</div>
<div class="item">
<div class="col-md-3 col-sm-4 col-xs-12">
<a href="Counting?img_id=<?php echo $image_result->ImgId;?>&href=<?php echo $image_result->Url;?>"><img class="img-responsive" src="<?php echo $image_result->ImgPath; ?>"></a>
</div>
</div>
</div>
<?php endforeach; ?>
<a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
Code that works correctly正常工作的代码
<div class="container">
<h1>Bootstrap Multiple image sliding demo</h1>
<!--The main div for carousel-->
<div class="container text-center">
<div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="2000" id="fruitscarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="images/1.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="images/2.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="images/2.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="images/3.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="images/4.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="images/5.jpg" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
Jquery and Style Jquery 和样式
<script>
jQuery(document).ready(function() {
jQuery('.carousel[data-type="multi"] .item').each(function(){
var next = jQuery(this).next();
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo(jQuery(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = jQuery(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
</script>
<style>
.carousel-control.left, .carousel-control.right {
background-image:none;
}
.img-responsive{
width:100%;
height:auto;
}
@media (min-width: 992px ) {
.carousel-inner .active.left {
left: -25%;
}
.carousel-inner .next {
left: 25%;
}
.carousel-inner .prev {
left: -25%;
}
}
@media (min-width: 768px) and (max-width: 991px ) {
.carousel-inner .active.left {
left: -33.3%;
}
.carousel-inner .next {
left: 33.3%;
}
.carousel-inner .prev {
left: -33.3%;
}
.active > div:first-child {
display:block;
}
.active > div:first-child + div {
display:block;
}
.active > div:last-child {
display:none;
}
}
@media (max-width: 767px) {
.carousel-inner .active.left {
left: -100%;
}
.carousel-inner .next {
left: 100%;
}
.carousel-inner .prev {
left: -100%;
}
.active > div {
display:none;
}
.active > div:first-child {
display:block;
}
}
</style>
Php code php代码
$imagefromdatabse_query="SELECT * FROM Advertisements WHERE Active='1' ORDER BY ImgId DESC";
$this->data['image_results']=$this->db->query($imagefromdatabse_query);
Do your loop in the carousel-inner: do a if to select the first image as active adding the active class在 carousel-inner 中执行循环:执行 if 以选择第一个图像作为活动添加活动类
<div class="container">
<!--The main div for carousel-->
<div class="container text-center">
<div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="2000" id="fruitscarousel">
<div class="carousel-inner">
<?php foreach($this->data['image_results']->result() as $key => $image_result):?><?php echo $image_result->Url;?>
<div class="item <?php if($key == 0) {echo 'active';}?>">
<div class="col-md-3 col-sm-4 col-xs-12">
<a href="Counting?img_id=<?php echo $image_result->ImgId;?>&href=<?php echo $image_result->Url;?>"><img class="img-responsive" src="<?php echo $image_result->ImgPath; ?>"></a>
</div>
</div>
<?php endforeach; ?>
</div>
<a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
I think you just need to give the active class to the first item, So in for-each loop you can give the class active as below.我认为您只需要将活动类赋予第一项,因此在 for-each 循环中,您可以将类设为 active,如下所示。
In for-each the first-index would be 0, then apply active class.在 for-each 中,第一个索引将为 0,然后应用活动类。
<div class="carousel-inner">
<?php foreach($this->data['image_results']->result() as $key => $image_result):?>
<?php echo $image_result->Url;?>
<div class="item <?php if($key == 0) { echo 'active'; } ?>">
<div class="col-md-3 col-sm-4 col-xs-12">
<a href="Counting?img_id=<?php echo $image_result->ImgId;?>&href=<?php echo $image_result->Url;?>">
<img class="img-responsive" src="<?php echo $image_result->ImgPath; ?>">
</a>
</div>
</div>
<?php endforeach; ?>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.