Cara Membuat Carousel dengan HTML, CSS, dan JavaScript: Panduan Langkah demi Langkah.

Cara Membuat Carousel dengan HTML, CSS, dan JavaScript: Panduan Langkah demi Langkah.

Korsel adalah elemen yang banyak digunakan dalam antarmuka pengguna untuk menampilkan konten secara terorganisir dan interaktif. Carousel ini memungkinkan pengguna bernavigasi di antara berbagai elemen konten, baik berupa gambar, teks, atau kartu, dengan cara yang lancar dan menarik.

Pada artikel ini, kita akan melihat cara membuat Card Carousel hanya menggunakan HTML dan CSS, tanpa memerlukan perpustakaan atau kerangka kerja eksternal. Keterampilan ini sangat dihargai di pasar kerja, terutama bagi pengembang front-end yang ingin menciptakan antarmuka yang responsif dan efisien.

Kami akan membahas langkah-langkah yang diperlukan untuk membuat struktur HTML, menata gaya dengan CSS, menambahkan animasi dan kontrol dengan JavaScript, dengan cara yang jelas dan didaktik. Dengan pengetahuan ini, Anda akan dapat membuat carousel Anda sendiri, menyesuaikannya dengan berbagai proyek dan kebutuhan.

Untuk ini, diperlukan pengetahuan dasar tentang HTML, CSS, dan JavaScript. Selain itu, kami memerlukan editor kode pilihan Anda, seperti Visual Studio Code atau Sublime Text.

Mari kita mulai!

Mempersiapkan Lingkungan!

Sebelum kita mulai membuat carousel, kita perlu menyiapkan lingkungan pengembangan.

Mari kita mulai dengan membuat struktur HTML dasar untuk carousel kita. Kita bisa memulai dengan div yang akan membungkus seluruh carousel, dan di dalamnya, kita akan membuat div lain untuk kartunya. Misalnya:

<div class="carousel">
  <div class="card-container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
    <div class="card">Card 5</div>
  </div>
</div>

Dengan dibuatnya struktur dasar ini, kita dapat melanjutkan ke penataan gaya dengan CSS. Penting untuk diingat bahwa, untuk memastikan daya tanggap carousel pada perangkat yang berbeda, perlu menggunakan teknik desain responsif, seperti penggunaan kueri media.

Menata Korsel!

Dengan struktur HTML dasar yang telah dibuat, sekarang mari kita menata carousel kartu menggunakan CSS. Penting untuk diingat bahwa properti gaya akan bergantung pada tata letak dan tampilan yang ingin Anda buat untuk carousel Anda, namun berikut beberapa tips untuk memulai.

Kita bisa mulai dengan menentukan ukuran div “carousel” yang membungkus seluruh carousel.

.carousel {
  width: 100%; /* Width of carousel */
  height: 166px; /* Height of carousel */
}

Selanjutnya, mari kita beri gaya pada div yang akan berisi kartu-kartu tersebut. Kita dapat menggunakan properti “flex” untuk memposisikannya berdampingan dalam div “card-container”:

.card-container {
  width: 100%; /* Width of card container */
  display: flex; /* Set inline elements */
}

.card {
  min-width: 250px; /* Set min width of card */
  height: 150px; /* Set height of card */
}

Sekarang mari tambahkan properti CSS yang bertanggung jawab atas perilaku carousel:

.card-container {
  /* ... */
  overflow-x: auto; /* Set overflow in horizontal scroll */
  overflow-y: hidden; /* Hidden overflow in vertical scroll */
  scroll-snap-type: x mandatory; /* Force the scroll to snap to the start of a scroll-snap area */
  gap: 8px; /* Set gap between cards */
}

.card {
  /* ... */
  scroll-snap-align: start; /* Set the element focus position in scroll container */
}

Untuk membuat perilaku carousel, “card-container” kami menggunakan properti scroll-snap-type, yang menentukan cara suatu elemen bergulir dan berhenti pada titik tertentu di sepanjang prosesnya. Misalnya, jika Anda memiliki kontainer yang dapat di-scroll, Anda dapat menggunakan properti ini untuk memastikan kontainer berhenti tepat di tempat yang Anda inginkan. Ini seperti “lem” yang menjaga segala sesuatunya tetap di tempatnya saat Anda menggulir ke kiri atau ke kanan.

