() translation by (you can also view the original English article)
Di artikel ini, kita akan mengeksplorasi bagaimana Anda dapat mengatur slider dasar menggunakan library jQuery. Kita akan menggunakan library bxSlider yang dibangun di atas jQuery dan menyediakan banyak opsi konfigurasi untuk menyiapkan slider.
Saat ini, slider gambar adalah fitur yang harus dimiliki — gambar bernilai ribuan kata!
Setelah Anda memutuskan bahwa Anda akan menyiapkan slider dasar, pertanyaan berikutnya adalah apa sebenarnya proses membuatnya. Tentu saja, persyaratan pertama adalah untuk mengumpulkan gambar berkualitas baik dan gambar resolusi tinggi.
Selanjutnya, Anda tahu bahwa Anda akan menggunakan HTML dan beberapa hal JavaScript yang bagus untuk membuat slider gambar Anda. Dan ada banyak library yang tersedia di web yang memungkinkan Anda membuat slider dengan berbagai cara. Kita akan menggunakan library bxSlider open source.
Library bxSlider mendukung daya tanggap, dan karenanya slider yang dibuat menggunakan library ini akan beradaptasi dengan perangkat apa pun. Saya yakin Anda sadar betapa pentingnya membangun situs web yang responsif dan adaptif terhadap berbagai perangkat saat ini. Dengan demikian, responsif adalah fitur yang harus dimiliki ketika Anda memilih library pihak ketiga untuk membangun slider Anda.
Di bagian selanjutnya, kita akan mulai menjelajahi dasar-dasar library bxSlider dan menyiapkan proses. Untuk melangkah lebih jauh, kita akan membangun contoh dunia nyata yang akan menunjukkan penggunaan perpustakaan bxSlider. Dan terakhir, kita akan melihat beberapa parameter penting yang didukung oleh library bxSlider yang memungkinkan Anda untuk menyesuaikan slider sesuai dengan kebutuhan Anda.
Apa itu bxSlider?
Jika Anda mencari slider konten berbasis jQuery, bxSlider adalah salah satu library terbaik dan paling sederhana dan memungkinkan Anda untuk membuat slider konten dan gambar dengan sangat mudah.
Mari kita melihat sekilas fitur yang disediakannya:
- Ini sepenuhnya responsif dan adaptif untuk semua jenis perangkat.
- Ini mendukung berbagai mode tampilan seperti mode horizontal, vertikal dan fade. Kita akan melihat lebih banyak tentang ini nanti di artikel.
- Konten slide dapat berupa apa saja: gambar, video atau teks HTML.
- Ini mendukung semua browser populer.
- Ini menyediakan berbagai opsi konfigurasi yang memungkinkan Anda untuk menyesuaikan slider sesuai dengan kebutuhan khusus Anda.
- Terakhir namun tidak kalah pentingnya, mudah untuk diterapkan seperti yang akan kita lihat di bagian selanjutnya.
Sekarang, mari kita lihat proses pemasangan library bxSlider. Dalam artikel ini, saya akan menggunakan URL CDN untuk memuat file JavaScript dan CSS yang diperlukan, tetapi tentu saja Anda selalu dapat melanjutkan dan mengunduh atau mengkloning file-file ini dari repo bxSlider GitHub resmi.
Include File JavaScript dan CSS
Hal pertama yang perlu Anda lakukan adalah memasukkan file JavaScript dan CSS yang diperlukan dalam file HTML Anda seperti yang ditunjukkan dalam cuplikan berikut.
1 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> |
2 |
<script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
3 |
<script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> |
Anda dapat memasukkan kode di atas dalam tag <head> pada dokumen HTML Anda. Seperti yang Anda lihat, saya telah memuat file yang diperlukan dari URL CDN. Jika Anda telah mengunduh file-file ini untuk proyek Anda, Anda harus memberikan jalur yang benar dari setiap file.
Mengatur Konten Slider
Di bagian ini, kita akan melihat bagaimana Anda dapat mengatur konten slider di file HTML Anda.
Mari kita lihat cuplikan berikut.
1 |
<div class="slider"> |
2 |
<div>Slide One</div> |
3 |
<div>Slide Two</div> |
4 |
<div>Slide Three</div> |
5 |
</div>
|
Dalam contoh di atas, kita telah menyiapkan tiga slide yang akan diputar antara saat kita menginisialisasi slider. Hal penting yang perlu diperhatikan dalam cuplikan di atas adalah kelas CSS yang disediakan di elemen utama <div>. Saat ini, kita telah menggunakan slider sebagai kelas CSS kita, jadi kita akan menggunakan nilai ini selama setup bxSlider.
Tentu saja, Anda dapat menggunakan konten apa pun, bukan hanya teks. Kita akan kembali ke ini di bagian selanjutnya ketika kita melihat bagaimana membangun slider gambar yang lengkap. Untuk saat ini, Anda hanya perlu mencatat kelas CSS yang telah kita sediakan di elemen utama <div>.
Menginisialisasi bxSlider
Sejauh ini, kita telah menyertakan file library yang diperlukan dan menyiapkan konten HTML untuk slider kita. Satu-satunya yang tersisa adalah menginisialisasi bxSlider untuk mengubah konten HTML statis kita menjadi slider berputar yang tampak mewah!
Mari kita lihat snippet untuk menginisialisasi slider kita.
1 |
<script> |
2 |
$(document).ready(function(){ |
3 |
$('.slider').bxSlider(); |
4 |
});
|
5 |
</script> |
Ini kode JavaScript, jadi Anda juga bisa memasukkannya ke tag <head>. Atau Anda dapat meletakkannya tepat di atas tag </body> di bagian bawah file HTML Anda, sehingga JavaScript akan berjalan setelah sisa halaman Anda selesai memuat. Jika Anda lebih suka meletakkannya di tag <head>, Anda harus memastikan untuk menempatkannya setelah Anda memuat file JavaScript dan CSS yang diperlukan.
Seperti yang Anda lihat, kita telah menggunakan kelas CSS slider untuk menginisialisasi slider kita.
Dan dengan tiga langkah sederhana ini, Anda telah membangun slider responsif menggunakan library bxSlider berbasis jQuery!
Di bagian berikutnya, kita akan memperluas apa yang telah kita bahas sejauh ini, dan kita akan mencoba membangun slider dengan menggunakan berbagai opsi konfigurasi yang disediakan oleh library bxSlider.
Membangun sebuah Contoh Nyata
Di bagian sebelumnya, kita membahas cara mengatur slider dasar dengan menggunakan library bxSlider. Di bagian ini, kita akan melihat contoh nyata yang menunjukkan bagaimana Anda bisa membuat slider gambar yang berputar untuk situs web Anda.
Di bawah root dokumen Anda, buat file HTML yang berisi potongan berikut.
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<body>
|
4 |
<head>
|
5 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> |
6 |
<script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
7 |
<script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> |
8 |
</head>
|
9 |
|
10 |
<div class="slider"> |
11 |
<div><img src="/path/to/image1.jpg" title="Title of image1"></div> |
12 |
<div><img src="/path/to/image2.jpg" title="Title of image2"></div> |
13 |
<div><img src="/path/to/image3.jpg" title="Title of image3"></div> |
14 |
</div>
|
15 |
|
16 |
<script>
|
17 |
$('.slider').bxSlider({ |
18 |
autoControls: true, |
19 |
auto: true, |
20 |
pager: true, |
21 |
slideWidth: 800, |
22 |
mode: 'fade', |
23 |
captions: true, |
24 |
speed: 1000 |
25 |
});
|
26 |
</script>
|
27 |
</body>
|
28 |
</html>
|
Dan dengan pengaturan itu, tayangan slide Anda akan terlihat seperti ini.
Kode dalam contoh di atas akan terlihat familier. Ini sangat mirip dengan apa yang sudah kita bahas. Satu-satunya hal yang berbeda adalah kita telah menginisialisasi slider kita dengan beberapa opsi konfigurasi yang didukung oleh library bxSlider. Mari kita lihat dari dekat potongan itu.
1 |
$('.slider').bxSlider({ |
2 |
autoControls: true, |
3 |
auto: true, |
4 |
pager: true, |
5 |
slideWidth: 800, |
6 |
mode: 'fade', |
7 |
captions: true, |
8 |
speed: 1000 |
9 |
});
|
Parameter autoControls
Parameter autoControls menambahkan kontrol yang memungkinkan pengguna untuk memulai dan menghentikan slideshow. Secara default, ini disetel ke false, dan dengan demikian jika Anda ingin menunjukkan kontrol, Anda perlu mengaturnya menjadi true secara eksplisit.
Parameter auto
Parameter auto memungkinkan Anda untuk memulai slideshow otomatis saat memuat halaman. Secara default, ini disetel ke false.
Parameter pager
Parameter pager menambahkan pager ke tampilan slide.
Parameter SlideWidth
Parameter slideWidth memungkinkan Anda untuk mengatur lebar tampilan slide. Jika Anda menggunakan opsi horizontal untuk tayangan slide Anda, parameter ini adalah suatu keharusan.
Parameter mode
Parameter mode memungkinkan Anda mengonfigurasi jenis transisi antar slide. Anda memiliki tiga opsi untuk dipilih — horizontal, vertikal, dan fade. Dalam contoh di atas, kita telah menggunakan opsi fade, dan dengan demikian Anda akan melihat efek memudar ketika beralih dari satu slide ke slide lainnya.
Parameter captions
Parameter captions digunakan jika Anda ingin menampilkan judul pada setiap slide. Judul diambil dari atribut title elemen gambar. Seperti yang Anda lihat, kita telah menyediakan atribut title untuk semua gambar dalam contoh kita.
Parameter speed
Parameter speed memungkinkan Anda untuk mengonfigurasi durasi transisi slide, dan diatur dalam miliseconds. Dalam contoh kita, kita telah menetapkannya menjadi 1000, dan dengan demikian slide akan diputar setiap detik.
bxSlider memiliki banyak opsi konfigurasi lain — Anda dapat mempelajarinya dalam dokumentasi opsi bsSlider resmi. Maju dan jelajahi berbagai opsi yang tersedia oleh library bxSlider. Ini juga menawarkan banyak kemungkinan penyesuaian dengan metode callback JavaScript.
Kesimpulan
Hari ini, kita membahas bagaimana Anda dapat mengatur slider dasar menggunakan library jQuery. Untuk tujuan demonstrasi, kita memilih library bxSlider yang dibangun di atas library jQuery. Kita juga membangun contoh dunia nyata dengan menggunakan berbagai opsi konfigurasi yang disediakan oleh library bxSlider.
Jika Anda pernah bekerja dengan library slider berbasis jQuery, saya akan senang mendengar dari Anda! Jangan ragu untuk membagikan pemikiran Anda menggunakan umpan di bawah ini.
