[카페24] 카페24에서 사용가능한 swiper.js 슬라이드(움직이는 배너)

 

카페24에서 바로 사용가능한 swiper.js 를 이용한 슬라이드

카페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="slide_wrap">
    <div class="swiper-container" id="slide">
        <div class="swiper-wrapper" df-banner-code="배너매니저에 등록한 코드" hidden>
            <div class="swiper-slide" df-banner-clone>{#item}<a href="{#href}" target="{#target}">{#title}</a></p></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</div>

 

 

css

/* 슬라이드 */
.slide_wrap { position:relative; width:100%; }
.slide_wrap::after { content:''; display:block; clear:both; }
.slide_wrap .swiper-slide { position:relative; width:100%; height:auto; }
.slide_wrap .swiper-slide img { width:100%; height:auto; }
.slide_wrap .swiper-slide a { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
	font-size:18px; font-weight:500; line-height:1.2; }

/* 슬라이드 화살표 */
.slide_wrap .swiper-button-prev { opacity:0; left:40px; border-radius:0; width:25px; height:50px;
    background:url('화살표이미지') no-repeat; background-size:cover; background-position:center center; }
.slide_wrap .swiper-button-next { opacity:0; right:40px; border-radius:0; width:25px; height:50px;
    background:url('화살표이미지') no-repeat; background-size:cover; background-position:center center; }
.slide_wrap:hover .swiper-button-prev { opacity:1;
    transition:all .3s ease; -webkit-transition:all .3s ease; -moz--transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; }
.slide_wrap:hover .swiper-button-next { opacity:1;
    transition:all .3s ease; -webkit-transition:all .3s ease; -moz--transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; }

 

script

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

var slide1 = new Swiper('#slide', {
    effect: 'fade',
    loop: true,
    speed: 700,
    autoplay: {
        delay: 4000,
        disableOnInteraction: false,
    },
    pagination: {
        el: '#slide .swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '#slide .swiper-button-next',
        prevEl: '#slide .swiper-button-prev',
    },
    on: {
        init: function() {
        },
        slideChange: function() {
        }
    }
});