<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <style type="text/css"> .slider { width: 40rem; } .slide img{ display: block; width: 1280px; height: 450px; } .slick-dots { display: flex; justify-content: center; margin: 0; padding: 1rem 0; list-style-type: none; top: 400px !important; left:600px !important; } .slick-dots li { margin: 0 0.25rem; } .slick-dots button { display: block; width: 1rem; height: 1rem; padding: 0; border: none; border-radius: 100%; background-color: rgba(255,255,255, 0.5); text-indent: -9999px; cursor: pointer; } .slick-dots li.slick-active button { background-color: white; } /* .slick-arrow{ display: inline-block; position: relative; top: 220px; z-index: 500; color: #fff; font-size: 20px; } */ .slick-prev, .slick-next { font-size: 0; position: absolute; bottom: 20px; color: #fff;; border: 0; background: none; z-index: 1; top: 20px; cursor: pointer; } .slick-prev { left: 20px; } .slick-prev:after { content: "\f104"; font: 40px/1 'FontAwesome'; } .slick-next { right: 20px; text-align: right; } .slick-next:after { content: "\f105"; font: 40px/1 'FontAwesome'; } .slick-prev:hover:after, .slick-next:hover:after { color: #7e7e7e; } </style> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div id="titlewrap" class="slider"> <div class="main_img slide" style="top: -15px;"> <div> <img src="<c:url value='/'/>images/main_banner.jpg" width="1280" height="450" alt="" /> </div> <div> <img src="<c:url value='/'/>images/main_banner2.jpg" width="1280" height="450" alt="" /> </div> <div> <img src="<c:url value='/'/>images/main_banner3.jpg" width="1280" height="450" alt="" /> </div> </div> </div>
<script type="text/javascript"> $('.main_img').slick({ dots: true, /* fade: true, cssEase: 'linear' */ infinite: true , /* 맨끝이미지에서 끝나지 않고 다시 맨앞으로 이동 */ slidesToShow: 1, /* 화면에 보여질 이미지 갯수*/ slidesToScroll: 1, /* 스크롤시 이동할 이미지 갯수 */ autoplay: true, /* 자동으로 다음이미지 보여주기 */ arrows: true, /* 화살표 */ dots:true, /* 아래점 */ autoplaySpeed:3000,/* 다음이미지로 넘어갈 시간 */ speed:1000 , /* 다음이미지로 넘겨질때 걸리는 시간 */ pauseOnHover:true, /* 마우스 호버시 슬라이드 이동 멈춤 */ // nextArrow: '<i class="fa fa-angle-right"></i>', //prevArrow: '<i class="fa fa-angle-left" style="font-size:15px;"></i>' //vertical:true,/* 세로방향으로 슬라이드를 원하면 추가하기// 기본값 가로방향 슬라이드*/ // responsive: [ // { /* 반응형웹*/ // breakpoint: 960, /* 기준화면사이즈 */ // settings: {slidesToShow:2 } /* 사이즈에 적용될 설정 */ // }, // { /* 반응형웹*/ // breakpoint: 768, /* 기준화면사이즈 */ // settings: {slidesToShow:1 } /* 사이즈에 적용될 설정 */ // } // ] }); </script>
원모양 CSS 적용 하기
/* 슬릭 슬라이더 */ .slider { width: 40rem; } .slide img{ display: block; /* width: 1280px; height: 450px; */ } .slick-dots { display: flex; justify-content: center; margin: 0; padding: 1rem 0; list-style-type: none; top: 400px !important; left:600px !important; } .slick-dots li { margin: 0 0.25rem; } .slick-dots button { display: block; width: 1rem; height: 1rem; padding: 0; border: none; border-radius: 100%; background-color: #9e9e9e61; text-indent: -9999px; cursor: pointer; } .slick-dots li.slick-active button { background-color: #000; } .slick-arrow{ /* background: #9e9e9e ; */ background: #9e9e9e61; width:40px; height:40px; border: 0; border-radius:30px; text-align:center; margin:0 auto; vertical-align:middle; line-height:0px; top:45%; position: absolute; bottom: 20px; cursor: pointer; font-size: 0; z-index: 1; } .slick-prev { left: 5%; } .slick-next { right: 5%; } .slick-prev:before { content: '<'; } .slick-next:before { content: ">"; } .slick-prev:before, .slick-next:before { font-size: 20px; line-height: 1; opacity: .75; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-arrow:hover { background: #000 ; } .slick-prev:hover:before, .slick-next:hover:before { color: rgb(255, 255, 255) ; }
댓글 ( 9)
댓글 남기기