Dan elemen “card” kita menggunakan scroll-snap-alignproperty, yang menentukan di mana sebuah elemen harus “snap” ke dalam wadah bergulir. Ini mengontrol di mana elemen akan berhenti ketika Anda menggulir wadah. Anda dapat memilih di mana elemen akan dimasukkan ke dalam wadah, baik secara vertikal maupun horizontal. Jika Anda tidak menentukan nilai untuk satu sumbu, maka nilai tersebut akan diasumsikan sama dengan sumbu lainnya. Misalnya, jika Anda menyetel scroll-snap-align: center, elemen tersebut akan dipusatkan secara vertikal dan horizontal di dalam wadah saat Anda berhenti menggulir.

Mari kita membuatnya lebih cantik!

Pada titik ini, keunikan setiap proyek ikut berperan, karena inilah saatnya untuk menghidupkan gaya carousel. Berikut ini contohnya:

.card-container {
  /* ... */
  width: calc(100% - 16px);
  margin: 8px;
  flex: 0 0 calc(100% - 16px); /* Set width of card container */
}

.card-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome, Safari and Opera */
}

.card {
  /* ... */
  display: flex;
  justify-content: center;
  align-items: center;
  background:#17BF60;
  border: 1px solid #4F5873;
  color: #4a544c;
  border-radius: 8px;
}

.card:hover {
  background: #1ED96F; /* Set background color when hover */
}

Menambahkan klik untuk fokus

Sekarang saatnya menambahkan JavaScript kesayangan kita. Kami akan menambahkan pendengar acara untuk satu klik guna mengatur posisi gulir ke kartu fokus.

const listOfCardElements = document.querySelectorAll('.card');
const cardContainer = document.querySelector('.card-container');

listOfCardElements.forEach((cardElement, index) => {
  cardElement.addEventListener('click', () => {
    const scrollLeft = index * listOfCardElements[0].offsetWidth;
    cardContainer.scrollTo({ left: scrollLeft, behavior: 'smooth' });
  });
});

Kami menambahkan acara klik ke sekumpulan elemen dengan kelas CSS “kartu” dan menggulir wadah horizontal ke elemen kartu yang sesuai ketika diklik.

const scrollLeft = index * listOfCardElements[0].offsetWidth;
Menghitung jumlah piksel yang perlu digulir oleh penampung untuk menampilkan elemen kartu yang sesuai. Offset horizontal dihitung dengan mengalikan indeks elemen dengan lebarnya. Properti offsetWidth mengambil total lebar elemen, termasuk margin dan paddingnya.

cardContainer.scrollTo({ left: scrollLeft, behavior: 'smooth' });
Gunakan metode scrollTo dari elemen cardContainer untuk menggulir wadah secara horizontal ke posisi yang ditentukan oleh scrollLeft. Properti behavior disetel ke 'halus' untuk menggulir dengan lancar.

Kesimpulannya

Membuat carousel dengan HTML, CSS, dan JavaScript dapat menjadi keterampilan berharga bagi pengembang front-end yang ingin membuat antarmuka yang menarik dan responsif. Artikel ini memberikan panduan langkah demi langkah untuk membuat carousel kartu, mencakup langkah-langkah yang diperlukan untuk membuat struktur HTML, menata gaya dengan CSS, menambahkan animasi dan kontrol dengan JavaScript, dengan cara yang jelas dan mendidik. Dengan mengikuti langkah-langkah ini, seseorang dapat membuat carouselnya sendiri, menyesuaikannya dengan berbagai proyek dan kebutuhan. Selain itu, artikel tersebut membahas teknik desain responsif dan mendemonstrasikan cara menggunakan properti seperti “scroll-snap-type” dan “scroll-snap-align” untuk membuat carousel lebih menarik. Terakhir, artikel tersebut menunjukkan cara menambahkan pendengar peristiwa klik untuk mengatur posisi gulir ke kartu fokus.

Proyek di GitHub:
https://github.com/Pietrogon/carousel-example

LinkedIn saya
https://www.linkedin.com/in/pietrogon

Referensi

1. Properti “flex”: Situs web Mozilla Developer Network (MDN) adalah sumber yang bagus untuk mempelajari lebih lanjut tentang properti CSS, termasuk “flex”. Anda dapat menemukan informasi lebih lanjut di sini: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
2. Kueri media: Situs web MDN juga memiliki panduan komprehensif tentang cara menggunakan kueri media di CSS. Anda dapat menemukan informasi lebih lanjut di sini: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
3. Properti “scroll-snap-type”: Dokumentasi MDN juga merupakan tempat yang baik untuk mulai mempelajari properti CSS ini. Anda dapat menemukan informasi lebih lanjut di sini: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
4. Properti “scroll-snap-align”: Situs web W3C memiliki spesifikasi terperinci tentang properti CSS ini. Anda dapat menemukan informasi lebih lanjut di sini: https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-align-property