gambar diatas hanya contoh, dan tidak sama persis
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: %;
height: %;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfW3azRZd1-FKGcSkHvfoUPZRABEw4r-hDOt88Lx6B7iIn7QfYKh-pX9YgwBsLNpNAoSs8loOVm7P4ueWrDKguvV2GPj-AGBXrw1NIIQak2P3iJD4ALn_Z1e5frjQ2YE3Snx17aZQ27Yp-/s1600/Slide.png" alt="Los Angeles" width="100%" height="200"></a>
</div>
<div class="carousel-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfW3azRZd1-FKGcSkHvfoUPZRABEw4r-hDOt88Lx6B7iIn7QfYKh-pX9YgwBsLNpNAoSs8loOVm7P4ueWrDKguvV2GPj-AGBXrw1NIIQak2P3iJD4ALn_Z1e5frjQ2YE3Snx17aZQ27Yp-/s1600/Slide.png" alt="New York" width="100%" height="200">
</div>
<div class="carousel-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfW3azRZd1-FKGcSkHvfoUPZRABEw4r-hDOt88Lx6B7iIn7QfYKh-pX9YgwBsLNpNAoSs8loOVm7P4ueWrDKguvV2GPj-AGBXrw1NIIQak2P3iJD4ALn_Z1e5frjQ2YE3Snx17aZQ27Yp-/s1600/Slide.png" alt="New York" width="100%" height="200">
</div>
</div>
</body>
</html>
NB : Simpan dan silahkan mencobanya di browser atau aplikasi anda
0 Komentar