carousel added

2021-03-26 15:12:16 +01:00 · 2021-03-26 15:12:16 +01:00 · 6769ebcd95
parent d8cd1b7ffe
commit 6769ebcd95
6 changed files with 144 additions and 0 deletions
--- a/js/carousel/img/01.jpg
+++ b/js/carousel/img/01.jpg
--- a/js/carousel/img/02.jpg
+++ b/js/carousel/img/02.jpg
--- a/js/carousel/img/03.jpg
+++ b/js/carousel/img/03.jpg
--- a/js/carousel/index.html
+++ b/js/carousel/index.html
@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Hôtel Molière</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css"/>
+
+</head>
+
+
+<body>
+
+<div id="root">
+
+<div id="home-car-outer">
+  <div id="home-car-container" class="home-car-trans">
+    <div class="home-car-item" data-position="1">
+      <img src="img/01.jpg" alt=""/>
+    </div>
+    <div class="home-car-item" data-position="2">
+      <img src="img/02.jpg" alt=""/>
+    </div>
+    <div class="home-car-item" data-position="3">
+      <img src="img/03.jpg" alt=""/>
+    </div>
+  </div>
+
+
+</div>
+
+
+</div>
+
+</body>
+
+<script src="https://file.brz9.dev/web/js/vue/vue.min.js"></script>
+<script src="main.js"></script>
+
+
+</html>
--- a/js/carousel/main.js
+++ b/js/carousel/main.js
@ -0,0 +1,68 @@
+const fullscreencar = {
+  
+}
+
+let home_car_current = 1;
+
+let home_car_item_length = document.querySelectorAll(".home-car-item").length;
+
+function home_car_init() {
+  document.querySelectorAll(".home-car-item").forEach(
+    function(element, index) {
+      element.style.order = index+1;
+    });
+}
+
+home_car_init();
+
+function home_car_update_order() {
+  if (home_car_current == home_car_item_length) {
+    home_car_current = 1;
+  } else {
+    home_car_current++;
+  }
+
+  let order = 1;
+
+  for (let i = home_car_current; i <= home_car_item_length; i++) {
+    document.querySelector(".home-car-item[data-position='" + i + "']").style.order = order;
+    order++;
+  }
+
+  for (let i = 1; i < home_car_current; i++) {
+    document.querySelector(".home-car-item[data-position='" + i + "']").style.order = order;
+    order++;
+  }
+  
+  document.querySelector("#home-car-container").classList.remove('home-car-trans');
+  document.querySelector("#home-car-container").style.transform = 'translateX(0)';
+
+}
+
+function home_car_next() {
+  document.querySelector("#home-car-container").classList.add('home-car-trans');
+  document.querySelector("#home-car-container").style.transform = 'translateX(-100%)';
+ // home_car_update_order();
+  setTimeout(function(){console.log("check")
+    home_car_update_order();
+  },3000);
+}
+
+function home_car_loop() {
+  setInterval( function() {
+    home_car_next();
+  },10000);
+}
+
+home_car_loop();
+
+let vm = new Vue ({
+  el: "#root",
+  data () {
+    return {
+      text1: "Yolo world"
+    }
+  }
+
+})
+
--- a/js/carousel/style.css
+++ b/js/carousel/style.css
@ -0,0 +1,35 @@
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
+body {
+  
+}
+
+#home-car-outer {
+  overflow: hidden;
+}
+
+#home-car-container img {
+  width: 100%;
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
+  vertical-align: bottom;
+}
+
+#home-car-container {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+}
+
+#home-car-container {
+  transform: translateX(-0vw);
+}
+
+.home-car-trans {
+  transition: transform 2s ease-in-out;
+}