fx-slider

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <script src="js/script.js"></script>

<div class="wrap"> <div class="slide-container"> <div class="slide"><img src="img/slide01.jpg" alt="" title="이미지01"></div> <div class="slide"><img src="img/slide02.jpg" alt="" title="이미지02"></div> <div class="slide"><img src="img/slide03.jpg" alt="" title="이미지03"></div> <div class="slide"><img src="img/slide04.jpg" alt="" title="이미지04"></div> <div class="slide"><img src="img/slide05.jpg" alt="" title="이미지05"></div> <div class="slide"><img src="img/slide06.jpg" alt="" title="이미지06"></div> </div> </div>

.wrap { width: 1200px; height: 480px; margin: 200px auto; } /* 슬라이드 */ .slide { width: auto; height: 480px; } /* 슬라이드 이미지 */ .slide img { width: 100%; height: 100%; } /* 기본 커스텀 */ .bx-wrapper { -moz-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent; border: 0px solid #fff; background: #fff; }

/************** 페이지네이션 커스텀 **************/ .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { bottom: 20px; /* 페이지 네이션 슬라이드 안으로 */ } /* 페이지네이션 커스텀 - 닷츠 */ .bx-wrapper .bx-pager.bx-default-pager a { background-color: #fff; } /* 페이지네이션 커스텀 - 활성화된 닷츠 */ .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { background-color: pink; } .bx-wrapper .bx-pager.bx-default-pager a { border-radius: 0; width: 20px; height: 5px; }

/************** 네비게이션 화살표 커스텀 **************/ .bx-wrapper .bx-prev { background: url(../img/prev.png) no-repeat left center; background-size: 32px 32px;} .bx-wrapper .bx-next { background: url(../img/next.png) no-repeat left center; background-size: 32px 32px;} .bx-wrapper .bx-prev:hover, .bx-wrapper .bx-prev:focus { background-position: 0 0; } .bx-wrapper .bx-prev:hover { filter: brightness(60%); } .bx-wrapper .bx-next:hover, .bx-wrapper .bx-next:focus { background-position: 0 0; } .bx-wrapper .bx-next:hover { filter: brightness(60%); }

$(function(){ // bx-slider 시작! $('.slide-container').bxSlider({ mode: 'horizontal', // 페이드 효과로 슬라이드 : 'horizontal', 'vertical', 'fade' captions: true, // 이미지 하단의 제목 slideWidth: 1200, // 슬라이드 가로 크기 지정 auto: true, // 자동재생 pause: 2000, // 슬라이드 당 재생 시간 (ms) autoControls: true, // 재생버튼, 중지버튼 stopAutoOnClick: true, // 클릭할 때, 자동재생 멈춤 pager: true, // 페이지네이션 speed: 500, // 슬라이드가 전환되는 시간 (ms) keyboardEnabled: true, // 키보드 사용가능 여부 moveSlides: 1, // 전환될 슬라이드 개수 minSlides: 3, // 최소 슬라이드 개수 maxSlides: 4, // 최대 슬라이드 개수 }); });