[카페24] 카페24에서 사용가능한 최상단 세로롤링 텍스트배너

카페24에서 바로 사용가능한 최상단 세로롤링 텍스트배너 

카페24 쇼핑몰에서 바로 사용할 수 있도록 정리해둔 세로롤링 텍스트배너 코드입니다.

(사이트 최상단에 깔끔하게 두어 보기싫은 팝업대신 공지사항용으로 많이 사용합니다.) 

간단하게 공지사항을 쓰거나 링크를 수정 하는 등의 관리를 쉽게 할 수 있도록  카페24의 앱스토어에 등록된 앱중 배너매니저라는 앱을 사용하고있으니 아래 코드를 그대로 이용하실때는 아래 앱을 설치해주신뒤에 사용하시면 됩니다.

https://store.cafe24.com/kr/apps/2798

https://dfloor.co.kr/services/bannermanager/page/read.html?no=84333&board_no=3001

 

html

<div class="swiper-container main_top_banner">
    <div class="main_top_banner_inner swiper-wrapper" df-banner-code="first-banner" hidden>
        <a href="{#href}" class="swiper-slide" df-banner-clone>{#title}</a>
    </div>
</div>

 

 

css

/* 최상단 공지배너 */
.main_top_banner.scroll { display:none; }
.main_top_banner { position:relative; z-index:997; background:#000; width:100%; height:40px; overflow:hidden; }
.main_top_banner a { display:block; text-align:center; color:#fff; line-height:40px; font-size:14px; font-weight:400; }

 

 

script

(최근에 나온 카페24 스킨에는 jquery.js와 swiper.js가 기본적으로 등록되어있기 때문에 따로 등록하지 않아도 됩니다.)

var main_top_banner = new Swiper('.main_top_banner', {
    direction: "vertical",
    loop: true,
    pagination: false,
    speed: 700,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    navigation: false
});