Skip to content

Commit 8c3caf5

Browse files
supermario-ai-8815supermario-ai-8815
authored
Add files via upload
1 parent cad61e6 commit 8c3caf5

File tree

8 files changed

+250
-0
lines changed

8 files changed

+250
-0
lines changed

‎app.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const upBtn = document.querySelector('.up-button')
2+
const downBtn = document.querySelector('.down-button')
3+
4+
const sidebar = document.querySelector('.sidebar')
5+
const container = document.querySelector('.container')
6+
const mainSlide = document.querySelector('.main-slide')
7+
8+
const slidesCount = mainSlide.querySelectorAll('div').length
9+
let activeSlideIndex = 0
10+
11+
sidebar.style.top = `-${(slidesCount - 1) * 100}vh`
12+
13+
upBtn.addEventListener('click', () => {
14+
changeSlide('up')
15+
})
16+
17+
downBtn.addEventListener('click', () => {
18+
changeSlide('down')
19+
})
20+
21+
document.addEventListener('keydown',
22+
event => {
23+
if (event.key === 'ArrowUp') {
24+
changeSlide ('up')
25+
} else if (event.key === 'ArrowDown') {
26+
changeSlide ('down')
27+
}
28+
}
29+
)
30+
31+
function changeSlide (direction) {
32+
if (direction === 'up') {
33+
console.log('up++')
34+
activeSlideIndex += 1
35+
if (activeSlideIndex === slidesCount) {
36+
activeSlideIndex = 0
37+
}
38+
} else if (direction === 'down') {
39+
console.log('down--')
40+
activeSlideIndex -= 1
41+
if (activeSlideIndex < 0) {
42+
activeSlideIndex = slidesCount - 1
43+
}
44+
}
45+
46+
const height = container.clientHeight
47+
mainSlide.style.transform = `translateY(-${activeSlideIndex * height}px)`
48+
49+
sidebar.style.transform = `translateY(${activeSlideIndex * height}px)`
50+
}

‎img.blue.jpg‎

203 KB
Loading

‎img.pink.jpg‎

196 KB
Loading

‎img.red.jpg‎

87.8 KB
Loading

‎img.yellow.jpg‎

219 KB
Loading

‎index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
/>
10+
<link rel="stylesheet" href="style.css" />
11+
<title>Слайдер вертикальный</title>
12+
</head>
13+
<body>
14+
<div class="container">
15+
<div class="sidebar">
16+
<div
17+
style="
18+
background: linear-gradient(229.99deg, #0791f9 26%, #020f7f 145%);
19+
"
20+
>
21+
<h1>Snow in the desert</h1>
22+
<p>Love, death & robots</p>
23+
</div>
24+
<div
25+
style="
26+
background: linear-gradient(215.32deg, #f90306 -1%, #9e0706 124%);
27+
"
28+
>
29+
<h1>Life Hutch</h1>
30+
<p>Love, death & robots</p>
31+
</div>
32+
<div
33+
style="
34+
background: linear-gradient(221.87deg, #8308ea 1%, #5305af 128%);
35+
"
36+
>
37+
<h1>Zima Blue</h1>
38+
<p>Love, death & robots</p>
39+
</div>
40+
<div
41+
style="
42+
background: linear-gradient(220.16deg, #ffe101 -8%, #f39102 138%);
43+
"
44+
>
45+
<h1>Automated Customer Service</h1>
46+
<p>Love, death & robots</p>
47+
</div>
48+
</div>
49+
<div class="main-slide">
50+
<div
51+
style="
52+
background-image: url('/marathon-urok-3/marathon-urok-3/img/img.yellow.jpg');
53+
"
54+
></div>
55+
<div
56+
style="
57+
background-image: url('/marathon-urok-3/marathon-urok-3/img/img.pink.jpg');
58+
"
59+
></div>
60+
<div
61+
style="
62+
background-image: url('/marathon-urok-3/marathon-urok-3/img/img.red.jpg');
63+
"
64+
></div>
65+
<div
66+
style="
67+
background-image: url('/marathon-urok-3/marathon-urok-3/img/img.blue.jpg');
68+
"
69+
></div>
70+
</div>
71+
<div class="controls">
72+
<button class="down-button">
73+
<i class="fas fa-arrow-down"></i>
74+
</button>
75+
<button class="up-button">
76+
<i class="fas fa-arrow-up"></i>
77+
</button>
78+
</div>
79+
</div>
80+
<script src="app.js"></script>
81+
</body>
82+
</html>

‎package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "marathon-urok-3",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.html",
6+
"scripts": {
7+
"start": "parcel index.html --open",
8+
"build": "parcel build index.html"
9+
},
10+
"dependencies": {
11+
"parcel-bundler": "^1.6.1"
12+
},
13+
"devDependencies": {
14+
"@babel/core": "7.2.0",
15+
"typescript": "4.4.4"
16+
},
17+
"resolutions": {
18+
"@babel/preset-env": "7.13.8"
19+
},
20+
"keywords": []
21+
}

‎style.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
body {
10+
font-family: "Roboto", sans-serif;
11+
height: 100vh;
12+
}
13+
14+
.container {
15+
position: relative;
16+
overflow: hidden;
17+
width: 100vw;
18+
height: 100vh;
19+
}
20+
21+
.sidebar {
22+
height: 100%;
23+
width: 35%;
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
transition: transform 0.5s ease-in-out;
28+
}
29+
30+
.sidebar > div {
31+
height: 100%;
32+
width: 100%;
33+
display: flex;
34+
flex-direction: column;
35+
align-items: center;
36+
justify-content: center;
37+
color: #fff;
38+
}
39+
40+
.sidebar h1 {
41+
font-size: 40px;
42+
margin-bottom: 10px;
43+
margin-top: -30px;
44+
}
45+
46+
.main-slide {
47+
height: 100%;
48+
position: absolute;
49+
top: 0;
50+
left: 35%;
51+
width: 65%;
52+
transition: transform 0.5s ease-in-out;
53+
}
54+
55+
.main-slide > div {
56+
background-repeat: no-repeat;
57+
background-size: cover;
58+
background-position: center center;
59+
height: 100%;
60+
width: 100%;
61+
}
62+
63+
button {
64+
background-color: #fff;
65+
border: none;
66+
color: #aaa;
67+
cursor: pointer;
68+
font-size: 16px;
69+
padding: 15px;
70+
}
71+
72+
button:hover {
73+
color: #222;
74+
}
75+
76+
button:focus {
77+
outline: none;
78+
}
79+
80+
.container .controls button {
81+
position: absolute;
82+
left: 35%;
83+
top: 50%;
84+
z-index: 100;
85+
}
86+
87+
.container .controls .down-button {
88+
transform: translateX(-100%);
89+
border-top-left-radius: 5px;
90+
border-bottom-left-radius: 5px;
91+
}
92+
93+
.container .controls .up-button {
94+
transform: translateY(-100%);
95+
border-top-right-radius: 5px;
96+
border-bottom-right-radius: 5px;
97+
}

0 commit comments

Comments
 (0)