Membuat gallery foto dengan bootstrap

Indonesian (Bahasa Indonesia) translation by Fitryan Wisnu Pratama (you can also view the original English article)

Dalam tutorial ini kita akan menggunakan slick.js, sebuah plugin jQuery yang populer, membangun galeri foto responsif yang atraktif. Berikut adalah galeri yang akan kita buat:

Pastikan untuk memeriksa versi layar penuh dan mengubah ukuran jendela browser Anda untuk melihat bagaimana tata letak perubahan tergantung pada ukuran viewport.

Apa itu slick.js?

Slick.js adalah sebuah plugin jQuery populer yang dibuat oleh Ken Wheeler yang memungkinkan Anda untuk membangun carousel responsif yang indah. Untuk lebih memahami apa yang ditawarkan oleh plugin ini, mari lihat dokumentasinya.

Untungnya, slick.js bekerja tidak hanya di semua browser modern, tetapi juga di beberapa yang lebih tua seperti IE 8+.

Terakhir, Anda mungkin juga ingin melihat versi WordPress nya.

Persiapan memulai dengan slick.js

Untuk memulai dengan slick, mulai dengan men-download dan menginstal file-file berikut dalam proyek Anda:

• jQuery (≥1.7)
• slick.css atau versi minified
  
• slick.js atau versi minified

Opsional, Anda mungkin ingin mengimpor file slick-theme.css.

Anda dapat mengambil salinan file slick dengan mengunjungi repo Github nya, dengan menggunakan manajer paket (misalnya npm), atau dengan memuat aset yang diperlukan melalui CDN (misalnya cdnjs). Untuk tutorial ini, saya akan memilih pilihan terakhir.

Selain itu, saya telah memasukkan Babel untuk mengkompilasi kode ES6 menjadi ES5 dan Lodash untuk memanfaatkan fungsi debounce (kita akan menggunakan yang kemudian).

Dengan itu, jika Anda melihat di bawah tab Settings demo pen kami, Anda akan melihat bahwa saya telah menyertakan satu eksternal file CSS dan tiga file JavaScript eksternal.

1. HTML

Pada titik ini, penting untuk memahami struktur halaman website kita. Yang terpenting, kita akan menentukan dua carousel yang memiliki gambar yang sama persis dan disinkronkan (kita akan membahas bagaimana nanti). Dimensi gambarnya adalah 860 x 550 piksel, meskipun dalam proyek Anda sendiri, ini mungkin berbeda.

Terakhir, sebagai bagian dari carousel kedua kita akan menentukan navigasi panah serta elemen yang terus melacak jumlah slide.

Berikut adalah struktur yang diperlukan untuk halaman demo kita:

<div class="loading">Carousel is loading...</div>
<div class="container">
  <div class="synch-carousels">
  
    <div class="left child">
      <div class="gallery">
        <div class="item">
          <img src="IMG_SRC" alt="">
        </div>
        <!-- 4 more images here -->
      </div>
    </div><!--/left-->
    
    <div class="right child">
      <div class="gallery2">
        <div class="item">
          <img src="IMG_SRC" alt="">
        </div>
        <!-- 4 more images here -->
      </div>
      <div class="nav-arrows">
        <button class="arrow-left">
          <!--svg here-->
        </button>
        <button class="arrow-right">
          <!--svg here-->
        </button>
      </div>
      <div class="photos-counter">
        <span></span><span></span>
      </div>
    </div><!--/right-->
    
  </div>
</div>

2 CSS.

Secara total, Galeri kita harus memiliki empat tampilan yang berbeda, tergantung pada viewport yang tersedia. Mari kita membayangka nya dengan mengikuti pendekatan mobile-first.

Saat jendela browser adalah kurang dari 480px, seharusnya terlihat seperti ini, dengan hanya carousel kedua dan navigasi yang muncul:

Kemudian, pada layar antara 480px dan 768px, harus seperti berikut ini, dengan dua thumbnail di bawah slide utama:

Selanjutnya, pada layar antara 769px dan 1023px, kami akan memunculkan thumbnail ketiga:

Terakhir, pada layar besar (≥1024px), harus sebagai berikut, dengan thumbnail muncul ke sisi (perhatikan bahwa mereka tidak begitu pas pada gambar ini secara keseluruhan):

Semua kasus di atas dilayani dalam media queries yang ditunjukkan di bawah ini:

.synch-carousels {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.synch-carousels > * {
  width: 100%;
}

.synch-carousels .right {
  order: -1;
}

.synch-carousels .left {
  overflow: hidden;
}

.synch-carousels .gallery {
  display: none;
}

.synch-carousels .gallery .slick-list {
  height: auto !important;
  margin: 0 -20px;
}

.synch-carousels .gallery .slick-slide {
  margin: 0 20px;
}

@media screen and (min-width: 480px) {
  .synch-carousels .right {
    margin-bottom: 20px;
  }

  .synch-carousels .gallery {
    display: block;
  }
}

@media screen and (min-width: 1024px) {
  .synch-carousels .right {
    position: relative;
    width: calc(100% - 230px);
    margin-bottom: 0;
    order: 2;
  }

  .synch-carousels .left {
    width: 210px;
  }

  .synch-carousels .gallery .slick-slide {
    margin: 0 0 20px 0;
  }

  .synch-carousels .gallery .slick-list {
    margin: 0;
  }
}

Perhatikan ada aturan !important. Ini akan menimpa style inline slick.

3 JavaScript.

Sekarang mari kita perhatikan hal-hal yang berhubungan dengan JavaScript.

Caching Selectors

Ketika DOM sudah siap, sebagai praktik yang tepat kita cache beberapa selector yang umum digunakan:

const $left = $(".left");
const $gl = $(".gallery");
const $gl2 = $(".gallery2");
const $photosCounterFirstSpan = $(".photos-counter span:nth-child(1)");

Inisialisasi Carousels

Kemudian, kami menginisialisasi dan mensinkronisasi kedua carousels. Kode yang digunakan dalam langkah ini adalah sebagai berikut:

$gl.slick({
  rows: 0,
  slidesToShow: 2,
  arrows: false,
  draggable: false,
  useTransform: false,
  mobileFirst: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 1023,
      settings: {
        slidesToShow: 1,
        vertical: true
      }
    }
  ]
});

