[포트폴리오 프로젝트 2] 메인페이지 구현 : 캐러셀 사용

[캐러셀 API 적용]

- 가장 먼저 처리해볼 내용은 Carousel (캐러셀) API를 활용하여 아래 영역에 “사용 가능한 언어” 의 이미지를 두고 좌,우로 이미지 이동이 가능하도록 기능을 구현한다.

 

- 아래 7개의 이미지를 이용하여 캐러셀 기능을 구현한다.

 

 

-  /resources/images/carousel 폴더를 생성하고 해당 폴더에 7개의 이미지를 저장한다.

 

 

자바스크립트 및 제이쿼리를 이용하여 직접 구현해보는 것도 괜찮은 방법이긴 하지만

요즘은 라이브러리가 워낙 잘 되어 있어서 사용 가능한 라이브러리를 가져와서 적용할 것이다.

아래 사이트를 참고하여 캐러셀 라이브러리 파일을 다운로드 받는다.

https://www.jqueryscript.net/slider/Lightweight-Responsive-Content-Slider-Plugin-with-jQuery-CSS3-lightslider.html

Lightweight Responsive Content Slider Plugin with jQuery and CSS3 - lightslider

 

구현하고자 하는 화면의 완성본은 아래와 같다.

 

 

위 사이트에서 다운로드 받은 파일을 압축해제 후

/resources/lightslider 폴더를 생성한 후 css, img, js 폴더를 복사하여 넣는다.

 

 

기본으로 제공하는 화살표 이미지가 흰색이라 화면에 눈에 띄지 않으므로 색상 변경을 한

아래 이미지를 /resources/lightslider/img 폴더 아래에 복사하여 붙여 넣는다.

- controls.png 이미지명으로 저장하여 사용

 

[ 라이브러리 적용 ]

- Index.jsp 페이지 상단에 캐러셀 라이브러리 css 파일을 아래 그림과 같이 적용한다.

<link rel="stylesheet" href="/resources/lightslider/css/lightslider.css">

 

 

- 하단에는 js 파일을 아래 그림과 같이 적용한다.

<script src="/resources/lightslider/js/lightslider.js"></script>
<script src="/resources/js/index.js"></script>

 

[ JSP 페이지 수정 ]

Index.jsp 페이지 하단 부분의 CLIENTS 로 되어 있던 부분을

아래와 같이 이미지 7개를 배치한다.

이 때 라이브러리 가이드에서 제공하는 id 및 class는 고정하여 사용한다. 

<div class="row section clients topspace">
	<h2 class="section-title"><span>LANGUAGE</span></h2>
	<ul id="lightSlider" class="gallery">
		<li><img src="/resources/images/carousel/jquery.png" /></li>
		<li><img src="/resources/images/carousel/java.png" /></li>
		<li><img src="/resources/images/carousel/bootstrap.png" /></li>
		<li><img src="/resources/images/carousel/spring.png" /></li>
		<li><img src="/resources/images/carousel/react.jpg" /></li>
		<li><img src="/resources/images/carousel/mysql.png" /></li>
		<li><img src="/resources/images/carousel/oracle.png" /></li>
	</ul>
</div> <!-- /section -->

<!-- 하단 푸터와 간격을 조금 벌리기 위해 -->
<br/><br/>

[ 스크립트 적용 ]

/resources/js/index.js 에 자바스크립트 파일을 만들고 lightSlider 아이디의 ul 태그에 캐러셀을 적용하는 스크립트를 작성한다.

https://www.jqueryscript.net/slider/Lightweight-Responsive-Content-Slider-Plugin-with-jQuery-CSS3-lightslider.html

Lightweight Responsive Content Slider Plugin with jQuery and CSS3 - lightslider

 

-  위 링크 하단쪽에 캐러셀 사용방법 가이드를 참고 하면 된다.

[ resources / js / index.js ]

$(document).ready(function() {
	$('#lightSlider').lightSlider({
		item: 5, // 이미지 배치 수
		gallery : false, // 하단의 섬네일 이미지 출력 유무 
		minSlide : 1, // 최소 개수
		maxSlide : 1, // 최대 개수
		auto : true // 자동으로 이미지 이동 시작 유무
	});
});

 

[결과화면]

-  페이지가 로드된 이후 5개의 이미지가 기본으로 출력되고 자동으로 다음 이미지로 이동이 되는지를 확인하면 정상 작동이다.

 

 

이런식으로 템플릿 기반의 메인화면을 하나씩 수정할 것이다.

다음은 메인페이지 상단의 프로필 이미지를 관리할 수 있는 관리자 페이지를 구현할 것이다.