Cara membuat slider sederhana simple di HTML

Selamat pagi teman-teman masih di suasana pagi yang mendung, hehe kali ini mimin akan berbagi cara atau langkah mudah melakukan slider pada html, oke sebelumnya apa sih slider itu? bagi teman-teman yang belum tahu, slider adalah gambar yang bisa bergerak, untuk gerakkannya bisa macam-macam. kurang lebih slider itu banner yang biasanya ada di header website, slider ini juga berfungsi untuk menampilkan gambar yang banyak pada area yang terbatas. heheh oke trus gimana cara membuatnya?, tenang akan mimin tuliskan langkah mudahnya... 

Untuk library yang digunakan bisa bermacam-macam, kali ini mimin menggunakan flickity, untuk dokumentasinya bisa diklik di link ini.

oke berikut langkah-langkahnya.

1. Buat directory seperti gambar berikut (Ini hanya optional, bisa disesuaikan dengan directory teman-teman), sedang untuk ukuran gambar direkomendasikan size (lebar dan tinggi tiap gambar sama) agar terlihat lebih rapi.

2. Copy pasatekan source code berikut pada file satu.php (optional, bisa disesuaikan dengan file teman-teman)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css" rel="stylesheet">

<style> 

* {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

body { font-family: sans-serif; }

.gallery {

  background: #FFFFFF;    

}

.gallery-cell {

  width: 66%;  

  margin-right: 10px;

  padding : 0px;

  background: #FFFFFF;

  counter-increment: gallery-cell;

}

.gallery-cell:before {

  display: block;

  text-align: center;    

  font-size: 80px;

  color: #FFFFFF;

}

</style>

<br><br>

<div class="container">

<div class="row">

<div class="col-lg-6">

    <div class="gallery js-flickity"

        data-flickity-options='{ "wrapAround": true }'>

            <div class="gallery-cell">

                <img src="http://localhost/latihan/slider/slider1.jpg"></img>

            </div>

            <div class="gallery-cell">

                <img src="http://localhost/latihan/slider/slider1.jpg"></img>

            </div>                      

            <div class="gallery-cell">

                <img src="http://localhost/latihan/slider/slider1.jpg"></img>

        </div>

    </div>  

</div>  

</div>  

</div>  

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.js"></script> 

Oke, save lalu refresh browser teman-teman

Kelihatan cantik bukan, hehehe.. oh iya apabila teman-teman ingin ukuran yang lebih custom bisa juga. bisa teman-teman custom sesuai keinginan, letakkan ada di file css atau tagi di dalam <style>.

oke sip.

saya telah mencoba cara ini dan berfungsi dengan baik untuk saya.