Halo teman semua pada kesempatan hari ini saya akan memberikan tutorial membuat Corousel atau slideshow foto
PENGERTIAN
Corousel atau Slideshow merupakan proses penampilan gambar-gambar yang diberi efek slde.
LATAR BELAKANG
Karena website banyak menggunakan atau membuat slideshow pada halaman website mereka untuk mempromosikan sebuah produk unggulan atau yang lainnya.
MAKSUD DAN TUJUAN
Untuk membuat tampilan pada website sebagai promosi maupun agar keliatan lebih menarik.
ALAT DAN BAHAN
- Bootstrap
- Sublime text
- Laptop
Pertama buat file bernama slide.html
Kemudian anda dapat membuat scriptnya seperti dibawah ini:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>Slide</title>
</head>
<body>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.png" alt="Slide">
<div class="carousel-caption">
<h3>Slide show</h3>
</div>
</div>
<div class="item">
<img src="img/2.png" alt="slide-2">
<div class="carousel-caption">
<h3>Slide show</h3>
</div>
</div>
<div class="item">
<img src="img/3.png" alt="slide-3">
<div class="carousel-caption">
<h3>Slide show</h3>
</div>
</div>
</div>
<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>
Keterangan :
Bahwa pada contoh diatas menggunakan grid untuk menentukan lebar gambar dan meletakannya ketengah-tengah.
KESIMPULAN
Selain untuk tampilan sildeshow juga dapat digunakan untuk promosi atau tujuan yang lainnya.
REFERENSI
http://www.malasngoding.com/membuat-carousel-dengan-bootstrap/
Sekian dan terimakasih
Wassalamualaikum wr.wb
0 komentar:
Posting Komentar