30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. jQuery
Webdesign

Bagaimana Membuat Slider Carousel Responsif Layar Penuh dengan Owl.js

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Dalam postingan sebelumnya saya sudah menunjukkan kepada anda bagaimana membangun galeri gambar secara kustom dengan slick.js. Hari ini saya akan membahas proses pembuatan animasi, responsif, layar penuh / full-screen slider carousel dengan owl.js (atau "Owl Carousel").

Seperti biasa, untuk mendapatkan gambaran awal tentang apa yang akan kita bangun, lihatlah demo CodePen terkait (Lihat versi yang lebih besar untuk pengalaman yang lebih baik):

Apa itu Owl Carousel?

Owl.js adalah sebuah plugin jQuery populer yang diciptakan oleh David Deutch yang memungkinkan anda membangun carousel yang menarik serta responsif. Untuk lebih memahami apa yang plugin ini dapat tawarkan kepada anda, periksalah demo berikut.

Cukup menyenangkan, Owl.js memiliki dukungan browser yang luar biasa, setelah diuji pada perangkat berikut:

  • Chrome
  • Firefox
  • Opera
  • IE7/8/10/11
  • iPad Safari
  • iPod4 Safari
  • Nexus 7 Chrome
  • Galaxy S4
  • Nokia 8s Windows8

Untuk keterangan lebih lanjut lihatlah pada dokumentasi.

Memulai dengan Owl.js

Untuk memulai dengan owl.js, mulailah dengan mengunduh dan menginstal file berikut pada proyek anda:

  • jQuery
  • owl.carousel.css atau versi minified
  • owl.carousel.js atau versi minified

Opsional, Anda mungkin ingin mengimpor file owl.theme.default.css.

Anda dapat mengambil salinan file owl carousel yang sesuai dengan mengunjungi repositori Github-nya, dengan menggunakan package manager (misalnya. npm), atau dengan memuat aset yang diperlukan melalui CDN (misalnya: cdnjs). Untuk tutorial ini, saya akan memilih opsi terakhir.

Untuk keperluan tutorial ini, di luar file owl carousel, saya juga memasukkan Babel dan Bootstrap 4.

Dengan memperhatikan hal itu, jika anda melihat di bawah tab Settings di demo codepen kami, anda akan melihat bahwa saya telah menyertakan tiga file CSS eksternal dan dua file JavaScript eksternal.

CSS Settings on Codepen
JavaScript settings on CodePen

1. HTML

Untuk memulai hal-hal tersebut kita mendefinisikan carousel yang memiliki tiga slide. Masing-masing slide tersebut berisi judul, subtitle, dan tombol ajakan bertindak (call-to-action button).

Berikut adalah struktur yang diperlukan untuk halaman demo kami:

Perlu disebutkan dua hal pada tahap ini:

  1. Kode di atas memanfaatkan kelas Bootstrap 4. Framework Bootstrap tidaklah penting; saya memasukkannya hanya karena saya ingin mempercepat proses pengembangan CSS.
  2. Saya menambahkan gambar latar belakang pada setiap slide melalui inline-style. Seringkali, ketika anda berurusan dengan konten yang dinamis, ini merupakan metode CSS yang paling umum untuk menambahkan gambar latar belakang.

2. CSS

Dengan HTML yang sudah berada pada tempatnya, mari kita lihat CSS style yang akan kami terapkan pada halaman. Untuk kemudahan, kami hanya akan membahas sebagian dari style yang tersedia.

Pertama, kami mendefinisikan dua properti khusus dan dua kelas pembantu:

Selanjutnya, kami menentukan style untuk slide carousel, termasuk transisi:

Terakhir, kami menetapkan beberapa aturan untuk metode navigasi:

Catatan: Slide harus menutupi tinggi tampilan window secara penuh dan karena itu kita memberi mereka height: 100vh. Namun, seperti unit ini tidak konsisten di beberapa perangkat (misalnya perangkat iOS), pilihan lain adalah untuk mengatur tinggi slide melalui JavaScript (Lihatlah panel demo JavaScript untuk informasi lebih lanjut)

3. JavaScript

Pada tahap ini kita siap untuk mengalihkan perhatian kita untuk JavaScript.

Inisialisasi Carousel

Sebagai langkah pertama, kita akan menginisialisasi carousel. Secara default plugin menyediakan "dots navigasi" atau navigasi berupa titik, tetapi carousel yang kita buat juga akan mencakup navigasi berupa anak panah.

owl navigation options
Pilihan navigasi Owl

Kami mengaktifkan pilihan navigasi dari properti konfigurasi nav. Selain itu, kami mendefinisikan beberapa SVG khusus sebagai anak panah berkat properti konfigurasi navText.

