Bootstrap Carousel

Apa itu Bootstrap 4? Bootstrap adalah framework CSS untuk membaut tampilan web. Bootstrap menyediakan class dan komponen yang siap dipakai, sehingga kita tidak perlu menulis kode CSS dari nol.

• 
  
• 
  
• 
  
• 
  
• 
  
• 
  

Ukuran Foto dibuat dengan ukuran tinggi 500, lebar 1100, copy script berikut yang di dalam kotak dan paste di Halaman Posting atau Halaman Statis.

<title>Bootstrap Malik</title>
<meta charset="utf-8"></meta>
<meta content="width=device-width, initial-scale=1" name="viewport"></meta>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>

<div class="carousel slide" data-ride="carousel" id="demo">

<!--Indicators-->
<ul class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#demo"></li>
<li data-slide-to="1" data-target="#demo"/li>
<li data-slide-to="2" data-target="#demo"></li>
<li data-slide-to="3" data-target="#demo"></li>
</ul>

<!--The slideshow-->
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="Dunia Pendidikan 0" height="500" src="URL Gambar 1" width="1100" />
</div>
<div class="carousel-item">
<img alt="Dunia Pendidikan 1" height="500" src="URL Gambar 2" width="1100" />
</div>
<div class="carousel-item">
<img alt="Dunia Pendidikan 2" height="500" src="URL Gambar 3" width="1100" />
</div>
<div class="carousel-item">
<img alt="Dunia Pendidikan 3" height="500" src="URL Gambar 4" width="1100" />
</div>
</div>

<!--Left and right controls-->
<a class="carousel-control-prev" data-slide="prev" href="#demo">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" data-slide="next" href="#demo">
<span class="carousel-control-next-icon"></span>
</a>
</div>

Download Script Bootstrap Carousel

Video Tutorial Pasang Kotak Scrip