슬라이더 어떻게 만들죠.. 채택완료

</p>

<p>// HTML</p>

<p><div id="section"></p>

<p><div class="slide-wr"></p>

<p><div class="visual_slide"></p>

<p><div class="slide_01 slide_bg"></div></p>

<p><div class="slide_02 slide_bg"></div></p>

<p><div class="slide_03 slide_bg"></div></p>

<p></div></p>

<p></div></p>

<p></div></p>

<p>

</p>

<p>// CSS</p>

<p>#section {width:100%;height: calc(100vh - 207px);position:relative;overflow:hidden;margin:0 auto;} #section .slide-wr{width: 100%;height: 100%;} #section .visual_slide {width:100%;height: 100%;overflow:hidden;position:relative;} #section .visual_slide div {width:100%;float:left;height: 100%;} #section .visual_slide .slide_01{background: url('../img/main_banner.jpg') repeat-y right;background-size: cover;width: 100%;height: 100%;} #section .visual_slide .slide_02{background: url('../img/main_banner02.jpg') repeat-y right;background-size: cover;} /* #section .visual_slide .slide_03{background: url('../img/main_banner.jpg') repeat-y right;background-size: cover;} */ #section .visual_slide .slick-arrow{position:absolute;bottom:130px;width:142px;height:80px;z-index: 10;left: 20%;} #section .visual_slide .slick-arrow .prev{color:#fff;text-align: right;height: 100%;padding: 28px;font-size: 17px;} #section .visual_slide .slick-arrow .next{color:#fff;text-align: left;height: 100%;padding: 28px;font-size: 17px;} #section .visual_slide .slide-prev{background: url(../img/slick-prev.png) no-repeat 10% 50% rgba(0, 0, 0, 0.3);} #section .visual_slide .slide-next{left: calc(20% + 143px);background: url(../img/slick-next.png) no-repeat 89% 50% rgba(0, 0, 0, 0.3);}</p>

<p> </p>

<p>//JS</p>

<p>