Cara Membuat Slide Show Dengan jQuery Part 1

Assalamu’alaikum warahmatullahi wabarakatuh

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Cara Membuat Slide Show Dengan jQuery Part 1 dimana pada tahap part 1 ini kita akan membuat layout terlebih dahulu. Teman – teman siapkan file bootstrap dan file image nya untuk project membuat slide show nya.

Jika sudah, buka file index.html nya dan ketilkkan struktur nya di bawah ini

<!DOCTYPE html>
<html lang="en">
  <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>Cara Membuat Slide Show Dengan jQuery Part 1</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="container-fluid bgg">
      <div class="container">
        <div class="row" id="gallerys">
          <div class="col-md-4 item">
            <img src="img/gallery/small/beautiful-wild-wings.jpg" style="width: 100%" class="thumbnail" title="Beautifull Wild Wings">
          </div>
          <div class="col-md-4 item">
            <img src="img/gallery/small/blue-eyes.jpg" style="width: 100%" class="thumbnail" title="Blue Eyes">
          </div>
          <div class="col-md-4 item">
            <img src="img/gallery/small/chameleon.jpg" style="width: 100%" class="thumbnail" title="Chameleon">
          </div>
          <div class="col-md-4 item">
            <img src="img/gallery/small/dolphins-leaping-in-the-sunset.jpg" style="width: 100%" class="thumbnail" title="Dolphin Lepaing in Sunset">
          </div>
          <div class="col-md-4 item">
            <img src="img/gallery/small/frog.jpg" style="width: 100%" class="thumbnail" title="Frog">
          </div>
          <div class="col-md-4 item">
            <img src="img/gallery/small/giraffe-at-sunset.jpg" style="width: 100%" class="thumbnail" title="Giraffe at Sunset">
          </div>
          <div class="col-md-4 item">
            <img src="img/gallery/small/gorilla.jpg" style="width: 100%" class="thumbnail">
          </div>
          <div class="col-md-4 item">
            <img src="img/gallery/small/horse-in-ocean.jpg" style="width: 100%" class="thumbnail">
          </div>
          <div class="col-md-4 item">
            <img src="img/gallery/small/leapord-crouching.jpg" style="width: 100%" class="thumbnail">
          </div>
        </div>
      </div>
    </div>

    <nav class="navbar navbar-default navbar navbar-default navbar-fixed-top navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" style="color:white">My Site</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="#">Product</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <form class="navbar-form navbar-left">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
          </li>
        </ul>
      </div>
    </div>
    </nav>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/gallery.js"></script>
  </body>
</html>

Kemudian berikan css nya

body, html {
    height: 100%;
    margin: 0;
    background-image: url('../img/background.jpg');
    background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
.bg {
	background-image: url('../img/bg.jpg');
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
.navbar-inverse {
    background-color: rgba(0,0,0,0.4);
    border-color: none !important;
}
.navbar-inverse .navbar-nav > li > a {
    color: #ffffff;
}
.line {
    width: 0;
    height: 3px;
    background-color: #87CEEB;
    position: absolute;
    top: 150px;
    left: 56px;
}
.bg h1 {
	font-size: 0;
	position: absolute;
	top: -107px;
	left: 150px;
	color: #fff;
}

/*GALLERY*/

div img {
	cursor: pointer
}

.row {
	margin-top: 70px;
}

.imageBig {
	display: none;
}

Perlu teman – teman perhatikan untuk file gambar, css atau yang lainnya. Pastikan teman – teman dalam pemanggilan file nya sesuai folder nya, untuk ukuran gambar pada slide show saya menggunakan ukuran 259 x 188 pixel. Jika sudah save dan jalankan pada browsernya, maka hasil nya seperti gambar di bawah ini

Di artikel part 2 nanti kita akan melanjutkan dengan memberikan script jQuery nya, dengan begitu kita membuat slide show tanpa menggunakan plugin. Melainkan membuatnya sendiri dengan jQuery, baik sekian pada artikel kali ini tentang Cara Membuat Slide Show Dengan jQuery Part 1 kita jumpa kembali pada artikel selanjutnya. Terimakasih dan sampai jumpa, semoga bermanfaat.

Assalamu’alaikum warahmatullahi wabarakatuh.