ed
/
brz9-cdn
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

carousel added

This commit is contained in:
ed barz 2021-03-26 15:12:16 +01:00
parent d8cd1b7ffe
commit 6769ebcd95
6 changed files with 144 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
js/carousel/img/01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
js/carousel/img/02.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
js/carousel/img/03.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

41
js/carousel/index.html Normal file
View File

@ -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>

68
js/carousel/main.js Normal file
View File

@ -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"
}
}
})

35
js/carousel/style.css Normal file
View File

@ -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;
}