<style>
.lookbook{width:1200px;margin:0 auto;display:block;}
.lookbook img{margin:0 auto;display:block;}
.video-wrap{max-width:1200px;margin:0 auto;box-sizing:border-box;background:#eeeeee;}
video{max-width:960px !important;display:block;margin:0 auto;}
.lookbook-tabs{position:relative;width:1200px;margin:0 auto;}
.lookbook-tabs label{order:1;display:block;cursor:pointer;opacity:.3;}
.lookbook-tabs > label:nth-child(2){position:absolute;margin-left:120px;top:0;z-index:1;}
.lookbook-tabs > label:nth-child(5){position:absolute;margin-left:360px;top:0;z-index:1;}
.lookbook-tabs > label:nth-child(8){position:absolute;margin-left:600px;top:0;z-index:1;}
.lookbook-tabs > label:nth-child(11){position:absolute;margin-left:840px;top:0;z-index:1;}
.lookbook-tabs .category-tabs{order:99;flex-grow:1;width:1200px;display:none;}
.lookbook-tabs input[type="radio"]{display:none;}
.lookbook-tabs input[type="radio"]:checked+label{opacity:1;}
.lookbook-tabs input[type="radio"]:checked+label+.category-tabs{display:block;}
.lookbook-wrap{position:relative;max-width:1200px;margin:0 auto;box-sizing:border-box;background:#eeeeee;}
.lookbook-wrap .swiper-container{position:static;margin:0 auto;width:960px;padding-top:73px;padding-bottom:80px;}
.lookbook-wrap .swiper-button-prev{background-image:url("https://image.a-rt.com//art/promotion/planningdisplay/202010/1603951579542.png");width:32px;height:50px;left:140px;top:50%;background-size:32px;outline:none;}
.lookbook-wrap .swiper-button-next{background-image:url("https://image.a-rt.com//art/promotion/planningdisplay/202010/1603951579542.png");width:32px;height:50px;right:140px;top:50%;background-size:32px;outline:none;transform:rotate(-180deg);}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:105px;}
.swiper-pagination-bullet{width:16px;height:16px;opacity:1;background:rgba(255, 255, 255, 0%);border-radius:0%;border:1px solid #fff;}
.swiper-pagination-bullet-active{background:#fff;}
</style>
</head>
<body>
<div class="lookbook">
<div class="lookbook-header">
<img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613722651771.jpg" alt="메인 이미지">
<div class="video-wrap">
<video muted autoplay loop>
<source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHmKIBI7PXDGzfyg4isisSC1EQlM9mJaP5isev0uHuaAzz0isMxzxNx4FQQ7oiiUnJbH5fMvBmKnYRLEwgieie.mp4" type="video/mp4">
</video>
</div>
<img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613722675936.jpg" alt="멤버 화보컷">
</div>
</div>
<div class="lookbook-tabs">
<input type="radio" name="tabs" id="tabone" checked="checked" class="tabInput" value="1">
<label for="tabone"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613722767288.jpg" alt=""></label>
<div class="category-tabs">
<div class="lookbook-wrap">
<div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-prev"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613722740903.jpg"></div>
<div class="swiper-slide swiper-slide-active"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613722746515.jpg"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<input type="radio" name="tabs" id="tabtwo" class="tabInput" value="2">
<label for="tabtwo"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613722788105.jpg" alt=""></label>
<div class="category-tabs">
<div class="lookbook-wrap">
<div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613722910681.jpg"></div>
<div class="swiper-slide swiper-slide-next"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613722910694.jpg"></div>
<div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613722910752.jpg"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<input type="radio" name="tabs" id="tabthree" class="tabInput" value="3">
<label for="tabthree"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613722810113.jpg" alt=""></label>
<div class="category-tabs">
<div class="lookbook-wrap">
<div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="swiper3">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613723081933.jpg"></div>
<div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613723081966.jpg"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<input type="radio" name="tabs" id="tabfour" class="tabInput" value="4">
<label for="tabfour"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613722824597.jpg" alt=""></label>
<div class="category-tabs">
<div class="lookbook-wrap">
<div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="swiper4">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613723105291.jpg"></div>
<div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613723105310.jpg"></div>
<div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613723105350.jpg"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
<div class="lookbook">
<div class="lookbook-header">
<img src="https://image.a-rt.com//art/promotion/planningdisplay/202102/1613722724359.jpg" alt="스페셜 기프트">
</div>
</div>
<script>
$(document).ready(function() {
var mySwiper = new Swiper ('.lookbook-wrap .swiper-container', {
loop: true,
speed: 600,
autoplay: true,
autoplayDisableOnInteraction: true,
slidesPerView : 1,
pagination : {
el : '.swiper-pagination',
clickable : true,
},
navigation: {
nextEl: '.lookbook-wrap .swiper-button-next',
prevEl: '.lookbook-wrap .swiper-button-prev',
},
})
});
let tabInputs = document.querySelectorAll('.tabInput');
tabInputs.forEach(function(input) {
input.addEventListener('change', function() {
let id = input.value;
let thisSwiper = document.getElementById('swiper' + id);
thisSwiper.swiper.update();
});
});
</script>
