<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) ;    
}