diff --git a/js/carousel/img/01.jpg b/js/carousel/img/01.jpg new file mode 100644 index 0000000..f1e3b0e Binary files /dev/null and b/js/carousel/img/01.jpg differ diff --git a/js/carousel/img/02.jpg b/js/carousel/img/02.jpg new file mode 100644 index 0000000..4c13804 Binary files /dev/null and b/js/carousel/img/02.jpg differ diff --git a/js/carousel/img/03.jpg b/js/carousel/img/03.jpg new file mode 100644 index 0000000..27cf550 Binary files /dev/null and b/js/carousel/img/03.jpg differ diff --git a/js/carousel/index.html b/js/carousel/index.html new file mode 100644 index 0000000..003d472 --- /dev/null +++ b/js/carousel/index.html @@ -0,0 +1,41 @@ + + + + Hôtel Molière + + + + + + + + + +
+ +
+
+
+ +
+
+ +
+
+ +
+
+ + +
+ + +
+ + + + + + + + diff --git a/js/carousel/main.js b/js/carousel/main.js new file mode 100644 index 0000000..383d900 --- /dev/null +++ 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" + } + } + +}) + diff --git a/js/carousel/style.css b/js/carousel/style.css new file mode 100644 index 0000000..8fbcb43 --- /dev/null +++ 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; +}