gpt4 book ai didi

php - 如何循环引导轮播?

转载 作者:可可西里 更新时间:2023-11-01 00:42:18 27 4
gpt4 key购买 nike

我正在尝试从 mysql 数据循环轮播。以下是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>
<body>
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="2000" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
@for($i=0;$i<=count($data);$i++)
<li data-target="#myCarousel" data-slide-to="{{$i}}" class=""></li>
@endfor;
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="images/1.jpg" alt="First Slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

@foreach($data as $val)


<div class="item">
<img src="{{ $val['featured_image']}}" alt="Second Slide">
<div class="carousel-caption">
<h3>{{ $val['title']}}</h3>
<p>{{ $val['description']}}</p>
</div>
</div>
@endforeach

</div>

<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>

上面的代码只有在我添加以下行时才有效

<div class="active item">
<img src="images/1.jpg" alt="First Slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

如果我删除上面的代码然后 slider 不显示任何图像。我想我需要保持我的拳头 slider 图像需要处于事件状态。如何在不添加默认事件代码的情况下实现这一目标?提前谢谢

最佳答案

是的,第一张幻灯片必须有 active 类才能在初始化时自动显示。

试试这个:

{{--*/ $isFirst = true; /*--}}
@foreach($data as $val)
<div class="item{{{ $isFirst ? ' active' : '' }}}">
<img src="{{ $val['featured_image']}}" alt="Second Slide">
<div class="carousel-caption">
<h3>{{ $val['title']}}</h3>
<p>{{ $val['description']}}</p>
</div>
</div>
{{--*/ $isFirst = false; /*--}}
@endforeach

所以我创建了 $isFirst 变量,它保持 true 直到第一张幻灯片被打印出来。这样我们就可以为第一张幻灯片而不是其他幻灯片添加 active 类。

关于php - 如何循环引导轮播?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31913054/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com