<!-- 여기부터 복사 --> <style type="text/css">.lookbook{width:1200px;margin:0 auto;display:block;} .lookbook img{margin:0 auto;display:block;} .lookbook .lookbook-header{position:relative;} .lookbook .lookbook-header .lh-img{position:relative;} .lookbook .lookbook-header .lh-video-wrap{position:absolute;top:1870px;left:50%;transform:translate(-50%, -50%);} .lookbook .lookbook-header .lh-video-wrap .lh-video-inner{width:1003px;padding-top:56.25%;} .lookbook .lookbook-header .lh-video-wrap .lh-video-inner iframe{position:absolute;width:1003px;height:564px;top:0;left:0;} .bts-wrap{position:relative;max-width:1200px;margin:0 auto;background-position:top;box-sizing:border-box;} .bts-wrap .swiper-container{position:static;margin:0 auto;width:1200px;} .bts-wrap .swiper-button-prev{background-image:url("https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663341826.png");width:32px;height:50px;left:40px;top:50%;background-size:32px;outline:none;} .bts-wrap .swiper-button-next{background-image:url("https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663326935.png");width:32px;height:50px;right:40px;top:50%;background-size:32px;outline:none;} .lookbook-tabs{position:relative;display:flex;flex-wrap:wrap;} .lookbook-tabs label{order:1;display:block;cursor:pointer;transition:background ease .2s;opacity:.3;} .lookbook-tabs > label:nth-child(2){position:absolute;top:120px;margin-left:356px;z-index:1;} .lookbook-tabs > label:nth-child(5){position:absolute;top:120px;margin-left:541px;z-index:1;} .lookbook-tabs > label:nth-child(8){position:absolute;top:120px;margin-left:696px;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;border-bottom:5px solid #fff;bottom:630px;} .lookbook-tabs input[type="radio"]:checked+label+.category-tabs{display:block;} .lookbook-wrap{position:relative;max-width:1200px;margin:0 auto;background-position:top;box-sizing:border-box;margin-top:2px;background-image:url("https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663353591.jpg");} .lookbook-wrap .swiper-container{position:static;margin:0 auto;width:1048px;padding-top:239px;padding-bottom:145px;} .lookbook-wrap .swiper-button-prev{background-image:url("https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663371287.png");width:73px;height:401px;left:0;top:33.3%;background-size:73px;outline:none;} .lookbook-wrap .swiper-button-next{background-image:url("https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663387584.png");width:73px;height:401px;right:0;top:33.3%;background-size:73px;outline:none;} .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:98px;} .swiper-pagination-bullet{width:13px;height:10px;opacity:1;background:rgba(255, 255, 255, 0.5);border-radius:0%;} .swiper-pagination-bullet-active{background:#fff;} </style> <div class="lookbook"> <div class="lookbook-header"> <div><img alt="지금의 나를 넘어 PROJECT 7 2020 Fall Winter" src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600841816622.jpg" /></div> <div class="lh-img"><img alt="" src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600658138177.jpg" /></div> <div class="lh-video-wrap"> <div class="lh-video-inner"> <video autoplay="" height="100%" loop="" muted="" poster="" width="100%"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHmKIBI7PXDGzfyg4isisSC1ElipqU7H1VExYyiiu1JP7HfnisMxzxNx4FQQu4laQVK3hFTiiX34AmrisglAieie" type="video/mp4" /></video> </div> </div> <div><img alt="" src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600660819810.jpg" /></div> </div> <div class="bts-wrap"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663241065.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663241037.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663241097.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663241192.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663241256.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663241355.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663241467.jpg" /></div> </div> <div class="swiper-button-prev">&nbsp;</div> <div class="swiper-button-next">&nbsp;</div> </div> </div> <div class="lookbook-tabs"><input checked="checked" class="tabInput" id="tabone" name="tabs" type="radio" value="1" /> <label for="tabone"><img alt="CLOTHES" src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663309842.png" /></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/202009/1600676303525.jpg" /></div> <div class="swiper-slide swiper-slide-active"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676303529.jpg" /></div> <div class="swiper-slide swiper-slide-next"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676303537.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676303552.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388281.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388246.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388268.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388282.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388292.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388319.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388400.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388401.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388415.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388420.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388444.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388472.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676388536.jpg" /></div> </div> <div class="swiper-button-prev">&nbsp;</div> <div class="swiper-button-next">&nbsp;</div> <div class="swiper-pagination">&nbsp;</div> </div> </div> </div> <input class="tabInput" id="tabtwo" name="tabs" type="radio" value="2" /> <label for="tabtwo"><img alt="SHOES" src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663449933.png" /></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/202009/1600676594860.jpg" /></div> <div class="swiper-slide swiper-slide-next"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676594864.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676594865.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676594887.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676594897.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676594918.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676594983.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676594990.jpg" /></div> </div> <div class="swiper-button-prev">&nbsp;</div> <div class="swiper-button-next">&nbsp;</div> <div class="swiper-pagination">&nbsp;</div> </div> </div> </div> <input class="tabInput" id="tabthree" name="tabs" type="radio" value="3" /> <label for="tabthree"><img alt="ACCESSORY" src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600663460860.png" /></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/202009/1600676698930.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676698901.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676698913.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676698922.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676698945.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676698955.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676699025.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676699042.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676699064.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676699084.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676699101.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676699100.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1600676699170.jpg" /></div> </div> <div class="swiper-button-prev">&nbsp;</div> <div class="swiper-button-next">&nbsp;</div> <div class="swiper-pagination">&nbsp;</div> </div> </div> </div> </div> <script> $(document).ready(function() { var mySwiper = new Swiper ('.bts-wrap .swiper-container', { loop: true, speed: 1200, autoplay: true, autoplayDisableOnInteraction: true, slidesPerView : 1, spaceBetween : 0, pagination : { el : '.swiper-pagination', clickable : true, }, navigation: { nextEl: '.bts-wrap .swiper-button-next', prevEl: '.bts-wrap .swiper-button-prev', }, }) }); $(document).ready(function() { var mySwiper = new Swiper ('.lookbook-wrap .swiper-container', { loop: true, speed: 600, autoplay: true, autoplayDisableOnInteraction: true, slidesPerView : 4, spaceBetween : 4, 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><!-- 여기까지 복사 --></div>