HTML 이미지 슬라이드 배너 소스 공유

투잡커넥트


HTML 이미지 슬라이드 배너 소스 공유

빛나는광채 8 8569

HTML 이미지 슬라이드 배너 소스 공유 

 

워드프레스 블로그나 홈페이지 제작 할 때, 메인쪽에 이미지 슬라이드 배너 소스 필요하실 때 쓰시면 될 것 같습니다.

 

(1) HTML 소스입니다.

 

먼저 구조를 만들고, div class="slide" 가 감싸고 있습니다. src 에는 이미지가 업로드 된 경로를 넣어주시면 되고,

alt 는 이미지 위에 마우스 올려놓았을때 나오는 설명입니다. 바꾸어 주실 곳은 src와 alt만 변경 해주시면 됩니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<head>
    <title>이미지 슬라이드 배너</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slider">
        <div class="slide">
            <img src="image1.jpg" alt="이미지 1">
        </div>
        <div class="slide">
            <img src="image2.jpg" alt="이미지 2">
        </div>
        <div class="slide">
            <img src="image3.jpg" alt="이미지 3">
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

 
cs

 

 

(2) CSS파일 소스입니다.

 

각 슬라이드의 스타일을 정의하였습니다. css 파일에 넣거나 <style> </style> 감싸서 사용해주시면 됩니다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.slide {
    float: left;
    width: 100%;
    position: relative;
}
img {
    width: 100%;
    height: auto;
}
 
 
cs

 

 

(3) 자바스크립트 소스입니다.​

 

현재 보이는 슬라이드르 showslide() 함수를 통해 보이지 않도록 설정하였고, 다음 슬라이드를 보이도록

하였습니다. 일정 시간마다 nextslide() 함수가 호출되도록 설정했습니다. 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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초마다 자동 슬라이드
});
 
cs

 

 

 

html 과 css, javescript 를 각각 정리해드렸습니다. 그대로 복사붙이기 하면 되는데. 이걸 어떻게 복사붙이기 해야할지

모르는 분들이 분명 존재할 듯 하여...한번에 소스 정리해드리겠습니다.

 

(4) 최종 전체 소스

 

딱 블로그 소스 수정 하실 때 필요한 소스만 한번에 정리하였습니다. 그대로 복붙하시고 src와 alt만 바꾸어 주시면 됩니다.

​​

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<link rel="stylesheet" href="styles.css">


    <div class="slider">
        <div class="slide">
            <img src="image1.jpg" alt="이미지 1">
        </div>
        <div class="slide">
            <img src="image2.jpg" alt="이미지 2">
        </div>
        <div class="slide">
            <img src="image3.jpg" 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>

 
cs

 

 




인쇄 차단
댓글(8)
댓글 총 8개
박영서  
좋은정보 감사합니다.
2023.08.09 16:25
신고 차단
yerlo  
잘 보고 갑니다
02.01 18:03
신고 차단
리탱  
좋은포스팅감사합니다 좋은하루되세요
03.09 17:44
신고 차단
혀긔  
감사합니다
08.05 06:52
신고 차단
yeyyy  
좋은 정보 감사합니다!!
08.05 10:33
신고 차단
뚠두난나  
이런방법이 있었네요  좋은 정보 감사드려요 :)
09.22 01:10
신고 차단
연하나무  
유용한정보 감사합니다.
10.04 12:28
신고 차단
헤롱이  
잘 배우고 갑니다.
11.17 12:40
신고 차단
로그인한 회원만 댓글 등록이 가능합니다.
빠르게 가입하고 이용해보세요
검색 목록

제목