<body>
<div class="container">
<div class="main">
<span class="control prev">
<i class="bx bx-chevron-left"></i>
</span>
<span class="control next">
<i class="bx bx-chevron-right"></i>
</span>
<div class="img-wrap">
<img decoding="async" src="img1.jpeg" alt="học lập trình frontend, fullstack hà nội, img1" title="# Day 14 | Thiết kế SlideShow, Carousel hiệu ứng với HTML CSS JS thuần. 1 học lập trình frontend, fullstack hà nội">
</div>
</div>
<div class="list-img">
<div>
<img decoding="async" src="img1.jpeg" alt="học lập trình frontend, fullstack hà nội, img1" title="# Day 14 | Thiết kế SlideShow, Carousel hiệu ứng với HTML CSS JS thuần. 1 học lập trình frontend, fullstack hà nội">
</div>
<div>
<img decoding="async" src="img2.jpeg" alt="học lập trình frontend, fullstack hà nội, img2" title="# Day 14 | Thiết kế SlideShow, Carousel hiệu ứng với HTML CSS JS thuần. 3 học lập trình frontend, fullstack hà nội">
</div>
<div>
<img decoding="async" src="img3.jpeg" alt="học lập trình frontend, fullstack hà nội, img3" title="# Day 14 | Thiết kế SlideShow, Carousel hiệu ứng với HTML CSS JS thuần. 4 học lập trình frontend, fullstack hà nội">
</div>
<div>
<img decoding="async" src="img4.jpeg" alt="học lập trình frontend, fullstack hà nội, img4" title="# Day 14 | Thiết kế SlideShow, Carousel hiệu ứng với HTML CSS JS thuần. 5 học lập trình frontend, fullstack hà nội">
</div>
<div>
<img decoding="async" src="img5.jpeg" alt="học lập trình frontend, fullstack hà nội, img5" title="# Day 14 | Thiết kế SlideShow, Carousel hiệu ứng với HTML CSS JS thuần. 6 học lập trình frontend, fullstack hà nội">
</div>
<div>
<img decoding="async" src="img6.jpeg" alt="học lập trình frontend, fullstack hà nội, img6" title="# Day 14 | Thiết kế SlideShow, Carousel hiệu ứng với HTML CSS JS thuần. 7 học lập trình frontend, fullstack hà nội">
</div>
<div>
<img decoding="async" src="img7.jpeg" alt="học lập trình frontend, fullstack hà nội, img7" title="# Day 14 | Thiết kế SlideShow, Carousel hiệu ứng với HTML CSS JS thuần. 8 học lập trình frontend, fullstack hà nội">
</div>
<div>
<img decoding="async" src="img8.jpeg" alt="học lập trình frontend, fullstack hà nội, img8" title="# Day 14 | Thiết kế SlideShow, Carousel hiệu ứng với HTML CSS JS thuần. 9 học lập trình frontend, fullstack hà nội">
</div>
<div>
<img decoding="async" src="img9.jpeg" alt="học lập trình frontend, fullstack hà nội, img9" title="# Day 14 | Thiết kế SlideShow, Carousel hiệu ứng với HTML CSS JS thuần. 10 học lập trình frontend, fullstack hà nội">
</div>
</div>
</div>
<script src="app.js"></script>
</body>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background-color: #dadada;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.container {
margin: 50px auto;
height: 80%;
width: 70%;
box-shadow: 0 0 10px #bbb;
}
.main {
height: 85%;
position: relative;
}
.control {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 80px;
color: white;
cursor: pointer;
}
.prev {
left: -10px;
}
.next {
right: -10px;
}
.img-wrap {
width: 100%;
height: 100%;
}
.list-img {
display: flex;
}
.list-img div {
cursor: pointer;
padding: 5px;
background-color: #bbb;
flex: 1;
}
.list-img div.active {
background-color: rgb(220, 86, 86);
}
let listDivImg = document.querySelectorAll('.list-img div')
let <a href="https://nodemy.vn/xay-dung-ung-dung-ecommerce-voi-next-js-cho-nguoi-moi-bat-dau-important/">next</a> = document.querySelector('.next')
let prev = document.querySelector('.prev')
let imgWrap = document.querySelector('.img-wrap img')
let currentIndex = 0
setCurrent(currentIndex)
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> setCurrent(index) {
currentIndex = index
imgWrap.src = listDivImg[currentIndex].querySelector('img').src
// remove all active img
listDivImg.forEach((item) => {
item.classList.remove('active')
})
// set active
listDivImg[currentIndex].classList.add('active')
}
listDivImg.forEach((img, index) => {
img.addEventListener('click', (e) => {
setCurrent(index)
})
})
next.addEventListener('click', () => {
if (currentIndex == listDivImg.length - 1) {
currentIndex = 0
} else currentIndex++
setCurrent(currentIndex)
})
prev.addEventListener('click', () => {
if (currentIndex == 0) currentIndex = listDivImg.length - 1
else currentIndex--
setCurrent(currentIndex)
})
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :
HTML : HTML căn bản cho người mới bắt đầu
CSS : CSS căn bản cho người mới bắt đầu
JS: Javascript cho người mới bắt đầu
