<!-- 여기부터 복사 --> <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: 1000px; left: 50%; transform: translate(-50%, -50%); } .lookbook .lookbook-header .lh-video-wrap .lh-video-inner { width: 900px; padding-top: 56.25%; } .lookbook .lookbook-header .lh-video-wrap .lh-video-inner iframe { width: 900px; height: 506px; position: absolute; top: 0; left: 0; } .lookbook-wrap { position: relative; max-width: 1200px; margin: 0 auto; background-position: center; box-sizing: border-box; background: #000; } .lookbook-wrap .swiper-container { position: static; margin: 0 auto; width: 1200px; } .lookbook-wrap .swiper-button-prev { background-image: url("https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015757676.png"); width: 52px; height: 52px; left: 0px; top: 50%; background-size: 52px; outline: none; } .lookbook-wrap .swiper-button-next { background-image: url("https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015761627.png"); width: 52px; height: 52px; right: 0px; top: 50%; background-size: 52px; outline: none; } .slider-inner { position: relative; max-width: 1200px; margin: 0 auto; } .slider-inner img { width: 100%; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: -40px; } .swiper-pagination-bullet { width: 18px; height: 6px; border: 1px solid; border-color: #666; opacity: 1; background: rgba(0, 0, 0, 0); border-radius: 0%; } .swiper-pagination-bullet-active { background: #666; } .shoes-wrap { position: relative; max-width: 1200px; margin: 0 auto; background-position: top; box-sizing: border-box; background-image: url("https://image.a-rt.com//art/promotion/planningdisplay/202009/1599205994177.jpg"); } .shoes-wrap .swiper-container { position: static; margin: 0 auto; width: 1200px; } .shoes-wrap .swiper-button-prev { background-image: url("https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015757676.png"); width: 52px; height: 52px; left: 0px; top: 40%; background-size: 52px; outline: none; } .shoes-wrap .swiper-button-next { background-image: url("https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015761627.png"); width: 52px; height: 52px; right: 0px; top: 40%; background-size: 52px; outline: none; } .slider-inner { position: relative; max-width: 1200px; margin: 0 auto; } .slider-inner img { width: 100%; } </style> <title></title> <div class="lookbook"> <div class="lookbook-header"> <div><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599205700130.jpg" /></div> <div class="lh-img"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599188413613.jpg" /></div> <div class="lh-video-wrap"> <div class="lh-video-inner"> <video autoplay="" controls="" height="100%" loop="" muted="" poster="" width="100%"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHmKIBI7PXDGzfyg4isisSC1E10wGeUVYbvo63Wxis9d0GKvMxzxNx4FQQriivdfJeJ1XoGytgquYDF1Qieie" type="video/mp4" /></video> </div> </div> </div> <div class="lookbook-wrap"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015214825.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015218445.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015222415.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015228090.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015235345.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015239979.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015243212.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 class="lookbook-header"> <div><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015194165.jpg" /></div> </div> <div class="shoes-wrap"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015386921.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015392301.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015395982.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015405247.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015408824.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015417420.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015421268.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015425443.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015433272.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015442453.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015446662.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015453774.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015456906.jpg" /></div> <div class="swiper-slide"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015461303.jpg" /></div> </div> <div class="swiper-button-prev">&nbsp;</div> <div class="swiper-button-next">&nbsp;</div> </div> <div><img src="https://image.a-rt.com//art/promotion/planningdisplay/202009/1599015198137.jpg" /></div> </div> <script> $(document).ready(function() { var mySwiper = new Swiper ('.lookbook-wrap .swiper-container', { loop: true, speed: 1000, autoplay: true, autoplayDisableOnInteraction: true, slidesPerView : 1, spaceBetween : 0, pagination : { el : '.swiper-pagination', clickable : true, }, navigation: { nextEl: '.lookbook-wrap .swiper-button-next', prevEl: '.lookbook-wrap .swiper-button-prev', }, }) }); $(document).ready(function() { var mySwiper = new Swiper ('.shoes-wrap .swiper-container', { loop: true, speed: 600, autoplay: true, autoplayDisableOnInteraction: true, slidesPerView : 4, spaceBetween : 20, navigation: { nextEl: '.shoes-wrap .swiper-button-next', prevEl: '.shoes-wrap .swiper-button-prev', }, }) }); </script><!-- 여기까지 복사 --></div>