0
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<!-- required css -->
<link rel="stylesheet" type="text/css" href="http://localhost/blog/public/css/jquery.bxslider.css">
<style type="text/css">
.sliderContainer {
width: 320px;
margin: 0 auto;
}
</style>
</head>
<body>
<div style="float:right;">
<table style="border:3px solid #00008B;background-color:#90EE90;">
<h2>1st Advertisement</h2>
<tr>
<td>
<a id="adv" href="http://www.w3.org"><img name="noslide" id="noslide" alt="my images" height="240"
width="320"
src="http://2.bp.blogspot.com/-M5lNkr0H3Bk/VJfppu-wPxI/AAAAAAAARhs/FSZY0iVdCF4/s1600/Hand%2BPainting%2Bhd%2Bimagess%2B(3).jpg"/></a>
</td>
</tr>
<tr>
<td align="center" style="font:small-caps bold 15px georgia; color:blue;">
<div id="fixeddiv">1st Advertisement</div>
</td>
</tr>
</table>
{{$count=count($slides)}}
<table style="border:3px solid #00008B;background-color:#90EE90;">
<h2>2nd Advertisement</h2>
<div class="sliderContainer">
<ul class="bxslider">
@foreach($slides as $key=>$val)
<li><a>{{$val->id}}</a><a href="{{$val->link}}"><img src="http://localhost/blog/public/images/{{$val->image_name}}"/></a></li>
@endforeach
</ul>
</div>
</table>
</div>
<!-- required js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.bxslider').bxSlider({
// see documentation for more options
'auto': true
});
});
</script>
</body>
</html>
public function index()
{
$slides = DB::table('sliders')->get();
return view('home')->with('slides',$slides);
}
データベースには4つの画像が保存されています。これはスライダーに画像を表示していますが、私はそれを動的にしたいのです。画像1は4回表示され、画像2は2回無作為に連続しないことがわかります。どうしたらいいですか？ダイナミック画像スライダソリューション