Cara bikin slide show di html

Question

Tulisan berikut ini berhubungan dengan kode praktis membuat sudut lengkung pada objek menggunakan css3. Kita akan buat slider murni menggunakan CSS tanpa javascript. Referensi artikel ini berasal dari css-tricks. Kita hanya menggunakan kode-kode HTML dan CSS saja. Bagaimana cara membuatnya? Ayo kita mulai.

Silakan buat sebuah file dengan ekstensi .html, misalnya slider-css.html. Kemudian ketik kode berikut sebagai kerangka halaman awalnya.

<html>
<head>
  <title>Slider HTML+CSS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>

Selanjutnya kita buat kode untuk objek slidernya dulu. Silakan ketik kode berikut ini dan letakkan di antara tag <body> dan </body> sambil diperhatikan ada class yang digunakan di dalamnya.

<div class="slider">
  <div class="slides">
    <div>BangHaji DotCom</div>
    <div>www.banghaji.com</div>
    <div>Memudahkan,<br>Mencerahkan,<br>Mencerdaskan</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
  </div>
</div>

Oke, dari kode di atas tampak ada 11 objek menggunakan tag <div>. Sebelas objek tersebut nanti yang akan menjadi objek slider yang bisa digeser. Selanjutnya kita lihat bagaimana kode CSS yang kita gunakan.

Masukkan kode berikut di bagian header halaman ya. Letakkan di atas tag </head> dengan kode CSS sebagai berikut:

<style>
body { font-family: 'Arial', sans-serif; padding: 0px; }
.slider {
  width: 100%;
  text-align: center;
  overflow: hidden;
  margin: 30px 0;
}
.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.slides::-webkit-scrollbar { width: 3px; height: 3px; }
.slides::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; }
.slides::-webkit-scrollbar-track { background: transparent; }
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 180px;
  height: 100px;
  margin: 0 10px 0 10px;
  border-radius: 7px;
  background: #fff;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  border: 1px solid #555;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-size: 100%;
}
</style>

Oke, simpan file ini dan selesai. Selanjutnya akses dan jalankan filenya, punya saya hasilnya seperti gambar berikut ini. Di bagian bawah objek slider ada garis warna abu-abu yang bisa digeser. Jika diakses melalui perangkat mobile, maka objek bisa langsung digeser dengan jari.

Oke, silakan dikembangkan lagi ya.

Terima kasih telah mengikuti tutorial ini, sampai jumpa di tulisan lain dari BangHaji DotCom.

Seringkali kita melihat sebuah website yang menyajikan beberapa buah gambar yang disajikan secara bergantian dengan interval waktu tertentu, inilah yang disebut dengan image slideshow. Kita dapat menggunakan image slideshow dalam menu image gallery atau pun dalam penyajian konten artikel terbaru yang dilengkapi dengan gambar.

Saat ini untuk membuat image slideshow, terdapat banyak pilihan library yang dapat kita gunakan. Seperti dengan menggunakan s3slider, coinslider, wowslide, flexslider dan masih banyak lainnya.

Pada tutorial image slideshow yang akan kita buat, kita akan menggunakan library dari wowslider. Karena wowslider sendiri mengfokuskan diri untuk pembuatan image slideshow yang sangat beragam modelnya. Bahkan anda dapat mencoba software wowslider, setelah itu akan digenerate ke dalam bentuk dokumen html.

Kita akan membuat image slideshow untuk kebutuhan image gallery seperti yang ditunjukkan oleh Gambar. dibawah ini :

Membuat image slideshow dengan wowslider

Dalam contoh yang disajikan, secara umum interface menggunakan library bootstrap. Sedangkan untuk animasi dari image slideshow menggunakan wowslider. Kesemua library tersebut terdapat pada bagian link download paling bawah.

Berikut ini adalah script lengkap dalam membuat image slideshow :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="ilmu-detil.blogspot.com">
    <title>Tutorial Imageslideshow</title>
    <!-- Bagian css -->
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    <link rel="stylesheet" type="text/css" href="wowslider/style.css" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"> 
    <!-- Akhir dari Bagian css -->
    <script src='assets/js/jquery-1.10.1.min.js'></script>       
    <script src="assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="wowslider/jquery.js"></script>


</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://dtc-eng.blogspot.co.id/">
            Pusat Ilmu Secara Detil</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="clr1 active"><a href="index.html">Home</a></li>
                <li class="clr2"><a href="">Learn French</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</div>
</br></br></br></br>
    
<!-- part of slideshow -->
<div class = "container">
    <div class="row">
        <div class="col-md-5">
            <div class="panel panel-default">
                <div class="panel-heading">Image Gallery</div>
                    <div class="panel-body">                    
                        <!-- Start WOWSlider.com BODY section -->
                        <!-- add to the <body> of your page -->
                        <div id="wowslider-container1">
                            <div class="ws_images">
                            <ul>
                                <li><img src="img/dashboard1.png" style="width:425px; height:300px;" id="wows1_0"/></li>
                                <li><img src="img/tabel1.png" style="width:425px; height:300px;"  id="wows1_1"/></a></li> 
                                <li><img src="img/agenda1.png" style="width:425px; height:300px;" id="wows1_2"/></li>
                            </ul>
                            </div>                                                    
                            <div class="ws_script" style="position:absolute"></div>
                            <div class="ws_shadow"></div>
                        </div>
                        <script type="text/javascript" src="engine1/wowslider.js"></script>
                        <script type="text/javascript" src="engine1/script.js"></script>
                        <!-- End WOWSlider.com BODY section -->
                    </div>
            </div>
        </div>
    </div>
</div>
<!-- end of part slideshow -->
</body>
</html>

Jika ingin merubah ukuran gambar, maka cukup lakukan teknik css secara inline seperti script diatas : <img src="img/dashboard1.png" style="width:425px; height:300px;" id="wows1_0"/>. Anda tinggal merubah ukuran width dan height-nya.

Jika ukuran gambar yang anda rubah terlalu besar, dan terkesan tidak berubah ukurannya. Hal ini diakibatkan karena pada contoh mengeset : <div class="col-md-5">. Jadi anda dapat memodifikasinya menjadi : <div class="col-md-6"> atau <div class="col-md-7"> dsb. Maksimalnya adalah : <div class="col-md-12">.