카페24에 쓰는 형식의 팝업입니다.

/theme/basic/shop/shop.tail.php

데모: https://music1020.iwinv.net/shop/

[code]

<style>
#popup {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 9999;
    width: 310px;
    overflow: hidden;
}

#popup .popup {
    display: flex;
    flex-direction: column;
}

#popup .popup .swiper-pagination {
    left: unset;
    bottom: unset;
    right: unset;
    top: unset;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    background: #ffffff;
}

#popup .popup .swiper-pagination .swiper-pagination-bullet {
    width: 33.33%;
    height: 80px;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1.5em;
    color: #aaa;
    background: #f7f7f7;
}

#popup .popup .swiper-pagination .swiper-pagination-bullet-active {
    background: #fff;
    color: #222;
}

#popup .popup .bottom {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: flex-end;
    background: #f4f4f4;
    border-top: 1px solid #e8e8e8;
    margin-top: -1px;
}

#popup .popup .bottom .today {
    display: flex;
    align-items: center;
    height: 40px;
    margin-right: 20px;
    list-style: po;
}

#popup .popup .bottom .today input {
    display: none;
}

#popup .popup .bottom .today input ~ i {
    width: 20px;
    height: 20px;
    background: url("../img/icon_checkbox.png") no-repeat 50% 50% / contain;
    order: 2;
    margin-left: 2px;
}

#popup .popup .bottom .today input ~ i:before {
    display: none !Important
}

#popup .popup .bottom .today input ~ p {
    font-size: 12px;
    color: #222;
    order: 1;
}

#popup .popup .bottom .today input:checked ~ i {
    background: url("../img/icon_checkbox_on.png") no-repeat 50% 50% / contain
}

#popup .popup .bottom .close {
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    border-left: 1px solid #e8e8e8;
}

</style>

[/code]

[code]

<link rel="stylesheet" href="/swiper.min.css">
<script src="/swiper.min.js"></script>

[/code]

[code]

<div id="popup" style="display:block">
    <div class="popup">
        <ul class="swiper-wrapper">
            <li class="swiper-slide">
                <a href="javascript:;" target="">
                    <img src="https://ecudemo14252.cafe24.com/web/upload/NNEditor/20220616/258713f21bb38ac2a7327ffc0c43d339.jpg" alt="멀티팝업<br>무료 제공">
                </a>
            </li>
            <li class="swiper-slide">
                <a href="javascript:;" target="">
                    <img src="https://ecudemo14252.cafe24.com/web/upload/NNEditor/20220616/0425efdeb337abd0a262e41645cc1b4a.jpg" alt="인스타그램<br>팔로우">
                </a>
            </li>
            <li class="swiper-slide">
                <a href="javascript:;" target="">
                    <img src="https://ecudemo14252.cafe24.com/web/upload/NNEditor/20220616/334652e228aabfd6d9323381cfd5cc3c.jpg" alt="카드사별<br>무이자 할부">
                </a>
            </li>
            <li class="swiper-slide">
                <a href="javascript:;" target="">
                    <img src="https://ecudemo14252.cafe24.com/web/upload/NNEditor/20220616/c2a803d24b59532d4ebe420acce7a6af.jpg" alt="포토리뷰<br>적립금 이벤트">
                </a>
            </li>
            <li class="swiper-slide"">
                <a href="javascript:;" target="">
                    <img src="https://ecudemo14252.cafe24.com/web/upload/NNEditor/20220616/82007179d19ed40c139a6d9c41b0a767.jpg" alt="NEW 5%<br>신상 할인 혜택">
                </a>
            </li>
            <li class="swiper-slide">
                <a href="javascript:;" target="">
                    <img src="https://ecudemo14252.cafe24.com/web/upload/NNEditor/20220616/d426659421f621c97f3b825935ef4c95.jpg" alt="오프라인<br>매장 안내">
                </a>
            </li>
        </ul>
        <div class="swiper-pagination"></div>
        <div class="bottom">
            <label class="checkbox today"><input type="checkbox"><i></i><p>오늘 하루 열지 않음</p></label>
            <a href="javascript:;" class="close">닫기</a>
        </div>
        <script>
        //<![CDATA[    
        var keys = ['멀티팝업<br>무료 제공', '인스타그램<br>팔로우', '카드사별<br>무이자 할부', '포토리뷰<br>적립금 이벤트', 'EW 5%<br>신상 할인 혜택', '오프라인<br>매장 안내'];
        var swiper = new Swiper('#popup .popup', {
            observer: true,
            observeParents: true,
            slidesPerView: 1,
            slidesPerGroup: 1,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                renderBullet: function (index, className) {
                    return '<div class="' + className + '"><div><span>' + (keys[index]) + 
                    '</span></div></div>';
                },
            },
            navigation: false,
            speed: 1350, 
            autoplay: {
                delay: 1350,
                disableOnInteraction: false,
            },
        });
        $("#popup .close").on("click",function(){
            $("#popup").hide();
        });
        //]]>
        </script>
    </div>
</div>

[/code]