Skip to content

Commit 1504a58

Browse files
tomclarkeworktomclarkework
committed
slide done, project done
1 parent c8114b3 commit 1504a58

3 files changed

Lines changed: 88 additions & 1 deletion

File tree

‎15-slider/setup/.prettierrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"semi": false,
3+
"trailingComma": "all",
4+
"singleQuote": true,
5+
"printWidth": 90,
6+
"tabWidth": 4
7+
}

‎15-slider/setup/app.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const slides = document.querySelectorAll('.slide')
2+
const nextBtn = document.querySelector('.nextBtn')
3+
const prevBtn = document.querySelector('.prevBtn')
4+
5+
slides.forEach(function (slide, index) {
6+
slide.style.left = `${index * 100}%`
7+
})
8+
9+
let counter = 0
10+
11+
nextBtn.addEventListener('click', function () {
12+
counter++
13+
translateSlide()
14+
})
15+
16+
prevBtn.addEventListener('click', function () {
17+
counter--
18+
translateSlide()
19+
})
20+
21+
function translateSlide() {
22+
// if (counter === slides.length) {
23+
// counter = 0
24+
// }
25+
26+
// if (counter < 0) {
27+
// counter = slides.length - 1
28+
// }
29+
30+
if (counter < slides.length - 1) {
31+
nextBtn.style.display = 'block'
32+
} else {
33+
nextBtn.style.display = 'none'
34+
}
35+
36+
if (counter > 0) {
37+
prevBtn.style.display = 'block'
38+
} else {
39+
prevBtn.style.display = 'none'
40+
}
41+
42+
slides.forEach(function (slide, index) {
43+
slide.style.transform = `translateX(-${counter * 100}%)`
44+
})
45+
}
46+
47+
prevBtn.style.display = 'none'
48+
49+
// let countdown = setInterval(rotateSlides, 15000)
50+
51+
// function rotateSlides() {
52+
// counter++
53+
// translateSlide()
54+
// }

‎15-slider/setup/index.html‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,33 @@
99
<link rel="stylesheet" href="styles.css" />
1010
</head>
1111
<body>
12-
<h1>slider project</h1>
12+
<div class="slider-container">
13+
<div class="slide">
14+
<img src="./img-1.jpeg" class="slide-img" alt="" />
15+
<h1>1</h1>
16+
</div>
17+
18+
<div class="slide">
19+
<h1>2</h1>
20+
</div>
21+
22+
<div class="slide">
23+
<h1>3</h1>
24+
</div>
25+
26+
<div class="slide">
27+
<div>
28+
<img src="./person-1.jpeg" class="person-img" alt="" />
29+
<h4>Susan Doe</h4>
30+
<h1>4</h1>
31+
</div>
32+
</div>
33+
</div>
34+
35+
<div class="btn-container">
36+
<button type="button" class="prevBtn">prev</button>
37+
<button type="button" class="nextBtn">next</button>
38+
</div>
1339

1440
<!-- javascript -->
1541
<script src="app.js"></script>

0 commit comments

Comments
 (0)