Translate Event: carousel

EmptyWork · EmptyWork · commit 71d6a2f51c02 · 2021-11-29T16:20:01.000+09:00
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
@@ -1,17 +1,18 @@
-The images ribbon can be represented as `ul/li` list of images `<img>`.
+Pita gambar bisa di diwakili sebagai `ul/li` daftar dari gambar `<img>`.
 
-Normally, such a ribbon is wide, but we put a fixed-size `<div>` around to "cut" it, so that only a part of the ribbon is visible:
+Biasanya, pita seperti itu sangat luas, tapi kita akan menambahkan ukuran tetap pada `<div>` untuk "memotong" pita, jadi hanya sebagian dari pita yang kelihatan:
 
 ![](carousel1.svg)
 
-To make the list show horizontally we need to apply correct CSS properties for `<li>`, like `display: inline-block`.
+Untuk menampilkan daftar secara horisontal kita perlu menambahkan properti CSS yang benar pada `<li>`, seperti `display: inline-block`.
 
-For `<img>` we should also adjust `display`, because by default it's `inline`. There's extra space reserved under `inline` elements for "letter tails", so we can use `display:block` to remove it.
+Untuk `<img>` kita sebaiknya juga mengatur `display`, karena bawaanya merupakan `inline`. Ada 
+For `<img>` we should also adjust `display`, because by default it's `inline`. Ada ruang ekstra yang disediakan di bawah elemen `inline` untuk "ekor huruf", jadi kita bisa menggunakan `display:block` untuk menghapusnya.
 
-To do the scrolling, we can shift `<ul>`. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`:
+Untuk membuat pengulirannya, kita bisa menggeser `<ul>`. Ada banyak cara untuk melakukannya, contohnya dengan menganti `margin-left` atau (performa lebih baik) gunakan `transform: translateX()`:
 
 ![](carousel2.svg)
 
-The outer `<div>` has a fixed width, so "extra" images are cut.
+`<div>` luar memiliki lebar tetap, jadi gambar "ekstra" dipotong.
 
-The whole carousel is a self-contained "graphical component" on the page, so we'd better wrap it into a single `<div class="carousel">` and style things inside it.
+Keseluruhan korsel(_carousel_) adalah "komponen grafis" mandiri pada halaman, jadi sebaiknya kita membungkusnya menjadi satu `<div class="carousel">` dan menata elemen-elemen ke dalamnya.
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html
@@ -27,35 +27,35 @@
   </div>
 
   <script>
-    /* label the images, just for convenience, to visually track them */
+    /* Beri label pada gambar untuk memudahkan */
     let i = 1;
     for(let li of carousel.querySelectorAll('li')) {
       li.style.position = 'relative';
       li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
       i++;
     }
 
-    /* configuration */
-    let width = 130; // image width
-    let count = 3; // visible images count
+    /* Konfigurasi */
+    let width = 130; // Lebar gambar
+    let count = 3; // Nomor gambar
 
     let list = carousel.querySelector('ul');
     let listElems = carousel.querySelectorAll('li');
 
-    let position = 0; // ribbon scroll position
+    let position = 0; // posisi gulir pita
 
     carousel.querySelector('.prev').onclick = function() {
       // shift left
       position += width * count;
-      // can't move to the left too much, end of images
+      // tidak bisa bergerak ke kiri terlalu banyak, gambar terakhir
       position = Math.min(position, 0)
       list.style.marginLeft = position + 'px';
     };
 
     carousel.querySelector('.next').onclick = function() {
       // shift right
       position -= width * count;
-      // can only shift the ribbbon for (total ribbon length - visible count) images
+      // hanya dapat menggeser pita untuk (panjang pita total - jumlah yang terlihat) gambar
       position = Math.max(position, -width * (listElems.length - count));
       list.style.marginLeft = position + 'px';
     };
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html
@@ -7,7 +7,7 @@
 
 <body>
 
-  <!-- create your markup and styles -->
+  <!-- buat markup dan style -->
 
   <button class="arrow">⇦</button>
   <button class="arrow">⇨</button>
@@ -28,16 +28,16 @@
 
 
   <script>
-    // label the images to visually track them, just for convenience,
-    // this code can be removed
+    // Beri label pada gambar untuk memudahkan
+    // kode ini bisa di hapuskan
     let i = 1;
     for(let li of carousel.querySelectorAll('li')) {
       li.style.position = 'relative';
       li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
       i++;
     }
 
-    // ...your code to make carousel alive!
+    // ...kodemu untuk membuat sebuah korsel(carousel)
   </script>
 
 </body>
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md
@@ -2,12 +2,13 @@ importance: 4
 
 ---
 
-# Carousel
+# Korsel (_Carousel_)
 
-Create a "carousel" -- a ribbon of images that can be scrolled by clicking on arrows.
+Buat sebuah "korsel" -- 
+Create a "carousel" -- pita gambar yang dapat digulir dengan mengklik panah.
 
 [iframe height=200 src="solution"]
 
-Later we can add more features to it: infinite scrolling, dynamic loading etc.
+Nanti kita akan menambahkah lebih banyak fitur: pengguliran tanpa batas, pemuatan dinamis dan seterusnya.
 
-P.S. For this task HTML/CSS structure is actually 90% of the solution.
+Tambahan: untuk tugas ini, struktur HTML/CSS merupakan 90% dari solusi.
