Cara menggunakan slider html responsive

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

• 2

  82 atau versi minified
  

• 2

  83 atau versi minified

Opsional, Anda mungkin ingin mengimpor file

2

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.

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:

1

<div class="owl-carousel owl-theme">

2

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

3

    <div class="container">

4

      <div class="row justify-content-center justify-content-md-start">

5

        <div class="col-10 col-md-6 static">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

2

<div class="owl-carousel owl-theme">

2

2

2

2

2

<div class="owl-carousel owl-theme">

2

2

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

3

3

3

3

3

3

3

3

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:

1

3

2

    <div class="container">

3

    <div class="container">

4

    <div class="container">

5

<div class="owl-carousel owl-theme">

    <div class="container">

<div class="owl-carousel owl-theme">

4

<div class="owl-carousel owl-theme">

    <div class="container">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

4

2

4

2

4

2

      <div class="row justify-content-center justify-content-md-start">

2

    <div class="container">

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

1

      <div class="row justify-content-center justify-content-md-start">

2

      <div class="row justify-content-center justify-content-md-start">

3

      <div class="row justify-content-center justify-content-md-start">

4

5

5

    <div class="container">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

5

<div class="owl-carousel owl-theme">

5

<div class="owl-carousel owl-theme">

        <div class="col-10 col-md-6 static">

<div class="owl-carousel owl-theme">

        <div class="col-10 col-md-6 static">

2

        <div class="col-10 col-md-6 static">

2

    <div class="container">

2

2

        <div class="col-10 col-md-6 static">

2

<div class="owl-carousel owl-theme">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

<div class="owl-carousel owl-theme">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

<div class="owl-carousel owl-theme">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

<div class="owl-carousel owl-theme">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

    <div class="container">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

3

<div class="owl-carousel owl-theme">

3

<div class="owl-carousel owl-theme">

3

    <div class="container">

3

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

    <div class="container">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

    <div class="container">

Terakhir, kami menetapkan beberapa aturan untuk metode navigasi:

1

<div class="owl-carousel owl-theme">

2

<div class="owl-carousel owl-theme">

3

<div class="owl-carousel owl-theme">

4

    <div class="container">

5

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

    <div class="container">

2

2

<div class="owl-carousel owl-theme">

2

<div class="owl-carousel owl-theme">

2

<div class="owl-carousel owl-theme">

2

    <div class="container">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

<div class="owl-carousel owl-theme">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

<div class="owl-carousel owl-theme">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

<div class="owl-carousel owl-theme">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

<div class="owl-carousel owl-theme">

3

<div class="owl-carousel owl-theme">

3

    <div class="container">

Catatan: Slide harus menutupi tinggi tampilan window secara penuh dan karena itu kita memberi mereka

2

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.

Kami mengaktifkan pilihan navigasi dari properti konfigurasi 

2

2

Kode yang mengaktifkan carousel ditampilkan seperti di bawah ini:

1

<div class="owl-carousel owl-theme">

2

<div class="owl-carousel owl-theme">

3

<div class="owl-carousel owl-theme">

4

<div class="owl-carousel owl-theme">

5

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

Menambahkan Animasi ke Elemen Slide 

Sebagai langkah selanjutnya, kami menganimasikan isi dari setiap slide. Behavior / perilaku ini ditangani melalui event

2

Berikut adalah kode terkait:

1

<div class="owl-carousel owl-theme">

2

<div class="owl-carousel owl-theme">

3

<div class="owl-carousel owl-theme">

4

<div class="owl-carousel owl-theme">

5

<div class="owl-carousel owl-theme">

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

2

2

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

2

Berikut kode yang terkait dengan event ini:

1

2

2

2

3

2

4

2

5

2

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

Di dalam event tersebut kami menambahkan kelas

2

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

2

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

2

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

1

2

2

2

3

    <div class="container">

Dan kode JavaScript-nya:

1

2

2

2

3

2

4

2

5

2

<div class="owl-carousel owl-theme">

2

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

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

   2

   95 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

2

Inilah fungsi tersebut:

1

2

2

2

3

2

4

    <div class="container">

Ini mengisolasi elemen

2

2

Berikut adalah subfungsinya:

1

2

2

2

3

2

4

2

5

<div class="owl-carousel owl-theme">

2

<div class="owl-carousel owl-theme">

2

<div class="owl-carousel owl-theme">

2

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

    <div class="container">

Dalam fungsi ini kami mengatur nilai-nilai

2

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

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

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

Berikut adalah kode yang diperlukan:

1

2

2

2

3

2

4

2

5

<div class="owl-carousel owl-theme">

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

2

Berikut adalah kode yang terkait:

1

2

2

2

3

4

<div class="owl-carousel owl-theme">

5

2

<div class="owl-carousel owl-theme">

2

<div class="owl-carousel owl-theme">

<div class="owl-carousel owl-theme">

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.

Untuk memperbaikinya, kami memicu event

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">

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.