JQuery

 

 <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>

 

 

 

about author

PHRASE

Level 60  라이트

목표가 있거든 그것이 이미 성취된 것처럼 무의식에 새겨 넣어라. 목표가 이미 이루어졌다고 상상하는 사이, 내면의 마음은 당신이 원하는 마지막 결과를 만드는 작업에 착수할 것이다. -앤드류 매튜스

댓글 ( 1)

댓글 남기기

작성