[ 티스토리 동적 이미지 베너 코드 ] 동적 갤러리 리스트 이미지 배너 제작

동적 이미지 배너로 티스토리 블로그 디자인 개선하는 방법

갤러리 리스트 이미지 동적 베너

동적 이미지 베너를 사용하게 되면 정적인 이미지를 사용할때 보다 좀더 사용자에게 더 많은 정보를 제공할수 있고 블로그가 디자인적으로 호감을 불러올수 있습니다. 특히 사진이나 제품등 이미지와 영상을 주 콘텐츠로 운영하는 블로그 운영자라면 자신의 블로그에 동적 베너 이미지를 사용하므로써 블로그를 좀더 개성있고 차별화시킬수 있습니다.

아래는 일반적으로 티스토리 스킨 메인 화면에 스킨을 사용해서 동적이미지 베너를 사용하는 방법입니다.

동적 이미 베너 제작 방법

티스토리 스킨에서는 홈 설정에서 최신글 외에도 다양한 커버를 지원하고 있습니다. 이 커버중 잘 사용하지 않는 커버를 선택해서 커버의 코드를 아래의 코드로 변경하게 되면 동적 이미지 베너를 구현 할수 있습니다. 아래는 Magazine 스킨의 예입니다.

티스토리 스킨 Magazine

• 슬라이드 탐색: 화살표 버튼을 눌러 좌우로 이동 가능.
• 자동 슬라이드: 사용자가 조작하지 않을 경우 일정 시간 간격으로 슬라이드가 자동으로 이동.
• 중단/재개: 마우스를 배너 위에 올리면 자동 슬라이드가 멈추고, 마우스를 벗어나면 다시 시작.
• 크기 조정: 슬라이드 항목의 크기를 CSS와 JavaScript에서 동적으로 계산.

티스토리 커버 종류

• 슬라이더
• 섬네일 리스트1
• 섬네일 리스트 2
• 슬라이드 리스트 1
• 슬라이드 리스트 2
• 리스트

HTML 코드

    <div class="custom-slider section_area scroll_area category_area">
        <h2 class="tit_section"></h2>
        <div class="custom-slider__wrap-scroller custom-slider__wrap-category-scroller">
            <div class="custom-slider__scroller">
                <s_cover_item>
                    <div class="custom-slider__item">
                        <div class="custom-slider__box-item">
                            <a href="" title="" class="link_item">
                                <s_cover_item_thumbnail>
                                    <div
                                        class="custom-slider__box-thumb custom-slider__thumb-img"
                                        data-thumbnail=""></div>
                                </s_cover_item_thumbnail>
                                <div class="custom-slider__box-thumb no_img">
                                    <div class="custom-slider__default-img">
                                        <span class="box_svg">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" class="img_svg">
                                                <defs>
                                                    <path id="errorIconSvg" d="M18.5 27.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM21 11h-2v13h2V11zm-1-9C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2zm0 34c-8.837 0-16-7.163-16-16S11.163 4 20 4s16 7.163 16 16a16 16 0 0 1-16 16z"/>
                                                </defs>
                                                <g fill="none" fill-rule="evenodd">
                                                    <path d="M0 0h40v40H0z"/>
                                                    <use fill="#fff" fill-rule="nonzero" xlink:href="#errorIconSvg"/>
                                                </g>
                                            </svg>
                                        </span>
                                    </div>
                                </div>
                                <br>
                                <span class="txt_item"></span>
                            </a>
                        </div>
                    </div>
                </s_cover_item>
            </div>
            <div class="custom-slider__box-arrow">
                <button type="button" class="custom-slider__btn-arrow custom-slider__btn-prev">
                    <span class="box_svg">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" class="img_svg">
                            <defs>
                                <path id="mainCategoryArrowLeft" d="M12 20L25 7l1.4 1.4L14.8 20l11.6 11.6L25 33z"/>
                            </defs>
                            <g fill="none" fill-rule="evenodd">
                                <path d="M0 0h40v40H0z"/>
                                <use fill="#fff" fill-rule="nonzero" xlink:href="#mainCategoryArrowLeft"/>
                            </g>
                        </svg>
                    </span>
                </button>
                <button type="button" class="custom-slider__btn-arrow custom-slider__btn-next">
                    <span class="box_svg">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" class="img_svg">
                            <defs>
                                <path id="mainCategoryArrowRight" d="M28 20L15 33l-1.4-1.4L25.2 20 13.6 8.4 15 7z"/>
                            </defs>
                            <g fill="none" fill-rule="evenodd">
                                <path d="M0 0h40v40H0z"/>
                                <use fill="#fff" fill-rule="nonzero" xlink:href="#mainCategoryArrowRight"/>
                            </g>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>

CSS 코드

<style>
.custom-slider__wrap-scroller {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.custom-slider__scroller {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.custom-slider__item {
    flex: 0 0 auto;
    width: 300px; 
}

.custom-slider__box-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;
    z-index: 10;
}

.custom-slider__btn-arrow {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0;
}

.custom-slider__btn-prev {
    position: absolute;
    left: 0;
}

.custom-slider__btn-next {
    position: absolute;
    right: 0;
}

.custom-slider__box-thumb {
    background-size: cover;
    background-position: center;
    width: 300px;
    height: 200px;
}

.custom-slider__box-thumb.no_img {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.custom-slider__default-img .box-svg {
    width: 40px;
    height: 40px;
}

.txt_item {
    color: white;
    margin-top: 20px;
    padding: 0 10px;
    text-align: center;
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
    max-width: 100%; 
}

</style>

스크립트 코드

<script>
window.addEventListener('load', function() {
    const items = document.querySelectorAll('.custom-slider__box-thumb');

    items.forEach(function(item) {
        const thumbnailUrl = item.getAttribute('data-thumbnail');
        if (thumbnailUrl) {
            item.style.backgroundImage = `url(${thumbnailUrl})`; 
        }
    });

    const scroller = document.querySelector('.custom-slider__scroller');
    const prevButton = document.querySelector('.custom-slider__btn-prev');
    const nextButton = document.querySelector('.custom-slider__btn-next');
    const totalItems = items.length;
    let currentIndex = 0;
    let autoSlideInterval;

    function moveToNextSlide() {
        if (currentIndex < totalItems - 1) {
            currentIndex++;
        } else {
            currentIndex = 0;
        }
        updateSlidePosition();
    }

    function moveToSlide(index) {
        currentIndex = index;
        updateSlidePosition();
    }

    function updateSlidePosition() {
        const offset = -currentIndex * 310;
        scroller.style.transform = `translateX(${offset}px)`;
    }

    prevButton.addEventListener('click', function() {
        clearInterval(autoSlideInterval);
        if (currentIndex > 0) {
            moveToSlide(currentIndex - 1);
        } else {
            moveToSlide(totalItems - 1);
        }
        startAutoSlide();
    });

    nextButton.addEventListener('click', function() {
        clearInterval(autoSlideInterval);
        if (currentIndex < totalItems - 1) {
            moveToSlide(currentIndex + 1);
        } else {
            moveToSlide(0);
        }
        startAutoSlide();
    });

    function startAutoSlide() {
        autoSlideInterval = setInterval(moveToNextSlide, 3000);
    }

    startAutoSlide();

    items.forEach(function(item) {
        const thumbnailUrl = item.getAttribute('data-thumbnail');
        if (thumbnailUrl) {
            const img = new Image();
            img.src = thumbnailUrl;
        }
    });
});
</script>