Bootstrap Part 14 : Membuat Carousel Dengan Bootstrap
Membuat Carousel Dengan Bootstrap
Carousel atau sering juga di sebut slideshow merupakan proses penampilan gambar-gambar yang di beri efek slide. sangat banyak website atau situs yang menggunakan atau membuat slideshow/carousel pada halaman website mereka untuk mempromosikan sebuah produk unggulan atau dengan tujuan lainnya. biasanya carousel di letakkan pada halaman depan sebuah website dengan design yang berbagai macam dan tentunya menarik perhatian para pengunjung website.
Sangat sulit untuk membuat slideshow atau carousel dengan cara manual. tetapi dengan menggunakan bootstrap akan sangat mudah untuk membuat carousel karena bootstrap sudah menyediakan class untuk membuat fasilitas carousel ini. kita juga dapat menambahkan caption pada carousel bootstrap untuk membuat promosi atau dengan tujuan lain. Membuat Carousel Dengan Bootstrap
untuk mulai membuat carousel pada halaman website dengan menggunakan bootstrap yang pertama kali di buat adalah dengan menyiapkan beberapa file gambar yang akan kita gunakan menjadi gambar yang muncul pada carousel. di sini saya sudah menyediakan beberapa gambar yang akan saya jadikan sebagai gambar yang muncul pada carousel.
membuat carousel dengan bootstrap
dan kemudian kita masuk ke cara membuat carousel dengan bootstrap.
|
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 56 57 58 59 60 61 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Part 14 : Membuat Carousel dengan Bootstrap</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <div class="container"> <center><h1>Membuat Carousel dengan Bootstrap | www.malasngoding.com</h1></center> <br/> <div class="col-md-8 col-md-offset-2"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- deklarasi carousel --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/malasngoding1.png" alt="www.malasngoding.com"> <div class="carousel-caption"> <h3>www.malasngoding.com</h3> <p>Tutorial belajar pemrograman web, mobile dan design.</p> </div> </div> <div class="item"> <img src="img/malasngoding2.png" alt="www.malasngoding.com"> <div class="carousel-caption"> <h3>Tutorial Bootstrap</h3> <p>Belajar tutorial bootstrap dasar di www.malasngoding.com</p> </div> </div> <div class="item"> <img src="img/malasngoding3.png" alt="www.malasngoding.com"> <div class="carousel-caption"> <h3>Tutorial Android</h3> <p>Tutorial membuat aplikasi android.</p> </div> </div> </div> <!-- membuat panah next dan previous --> <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </body> </html> |
cara membuat slideshow dengan bootstrap
carousel pun sudah jadi. sedikit pemberitahuan, pada contoh di atas saya menambahkan grid bootstrap untuk menentukan lebar gambar dan meletakkannya ke tengah-tengah. jadi jika anda tidak memerlukannya anda bisa menghilangkan class tersebut.
|
1 |
<div class="col-md-8 col-md-offset-2"> |
See the Pen membuat carousel dengan bootstrap by Malas Ngoding (@malasngoding) on CodePen.0
Sekian tutorial bootstrap part 14: Membuat carousel dengan bootstrap.
Tutorial Bootstrap Dasar Lainnya
Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap
Tutorial Menarik Lainnya
Membuat Template Blog Sederhana Dengan Bootstrap
Bootstrap Part 16 : Mengenal Grid System Bootstrap
Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
Bootstrap Part 13 : Membuat Form Dengan Bootstrap
[…] Tutorial Bootstrap Part 14 : Membuat Slider Dengan Bootstrap […]
min kok tidak bisa bergerak
coba inspect element, pilih console, lihat dimana errornya om.
mungkin itu ada yg ketinggalan