[Alpha ver] Prototype

assets/js/index.js

@@ -0,0 +1,90 @@
+console.log(document);
+let next = document.querySelector(".next");
+let prev = document.querySelector(".prev");
+let pgctrl = document.querySelectorAll(".pgctrl li");
+let slider = document.querySelector(".slider");
+let carousel = document.querySelector(".carousel");
+
+if (!document) console.log("press f");
+if (!next) console.log("Class next missing.");
+if (!prev) console.log("Class prev missing.");
+if (!pgctrl) console.log("Page Control missing.");
+if (!slider) console.log("Class slider missing.");
+if (!carousel) console.log("Class carousel missing.");
+let slider_index = 0;
+let touchstartX = 0;
+let touchendX = 0;
+
+function reset() {
+  for (var i = 0; i < slider.children.length; i++) {
+    slider.children[i].style.opacity = 0;
+    slider.children[i].style.zIndex = 0;
+    pgctrl[i].style.opacity = 0.4;
+  }
+}
+reset();
+set();
+function set() {
+  slider.children[slider_index].style.opacity = 1;
+  slider.children[slider_index].style.zIndex = 1;
+  pgctrl[slider_index].style.opacity = 1;
+}
+
+function dropdown_toggle() {
+  //
+}
+function nxt() {
+  reset();
+  //console.log("next");
+  if (slider_index < slider.children.length - 1) slider_index += 1;
+  else {
+    slider_index = 0;
+    //console.log("set to 1.");
+  }
+  set();
+}
+function prv() {
+  reset();
+
+  //console.log("prev");
+  if (slider_index > 0) slider_index -= 1;
+  else {
+    slider_index = slider.children.length - 1;
+    //console.log(`set to ${slider_index}.`);
+  }
+  set();
+}
+
+//next
+if (next) {
+  next.addEventListener("click", nxt);
+  setInterval(nxt, 30000);
+}
+
+//previous
+if (prev) prev.addEventListener("click", prv);
+
+//page control
+pgctrl.forEach(function (n, m) {
+  n.addEventListener("click", function () {
+    reset();
+    slider_index = m;
+    set();
+  });
+});
+
+function checkX() {
+  if (touchendX < touchstartX && touchstartX - touchendX > 50) nxt();
+  if (touchendX > touchstartX && touchendX - touchstartX > 50) prv();
+}
+//slider.children.forEach((carousel, num) => {
+carousel.addEventListener("touchstart", (e) => {
+  touchstartX = e.changedTouches[0].screenX;
+});
+carousel.addEventListener("touchend", (e) => {
+  touchendX = e.changedTouches[0].screenX;
+  checkX();
+});
+//});
+
+//location.reload(true);