A.PENDAHULUAN
Hallo Teman..!! Apa kabar?? Bertemulagi dengan blog saya kali ini saya akan berbagi tentang kegiatan prakerin di blc telkom klaten
B.PENGERTIAN
Corousel atau Slideshow merupakan proses penampilan gambar-gambar yang diberi efek slde.
C.LATAR BELAKANG
Karena website banyak menggunakan atau membuat slideshow pada halaman website mereka untuk mempromosikan sebuah produk unggulan atau yang lainnya.
D.MAKSUD DAN TUJUAN
untuk memahami dan cara kerja dari Slideshow / Corousel
E.ALAT DAN BAHAN
laptop/pc
koneksi internet
text editor
F.WAKTU YANG DIPERLUKAN
-
G.PEMBAHASAN
Pertama buat file bernama index.html
Kemudian anda dapat membuat scriptnya seperti dibawah ini:
setelah itu kita buat file full-slider.css
Kemudian anda dapat membuat scriptnya seperti dibawah ini:
Kemudian anda dapat membuat scriptnya seperti dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="include/css/bootstrap.min.css" rel="stylesheet">
<link href="include/css/full-slider.css" rel="stylesheet">
<script src="include/js/jquery.min.js"></script>
<script src="include/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('images/1.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('images/2.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('images/3.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
setelah itu kita buat file full-slider.css
Kemudian anda dapat membuat scriptnya seperti dibawah ini:
/*!
* Start Bootstrap - Scrolling Nav (https://startbootstrap.com/template-overviews/scrolling-nav)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-scrolling-nav/blob/master/LICENSE)
*/
header {
padding: 154px 0 100px;
}
@media (min-width: 992px) {
header {
padding: 156px 0 100px;
}
}
section {
padding: 150px 0;
}
untuk file library bootsrap anda dapat download di SINI
setelah itu kita coba di buka di web broser kita dan hasil nya akan seperti di bawah ini
H.HASIL YANG DIDAPAT
dapat memahami Slideshow / Corousel di botsrap
I.PENUTUP
sekian yang dapat saya sampaikan semoga bermanfaat..!!
J.REFERENSI