$gl2.slick({
  rows: 0,
  useTransform: false,
  prevArrow: ".arrow-left",
  nextArrow: ".arrow-right",
  fade: true,
  asNavFor: $gl
});

Tanpa diragukan lagi, cara terbaik untuk memahami bagaimana kode bekerja adalah untuk membaca dokumentasi slick. Namun, saya akan menjelaskan dua hal penting berikut ini:

• Opsi konfigurasi asNavFor memungkinkan kita untuk mensinkronisasi carousel dan menggunakan salah satu nya sebagai navigasi untuk yang lain.
• Secara default, slick menggunakan CSS transformasi. Dalam kasus ini, kita menonaktifkan mereka dengan menetapkan useTransform: false. Hal ini dikarenakan mereka menyebabkan gangguan kecil di slide pertama pada carousel pertama saat dibuka di layar besar (kita bisa menonaktifkan mereka hanya pada carousel pertama).

Menampilkan dan Menyesuaikan Tata Letak Galeri

Galeri kita seharusnya terlihat hanya ketika semua halaman aset siap. Pada awalnya, preloader opsional muncul-lihat kembali markup, tampak seperti ini:

<div class="loading">Carousel is loading...</div>

Pada titik ini, kita harus berpikir lagi tentang tata letak galeri yang diinginkan pada layar besar. Jika Anda melihat kembali screenshot yang sesuai, Anda akan melihat bahwa kedua carousel memiliki tinggi yang sama. Untuk mencapai perilaku yang diinginkan, kita harus menulis beberapa kode JavaScript khusus (di luar CSS kami). Kode ini akan secara dinamis mengatur ketinggian carousel pertama sama dengan tinggi yang kedua (atau sebaliknya).

Mengetahui persyaratan di atas, berikut adalah kode yang berjalan ketika seluruh halaman siap:

$(window).on("load", () => {
  handleCarouselsHeight();
  setTimeout(() => {
    $(".loading").fadeOut();
    $("body").addClass("over-visible");
  }, 300);
});

Dan ini adalah deklarasi fungsi handleCarouselsHeight:

function handleCarouselsHeight() {
  if (window.matchMedia("(min-width: 1024px)").matches) {
    const gl2H = $(".gallery2)").height();
    $left.css("height", gl2H);
  } else {
    $left.css("height", "auto");
  }
}

Ketika halaman load, galeri bekerja baik. Tapi juga harus bekerja seperti yang diharapkan ketika jendela browser akan diubah ukurannya.

Kode yang berkaitan dengan situasi tersebut ditunjukkan di bawah ini:

$(window).on(
  "resize",
  _.debounce(() => {
    handleCarouselsHeight();
  }, 200)
);

Perhatikan bahwa event handler dibungkus dalam fungsi debounce. Ini adalah fungsi Lodash yang membantu kita membatasi jumlah berapa kali handler ini dipanggil.

Bekerja dengan slick Events dan Methods

Sekarang kita telah berhasil menerapkan fungsi utama dari Galeri kita, mari kita melompat satu langkah lebih lanjut dan membangun beberapa hal opsional.

Pertama, di sudut kanan atas dari carousel kedua kita tampilkan slide saat ini dan jumlah slide.

Untuk mencapai hal ini, kita memanfaatkan init dan afterChange slick events.

Berikut adalah kode yang terkait:

/*you have to bind init event before slick's initialization (see demo) */
gl2.on("init", (event, slick) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
  $(".photos-counter span:nth-child(2)").text(slick.slideCount);
});

$gl2.on("afterChange", (event, slick, currentSlide) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
});

Sebagai perbaikan lebih lanjut, setiap kali kita klik pada slide carousel pertama , slide terkait pada carousel kedua harus aktif. Berkat metode slickGoTo, kita sudah mampu mengembangkan fungsi ini.

Berikut adalah kode yang terkait:

$(".gallery .item").on("click", function() {
  const index = $(this).attr("data-slick-index");
  $gl2.slick("slickGoTo", index);
});

4. Browser Support

Demo harus bekerja dengan baik di semua browser dan Anda dapat dengan aman menggunakannya dalam proyek Anda.

Saya hanya menemukan satu bug kecil di beberapa browser (Firefox, Edge) saat menguji demo di layar besar. Saat Anda mengklik panah navigasi, semua slide carousel pertama terlepas dari yang pertama, gagal mencapai tepi atas induknya dan meninggalkan satu celah piksel:

Last but not least, perbaikan kecil dan kustomisasi mungkin diperlukan karena jendela akan diubah ukurannya, tergantung pada kebutuhan Anda.

Kesimpulan

Dalam tutorial ini, kita memanfaatkani slick.js dan berhasil membangun sebuah galeri responsif yang indah. Mudah-mudahan sekarang, Anda siap untuk mencoba pelaksanaan ini dalam proyek Anda sendiri. Jika itu terjadi, jangan ragu untuk berbagi link proyek Anda di komentar di bawah ini!

Proyek JavaScript Lain untuk Mempercantik Website Anda