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">

Sekian tutorial bootstrap part 14: Membuat carousel dengan bootstrap.

Search This Blog

World Tech Reader

Membuat Carousel Dengan Bootstrap