1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<style>
#head_banner_section{position: relative;width: 100%;min-width: 1200px;height: 80px;background: #fff;border-bottom: 1px solid #D9D9D9;}
#head_banner_section .banner_layer{width: 100%;/* display: flex;justify-content: center; */margin: 0 auto;position: relative;}
.banner_layer .event_banner{width: 100%;height: 100%;display: flex;justify-content: center;}
.banner_layer .event_banner a{display: block;}
/* .banner_layer .event_banner:nth-child(1){background: #222;border-left: 1px solid #D9D9D9;} */
/* .banner_layer .event_banner:nth-child(2){background: #eee;}
.banner_layer .event_banner:nth-child(3){background: #222;} */

.banner_close{position: absolute;right: 0px;top: 50%;transform: translateY(-50%);cursor: pointer;}
.swiper-button-prev, .swiper-button-next{width: 30px;height: 30px;border-radius: 15px;line-height: 30px;border: 1px solid #343434;text-align: center;background-image: none;top: 50%;transform: translateY(-50%);margin-top: 0px;}
.swiper-button-prev{left: 100px !important;}
.swiper-button-next{right: 100px !important;}
</style>

<section id="head_banner_section" style="<?php echo $section_class; ?>">
    <div class="banner_layer">
        <ul class="banner_layer_wrap swiper-wrapper">
            <li class="event_banner swiper-slide"><a href="https://mjsoft.co/html/millennium/recom_ev.php"><img src="./img/event_banner/ev_banner_sample2.png" alt="5¸¸¿ø±Ç ¼Ò°³À̺¥Æ®"></a></li>
            <li class="event_banner swiper-slide"><a href="https://mjsoft.co/html/millennium/recom_ev.php"><img src="./img/event_banner/ev_banner_sample3.png" alt="5¸¸¿ø±Ç ¼Ò°³À̺¥Æ®"></a></li>
            <li class="event_banner swiper-slide"><a href="https://mjsoft.co/html/millennium/recom_ev.php"><img src="./img/event_banner/ev_banner_sample4.png" alt="5¸¸¿ø±Ç ¼Ò°³À̺¥Æ®"></a></li>
        </ul>
    </div>
    <div style="position: absolute;left: 50%;transform: translateX(-50%);top:0px;width: 1200px;height: 100%;z-index: 9;">
        <div class="swiper-button-prev" style="left: 30px;">&lt;</div>
        <div class="swiper-button-next" style="right: 30px;">&gt;</div>
        <div class="banner_close"><span><img src="./img/event_banner/close_btn.png" alt="´Ý±â"></span></div>
    </div>
    
</section>

<script>
if(closeBanner()){
    closeBannerOn();
}
$(function(){
    $('.banner_close').click(function(){//¼¼¼Ç ÀúÀå
        sessionStorage.setItem('closeBanner', true);
        var speed = 300;
        $("#head_banner_section").slideUp(speed);
        $('#head_banner_section').animate({ marginTop: '-100px' }, speed);
    });

    var ev_swiper = new Swiper('.banner_layer', {
        //ù ½ÃÀÛ ½½¶óÀ̵堼³Á¤
        
        autoplay: {
            delay: 6000,
            disableOnInteraction: false,
        },
        slidesPerView: 'auto',
        direction: 'horizontal',
        loop: true,
        navigation: { //¹öÆ°
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        //watchOverflow: true, //½½¶óÀ̵å 1°³À϶§ pager,button ¼û±è¿©ºÎ ¼³Á¤
    });
});

function closeBanner(){
    return sessionStorage.getItem('closeBanner');
}

function closeBannerOn(){
    $("#head_banner_section").css('display','none');
}
</script>