HTML 간단한 이미지 슬라이드 배너 코드 소개및 사용방법

이미지 슬라이드 배너 코드 사용방법

이미지 슬라이드 배너 코드

블로그. 사이트를 운영하다 보면 이미지 또는 광고를 넣어서 [ 이미지 슬라이드 베너 ]를 이용해 방문자에게 보여주고 싶은 상황이 발생합니다. 그런 경우 간단한 배너 코드로 자신이 원하는 이미지와 광고를 노출시킬수 있습니다. 아래 방법은 티스토리 블로그를 사용할 경우 간단한 사용 방법입니다.

베너 글에 삽입하는 방법

관리자 페이지로 접속해서 서식관리 .서식 쓰기 아래 코드를 자신에 맞게 수정해서 넣어주시고 저장 후 글 작성시 서식에서 불러서 사용하시면 됩니다. 필요할 때마다 글 페이지에서 HTML 블럭을 사용해도 됩니다.

예제는 총 3개의 이미지를 사용하는 이미지 베너 코드이지만 원하는 만큼 이미지를 지정하시면 됩니다. 필요하신 분들은 코를 수정해서 사용하시면됩니다

아래 코드는 티스토리.또는 블로그에 간단하게 이미지를 노출시켜 주는 간단한 슬라이더 베너 코드 입니다.

이미지 슬라이트 배너 css 코드

    <style>
        #slider-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            margin-top: 20px;
        }

        #slider {
            white-space: nowrap;
            transition: transform 0.5s ease;
        }

        #slider img {
            max-width: 100%;
            height: auto;
            display: inline-block;
            vertical-align: top;
        }

        .slide {
            width: 100%;
            display: inline-block;
            position: relative;
        }

        .slider_option {
            margin: 10px auto;
            width: 160px;
            font-size: 18px;
            color: #fff;
            display: none;
        }

        .overlay-text {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            color: black;
            font-size: 10px;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.7); 
            padding: 5px; 
        }
    </style>

배너 html 코드

<div id="slider-container">
    <div id="slider">
        <div class="slide">
            <a href="https://example.com/1" target="_blank" rel="noopener noreferrer">
                <div class="overlay-text">첫 번째 이미지 설명</div>
                <img src="image1.jpg" alt="첫 번째 이미지">
            </a>
        </div>
        <div class="slide">
            <a href="https://example.com/2" target="_blank" rel="noopener noreferrer">
                <div class="overlay-text">두 번째 이미지 설명</div>
                <img src="image2.jpg" alt="두 번째 이미지">
            </a>
        </div>
        <div class="slide">
            <a href="https://example.com/3" target="_blank" rel="noopener noreferrer">
                <div class="overlay-text">세 번째 이미지 설명</div>
                <img src="image3.jpg" alt="세 번째 이미지">
            </a>
        </div>
    </div>
</div>

<div class="slider_option">
    <input type="checkbox" id="checkbox" checked> 
</div>

이미지 슬라이드 배너 스크립트 코드

<script>
    window.onload = function () {
        var checkbox = document.getElementById('checkbox');
        var slider = document.getElementById('slider');

        setInterval(function () {
            if (checkbox.checked) {
                slideRight();
            }
        }, 3000);

        function slideRight() {
            var firstSlide = slider.firstElementChild;
            slider.appendChild(firstSlide);
            slider.style.transition = 'none';
            slider.style.transform = 'translateX(0)';
            setTimeout(function () {
                slider.style.transition = 'transform 0.5s ease';
                slider.style.transform = 'translateX(-100%)';
            }, 50);
        }
    };
</script>

이미지 배너 설정 방법

관리자 페이지 서식 쓰기

관리자 페이지에서 서식 쓰기로 작성한 후, 필요할 때마다 서식을 불러와서 사용하면 쉽게 사용할 수 있습니다.

이미지 슬라이드 배너 서식으로 사용하기

글페이지에서 HTML 블럭 사용

글 페이지에서 필요할 때마다 이미지 배너가 출력되기를 원하는 위치에 HTML 블럭으로 사용합니다.

이미지 슬라이드 배너 HTML 블럭으로 사용하기

사용 예제

첫 번째 이미지 설명

두 번째 이미지 설명

세 번째 이미지 설명