Kode yang mengaktifkan carousel ditampilkan seperti di bawah ini:

Menambahkan Animasi ke Elemen Slide 

Sebagai langkah selanjutnya, kami menganimasikan isi dari setiap slide. Behavior / perilaku ini ditangani melalui event change yang disediakan oleh owl.

Berikut adalah kode terkait:

Jadi setiap kali kami mengunjungi slide baru, pertama-tama isi dari semua slide menghilang. Kemudian, isi slide saat ini muncul dengan slide-in animation yang bagus.

Catatan: Sebagai ganti dari event changed kami dapat menggunakan event yang sama yaitu event translated.

Sejauh ini, kami telah melihat bagaimana animasi diaktifkan saat kami menggulirkan slide. Namun kami juga ingin jenis animasi seperti itu pada awalnya carousel dimuat. Untuk menerapkan fungsi ini, kami akan menggunakan event initialized.

Berikut kode yang terkait dengan event ini:

Di dalam event tersebut kami menambahkan kelas is-transitioned ke elemen slide pertama.

Hal ini penting untuk dicatat bahwa event ini harus dilampirkan sebelum inisialisasi carousel.

Mencegah Page Jump ketika Proses Load

Sebelum melanjutkan, mari kita bahas satu hal yang rumit. Jika anda melihat halaman demo, anda akan melihat bahwa ada elemen section yang didefinisikan di bawah carousel. Secara default, sampai carousel dimuat, section / bagian konten muncul dan lompatan kecil / small jump terjadi di halaman kami.

Ada dua cara untuk memperbaiki perilaku yang tidak diinginkan ini. Pertama, kita dapat menambahkan preloader (kita sudah melakukannya dalam tutorial yang terkait tentang slick carousel). Opsi kedua yang akan kami terapkan di sini adalah menyembunyikan section dan menampilkannya segera setelah carousel diinisialisasi.

Dalam hal kode, aturan CSS yang dibutuhkan adalah seperti ini:

Dan kode JavaScript-nya:

Mengatur Posisi Titik

Hal terakhir yang harus kita lakukan adalah memposisikan navigasi titik. Secara default, itu benar-benar diposisikan secara absolute. Hal-hal berikut harus terjadi:

  1. Ini harus disejajarkan secara horizontal dengan elemen .owl-slide-text dari slide target.
  2. Ini harus diposisikan di bawah elemen itu dengan jarak atas 20px.

Fungsi yang menjalankan dan menetapkan posisi yang diinginkan untuk titik-titik kami adalah setOwlDotsPosition.

Inilah fungsi tersebut:

Ini mengisolasi elemen .owl-slide-text dari slide yang aktif dan melewatkannya sebagai argumen untuk sub-fungsi pada doDotsCalculations.

Berikut adalah subfungsinya:

Dalam fungsi ini kami mengatur nilai-nilai top dan left yang sesuai dari elemen .owl-dots. Berdasarkan pada ketinggian dan posisi elemen target.

Menyediakan dukungan Resize Browser

Selangkah lebih maju, posisi titik-titik harus diperbarui saat kami mengubah ukuran jendela browser. Untuk mencapai hal ini, kami mengambil keuntungan dari event resize pada owl carousel.

Berikut adalah kode yang diperlukan:

Posisi tergantung pada isi

Terakhir tetapi bukanlah yang paling akhir, kita melakukan navigasi melalui slide titik-titik harus direposisi tergantung pada tinggi dan kedudukan isi slide yang aktif. Berkat event changed lagi, kami akan mampu memecahkan kebutuhan baru.

Berikut adalah kode yang terkait:

Saran yang Membangun

Sebelum menutup, mari kita bahas satu bug umum pada owl carousel. Jika kita menghapus bagian yang berada di bawah carousel, vertikal scrollbar akan menghilang dan sebagian slide yang berdekatan muncul.

How to remove the right gap when there isnt vertical scrollbar

Untuk memperbaikinya, kami memicu event refresh setelah inisialisasi carousel, seperti ini: $($owlCarousel).trigger("refresh.owl.carousel");

4. Dukungan Browser

Demo seharusnya berfungsi dengan baik di semua browser terbaru dan anda dapat menggunakannya dengan aman pada proyek Anda. Inilah pengingat tentang apa yang telah kita buat:

Kesimpulan

Dalam tutorial menyeluruh ini, kami berhasil membuat animasi slider carousel layar penuh dengan owl.js. Semoga anda telah mendapatkan keterampilan baru yang dapat anda praktikkan dalam proyek mendatang anda. Seperti biasa, jika ada pertanyaan, beri tahu saya pada kolom komentar di bawah.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.