Step 5 - Edit nav and carousel

public/css/css.css

@@ -229,16 +229,45 @@ img {
 }
 
 .nav-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex: auto;
   padding: 1.5rem 0;
   text-align: center;
-  border-bottom: 2px solid transparent;
+  border-bottom: transparent;
 }
 
-.nav-item[data-selected='true'] {
+.nav[data-nav-type="1"],
+.nav[data-nav-type="2"] {
+  border-bottom: 1px solid #eee;
+}
+
+.nav[data-nav-type="1"] .nav-item[data-selected="true"],
+.nav[data-nav-type="2"] .nav-item[data-selected="true"] {
   border-bottom: 2px solid #FFD500;
 }
 
+.nav[data-nav-type="4"] .nav-item {
+  padding: 1rem 0;
+}
+
+.nav[data-nav-type="4"] .nav-item > div {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50em;
+}
+
+.nav[data-nav-type="4"] .nav-item[data-selected="true"] > div {
+  background: #FFD500;
+}
+
+.nav[data-nav-type="2"] .nav-item[data-selected="false"],
+.nav[data-nav-type="3"] .nav-item[data-selected="false"],
+.nav[data-nav-type="4"] .nav-item[data-selected="false"] {
+  color: #999;
+}
+
 .box {
   background-color: #FFF;
   border-bottom: 1px solid #E6E6E6;
@@ -259,7 +288,80 @@ img {
 }
 
 .carousel {
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-item {
+  display: none;
+  position: relative;
+  float: left;
+  width: 100%;
+  margin-left: -100%;
+}
+
+.carousel-item {
+  display: none;
+}
+
+.carousel-item.prev,
+.carousel-item.active,
+.carousel-item.next {
+  display: block;
+}
+
+/* carousel transition */
+.carousel-item {
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(0%);
+}
+.carousel-item.active:not(.reverse) {
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(100%);
+}
+.carousel-item.next:not(.reverse) {
+  transition: none;
+  transform: translateX(200%);
+}
+
+/* carousel transition (reverse) */
+.carousel-item.prev.reverse {
+  transition: none;
+  transform: translateX(0%);
+}
+.carousel-item.active.reverse {
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(100%);
+}
+.carousel-item.next.reverse {
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(200%);
+}
+
+.carousel-button-prev {
+  left: 1rem;
+}
+.carousel-button-next {
+  right: 1rem;
+}
+.carousel-button-prev,
+.carousel-button-next {
+  width: 2rem;
+  height: 2rem;
+  margin: auto 0rem;
+  position: absolute;
+  border-radius: 50rem;
+  border: 1px solid #fff;
+  background-color: #0003;
+  color: #fff;
 }
 
 .quicklink {

public/js/js.js

@@ -28,7 +28,7 @@ function show(str) {
   })
 }
 
-function hideOne(str) {
+function showOne(str) {
   findOne(str).classList.remove('d-none')
 }
 
@@ -48,7 +48,7 @@ function initNavItems() {
 }
 
 function clickNavItem(e) {
-  selectNavItem(e.target)
+  selectNavItem(e.currentTarget)
 }
 
 function selectNavItem(navItem) {
@@ -69,10 +69,91 @@ function selectNavItem(navItem) {
   show(navItem.dataset.target)
 }
 
+/*
+
+  carousel
+
+*/
+
+function initCarousel() {
+  find('.carousel').forEach(element => {
+    const carouselId = element.getAttribute('id')
+    const items = find(`#${carouselId} .carousel-item`)
+    const carouselInfo = {
+      index: 0,
+      items: items,
+      nItems: items.length,
+      isOnTransition: false,
+    }
+
+    // add click event listener to prev button
+    findOne(`#${carouselId} .carousel-button-prev`)
+    .addEventListener('click', () => showNextCarouselItem(carouselInfo, true))
+
+    // add click event listener to next button
+    findOne(`#${carouselId} .carousel-button-next`)
+    .addEventListener('click', () => showNextCarouselItem(carouselInfo))
+
+    // show first item
+    showNextCarouselItem(carouselInfo)
+
+    // set interval event
+    setInterval(() => showNextCarouselItem(carouselInfo), 5000)
+  })
+}
+
+function showNextCarouselItem(carouselInfo, isReversed = false) {
+  const { items, nItems, isOnTransition } = carouselInfo
+  let { index } = carouselInfo
+
+  // prevent duplicated transition
+  if (isOnTransition) return
+  carouselInfo.isOnTransition = true
+
+  // set index
+  if (isReversed)
+    index--
+  else
+    index++
+  index = (index + nItems) % nItems
+  carouselInfo.index = index
+
+  // find items to transit
+  const prevItem = items[(index - 1 + nItems) % nItems]
+  const nowItem = items[index]
+  const nextItem = items[(index + 1) % nItems]
+
+  // remove all prev/active/next classes
+  items.forEach(item => {
+    item.classList.remove('prev')
+    item.classList.remove('active')
+    item.classList.remove('next')
+    item.classList.remove('reverse')
+  })
+
+  // add prev/active/next class
+  prevItem.classList.add('prev')
+  nowItem.classList.add('active')
+  nextItem.classList.add('next')
+
+  // add reverse class
+  if (isReversed) {
+    prevItem.classList.add('reverse')
+    nowItem.classList.add('reverse')
+    nextItem.classList.add('reverse')
+  }
+
+  // end of transition
+  setTimeout(() => {
+    carouselInfo.isOnTransition = false
+  }, 300)
+}
+
 /*
 
   init
 
 */
 
-initNavItems()
+initNavItems()
+initCarousel()