Pada kesempatan kali ini saya akan menjelaskan cara membuat carousel slide horizontal bootstrap multiple item dari database di php. Perlu teman-teman ketahui sebelumnyaCarousel adalah tayangan slide bootstrap yang dapat digunakan di website teman-teman melalui serangkaian konten, yang dibuat dengan perubahan CSS 3D dan sedikit JavaScript. Carousel bekerja dengan serangkaian gambar, teks, atau markup kustom. Dan mencakup dukungan untuk kontrol dan indikator sebelumnya / berikutnya. Dan apabila teman-teman ingin membuat slide thumbnail carousel horizontal dengan menampilkan beberapa image per item yang akan tampil di slide tersebut cukup mudah jika membuatnya hanya dengan html, namun bagaimana cara men implementasikannya di php dan dari database. Tentunya sangat menyulitkan, diakrenakan image yang akan di tampilkan masing-masing memiliki pembungkus <div class=”item”> per beberapa image yang akan teman-teman tampilkan nantinya.
Disini saya akan berikan contoh kode html beserta dengan css dan js nya.
Berikut kode HTML nya :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<div class="container"> <div class="row"> <div class="slide-horizontal"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <div class="row-fluid"> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> </div><!--/row-fluid--> </div><!--/item--> <div class="item"> <div class="row-fluid"> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> </div><!--/row-fluid--> </div><!--/item--> <div class="item"> <div class="row-fluid"> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> </div><!--/row-fluid--> </div><!--/item--> </div><!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div><!--/myCarousel--> </div> </div> </div> |
Berikut kode CSS nya :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.carousel { margin-bottom: 0; padding: 0 40px 30px 40px; } .carousel-control { left: -12px; } .carousel-control.right { right: -12px; } .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } .carousel-indicators li { background: #c0c0c0; } .carousel-indicators .active { background: #333333; } |
Berikut kode JS nya :
|
1 2 3 4 5 |
$(document).ready(function() { $('#myCarousel').carousel({ interval: 10000 }) }); |
Berikut hasil output nya :
Untuk pembahasan selanjutnya, akan saya jelaskan cara membuat carousel slide horizontal bootstrap multiple item dari database di php pada sesi berikutnya, semoga bermanfaat.