Pada umumnya sebuah website bisa dikatakan menarik ialah bagaimana si pembuat (web developer) mampu menganalisa kebutuhan si user, dan mampu membaca segala apa yang dibutuhkan oleh user, slider contohnya, tampilan ini sangan bagus dan menarik untuk membuat website agar tidak kelihatan kaku dan formal, dengan adanya slider website berasa hidup dan menarik untuk di kunjungi oleh visitor(pengunjung website),
bahkan slider banyak yang telah di devlop untuk menambah daya Tarik dari visitor(pengunjung website), bahkan sampai ada jasa yang menyediakan slider dari berbayar sampai dengan yang gratis, nah disini saya ingin ajarkan teman teman tentang Cara Mudah Membuat Slider Didalam Popup Dengan Bootstrap, tutorial ini bagus sekali untuk teman teman yang ingin membuat suatu website yang terdapat menu gallery foto, oke langsung saja yah, teman teman bisa ikuti langkah berikut :
- Download bootstrap
- Masukkin script ini :
- Selesai.
|
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 44 45 46 47 48 49 50 51 52 53 54 55 |
<div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-4"> <a data-toggle="modal" href='#modal-id'><img src="https://i.ytimg.com/vi/pGYlfHKaOyA/maxresdefault.jpg" class="img-responsive img-thumbnail"></a> <div class="modal fade" id="modal-id"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <!-- slider --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://i.ytimg.com/vi/pGYlfHKaOyA/maxresdefault.jpg" class="img-responsive img-thumbnail"> </div> <div class="item"> <img src="http://www.sonyadj.com/wp-content/uploads/2013/10/11.jpg" class="img-responsive img-thumbnail"> </div> <div class="item"> <img src="https://cdn-az.allevents.in/banners/d45746c1ea7ad20d72237e11f9be0d27" class="img-responsive img-thumbnail"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- tutup slider --> </div> </div> </div> </div> </div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> </div> |
Cukup mudah bukan, berikut hasilnya :
pastikan sudah mendowload dan menyambungkan css bootstrapnya, Cukup sekian tutorial tentang Cara Mudah Membuat Slider Didalam Popup Dengan Bootstrap, sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLearn
#IsmetMA