Slideshow Gambar menggunakan Bootstrap dan Jquery
Assalamualaikum wr.wb
Pagi kawan, pada hari ini saya akan sharing tentang bagaimana cara membuat Slideshow menggunakan Bootstrap dan jquery
A. Pengertian
Pengertian slideshow adalah tampilan objek foto, gambar, dan objek lainnya yang dalam beberapa saat saling bergantian. Misalnya dari slide foto atau gambar pertama,ganti ke slide kedua, begitu selanjutnya sampai kembali ke slide pertama dan akan berulang terus menerus. Fungsi slideshow antara lain adalah untuk mempercantik tampilan blog sehingga terkesan elegan,
B. Latar belakang
Latar belakang belajar tentang materi kali ini adalah agar kita bisa membuat Slideshow gambar dengan Bootstrap dan Jquery.
C. Alat dan bahan
- Komputer / Laptop
- Bootstrap jika belum punya dowload di http://getbootstrap.com/
- Jquery.min.js jika belum punya juga silahkan download di google
- Text editor
D. Tujuan
Agar kalian tahu bagaimana cara membuat gambar slideshow
E. Langkah - langkah
1. Buat Folder Baru dengan nama " Slideshow "
2. Buat Folder " assets " di dalam folder " Slideshow "
2. Buat Folder " assets " di dalam folder " Slideshow "
3. Ekstrak Bootstrap yang kalian download
4. Pindahkan Jquery.min.js ke folder JS
4. Pindahkan Jquery.min.js ke folder JS
4. Kemudian Copy Folder CSS, Font dan JS kedalam folder " assets "
5. Buat File "index.html " di folder "Slideshow"
6. Isi file index.html dengan script dibawah ini kemudian simpan
<?php ?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Membuat Slide Yang Sangat Mudah</title>
<!-- CSS Bootstrap -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<!-- CSS kamu, Panggil CSS buatan mu sendiri di bawah sini seperti biasa -->
<!-- JS untuk IE -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Content START -->
<div id="slideshow-mudah" class="carousel slide" data-ride="carousel">
<!-- Indicators, Ini adalah Tombol BULET BULET dibawah. item ini dapat dihapus jika tidak diperlukan -->
<ol class="carousel-indicators">
<li data-target="#slideshow-mudah" data-slide-to="0" class="active"></li>
<li data-target="#slideshow-mudah" data-slide-to="1"></li>
<li data-target="#slideshow-mudah" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides, Ini adalah Tempat Gambar-->
<div class="carousel-inner">
<div class="item active">
<img src="../image/city.jpg" alt="slideshow-mudah" width="1300" height="700"> <!—Gambar -->
<div class="carousel-caption"> <!—Penjelasan -->
<h3>Slide 1 (Judul)</h3>
<p>Ini adalah Slide 1 (Penjelasan)</p>
</div>
</div>
<div class="item">
<img class="" src="../image/city2.jpg" alt="slideshow-mudah" width="1300" height="700"> <!—Gambar -->
<div class="carousel-caption"> <!—Penjelasan -->
<h3>Slide 2 (Judul)</h3>
<p>Ini adalah Slide 2 (Penjelasan)</p>
</div>
</div>
<div class="item">
<img src="../image/city1.jpg" alt="slideshow-mudah" width="1300" height="700"> <!—Gambar -->
<div class="carousel-caption"> <!—Penjelasan -->
<h3>Slide 3 (Judul)</h3>
<p>Ini adalah Slide 3 (Penjelasan)</p>
</div>
</div>
</div>
<!-- Controls, Ini adalah Panah Kanan dan Kiri. item ini dapat dihapus jika tidak diperlukan-->
<a class="left carousel-control" href="#slideshow-mudah" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slideshow-mudah" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- Content END -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../assets/js/bootstrap.min.js"></script>
</body>
</html>
5. Buat File "index.html " di folder "Slideshow"
6. Isi file index.html dengan script dibawah ini kemudian simpan
<?php ?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Membuat Slide Yang Sangat Mudah</title>
<!-- CSS Bootstrap -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<!-- CSS kamu, Panggil CSS buatan mu sendiri di bawah sini seperti biasa -->
<!-- JS untuk IE -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Content START -->
<div id="slideshow-mudah" class="carousel slide" data-ride="carousel">
<!-- Indicators, Ini adalah Tombol BULET BULET dibawah. item ini dapat dihapus jika tidak diperlukan -->
<ol class="carousel-indicators">
<li data-target="#slideshow-mudah" data-slide-to="0" class="active"></li>
<li data-target="#slideshow-mudah" data-slide-to="1"></li>
<li data-target="#slideshow-mudah" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides, Ini adalah Tempat Gambar-->
<div class="carousel-inner">
<div class="item active">
<img src="../image/city.jpg" alt="slideshow-mudah" width="1300" height="700"> <!—Gambar -->
<div class="carousel-caption"> <!—Penjelasan -->
<h3>Slide 1 (Judul)</h3>
<p>Ini adalah Slide 1 (Penjelasan)</p>
</div>
</div>
<div class="item">
<img class="" src="../image/city2.jpg" alt="slideshow-mudah" width="1300" height="700"> <!—Gambar -->
<div class="carousel-caption"> <!—Penjelasan -->
<h3>Slide 2 (Judul)</h3>
<p>Ini adalah Slide 2 (Penjelasan)</p>
</div>
</div>
<div class="item">
<img src="../image/city1.jpg" alt="slideshow-mudah" width="1300" height="700"> <!—Gambar -->
<div class="carousel-caption"> <!—Penjelasan -->
<h3>Slide 3 (Judul)</h3>
<p>Ini adalah Slide 3 (Penjelasan)</p>
</div>
</div>
</div>
<!-- Controls, Ini adalah Panah Kanan dan Kiri. item ini dapat dihapus jika tidak diperlukan-->
<a class="left carousel-control" href="#slideshow-mudah" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slideshow-mudah" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- Content END -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../assets/js/bootstrap.min.js"></script>
</body>
</html>
Sekian share kali ini, selamat mencoba dan semoga bermanfaat, terimakasih.
Wassalamualaikum wr.wb