이미지 자동 슬라이드 관련 문의좀 드립니다.
본문
<div class="slide">
<img src="../img/logo001.png" alt="이미지 1">
</div>
<div class="slide">
<img src="../img/logo002.png" alt="이미지 2">
</div>
<div class="slide">
<img src="../img/logo003.png"alt="이미지 3">
</div>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCount = slides.length;
function showSlide(n) {
slides.forEach(slide => slide.style.display = 'none');
slides[n].style.display = 'block';
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slideCount;
showSlide(currentSlide);
}
function prevSlide() {
currentSlide = (currentSlide - 1 + slideCount) % slideCount;
showSlide(currentSlide);
}
document.addEventListener('DOMContentLoaded', () => {
showSlide(currentSlide);
setInterval(nextSlide, 3000); // 3초마다 자동 슬라이드
});
</script>
이 코드를 사용해서 이미지 슬라이드를 사용중인데 이미지가 1줄씩 슬라이드로 나오는데
이미지를 2줄씩 슬라이드 나오게 할려면 어떤부분을 수정해야 할까요? 공부하는 중이라 바쁘실텐데
알려주시면 복받으실겁니다..!
답변 2
아래 처럼 해보세요.
<div class="slide">
<div class="row">
<img src="../img/logo001.png" alt="이미지 1">
<img src="../img/logo002.png" alt="이미지 2">
</div>
<div class="row">
<img src="../img/logo003.png" alt="이미지 3">
<img src="../img/logo004.png" alt="이미지 4">
</div>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCount = slides.length;
function showSlide(n) {
slides.forEach(slide => slide.style.display = 'none');
slides[n].style.display = 'block';
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slideCount;
showSlide(currentSlide);
}
function prevSlide() {
currentSlide = (currentSlide - 1 + slideCount) % slideCount;
showSlide(currentSlide);
}
document.addEventListener('DOMContentLoaded', () => {
showSlide(currentSlide);
setInterval(nextSlide, 3000); // 3초마다 자동 슬라이드
});
</script>
<style>
.row {
display: flex;
justify-content: center;
}
.row img {
margin: 5px;
}
</style>
이렇게 하니깐 2줄로 나오기는하는데 슬라이드가 작동을 하는데 어디를 수정해야할까요..?ㅠ
이미지 슬라이드는 스와이퍼로 해보세요 swiper
구글링하면 자료들 많구요
