mindol1004/Blog_Project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Spring][쇼핑몰 프로젝트][51] 메인페이지 슬라이드(slick 적용)

Browse Source 
https://kimvampa.tistory.com/302
This commit is contained in:
SeoJin Kim
2022-02-03 03:38:51 +09:00
parent 536c4fd13f
commit e4b31dfed4
10 changed files with 124 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
VamPa/src/main/webapp/WEB-INF/views/main.jsp
View File

@@ -8,10 +8,14 @@
<meta charset="UTF-8">
<title>Welcome BookMall</title>
<link rel="stylesheet" href="resources/css/main.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>
<body>
@@ -109,7 +113,27 @@
</div>
</div>
<div class="content_area">
<h1>content area</h1>
<div class="slide_div_wrap">
<div class="slide_div">
<div>
<a>
<img src="../resources/img/bnA_w01_a8daff.jpg">
</a>
</div>
<div>
<a>
<img src="../resources/img/bnD_w01_c3c5f7.jpg">
</a>
</div>
<div>
<a>
<img src="../resources/img/bnK_w01_c3c5f7.jpg">
</a>
</div>
</div>
</div>
</div>
<!-- Footer 영역 -->
@@ -155,6 +179,19 @@
<script>
$(document).ready(function(){
$(".slide_div").slick(
{
dots: true,
autoplay : true,
autoplaySpeed: 5000
}
);
});
/* gnb_area 로그아웃 버튼 작동 */
$("#gnb_logout_button").click(function(){
//alert("버튼 작동");

23
VamPa/src/main/webapp/resources/css/main.css
View File

@@ -285,4 +285,27 @@ a{
/* float 속성 해제 */
.clearfix{
clear: both;
}
/* 슬라이드 */
.slick-prev{
left: 160px;
z-index: 1;
}
.slick-next{
right: 160px;
z-index: 1;
}
.slide_div img{
margin: auto;
}
.slide_div_wrap{
padding: 15px 0 15px 0;
background: #e6e9f6;
}
.image_wrap img{
max-width: 85%;
height: auto;
display: block;
margin: auto;
}

BIN
VamPa/src/main/webapp/resources/img/bnA_w01_a8daff.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
VamPa/src/main/webapp/resources/img/bnD_w01_c3c5f7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
VamPa/src/main/webapp/resources/img/bnK_w01_c3c5f7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

41
VamPa_MySQL/src/main/webapp/WEB-INF/views/main.jsp
View File

@@ -8,10 +8,14 @@
<meta charset="UTF-8">
<title>Welcome BookMall</title>
<link rel="stylesheet" href="resources/css/main.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>
<body>
@@ -58,7 +62,7 @@
<select name="type">
<option value="T">책 제목</option>
<option value="A">작가</option>
</select>
</select>
<input type="text" name="keyword">
<button class='btn search_btn'>검 색</button>
</div>
@@ -109,7 +113,27 @@
</div>
</div>
<div class="content_area">
<h1>content area</h1>
<div class="slide_div_wrap">
<div class="slide_div">
<div>
<a>
<img src="../resources/img/bnA_w01_a8daff.jpg">
</a>
</div>
<div>
<a>
<img src="../resources/img/bnD_w01_c3c5f7.jpg">
</a>
</div>
<div>
<a>
<img src="../resources/img/bnK_w01_c3c5f7.jpg">
</a>
</div>
</div>
</div>
</div>
<!-- Footer 영역 -->
@@ -155,6 +179,19 @@
<script>
$(document).ready(function(){
$(".slide_div").slick(
{
dots: true,
autoplay : true,
autoplaySpeed: 5000
}
);
});
/* gnb_area 로그아웃 버튼 작동 */
$("#gnb_logout_button").click(function(){
//alert("버튼 작동");

25
VamPa_MySQL/src/main/webapp/resources/css/main.css
View File

@@ -93,6 +93,7 @@ a{
font-weight: 600;
}
/* 로그인 버튼 영역 */
.login_area{
width: 25%;
@@ -186,7 +187,6 @@ a{
background-color: #ddd;
}
/* 홈페이지 메인 제품 목록 */
.content_area{
width: 100%;
@@ -285,4 +285,27 @@ a{
/* float 속성 해제 */
.clearfix{
clear: both;
}
/* 슬라이드 */
.slick-prev{
left: 160px;
z-index: 1;
}
.slick-next{
right: 160px;
z-index: 1;
}
.slide_div img{
margin: auto;
}
.slide_div_wrap{
padding: 15px 0 15px 0;
background: #e6e9f6;
}
.image_wrap img{
max-width: 85%;
height: auto;
display: block;
margin: auto;
}

BIN
VamPa_MySQL/src/main/webapp/resources/img/bnA_w01_a8daff.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
VamPa_MySQL/src/main/webapp/resources/img/bnD_w01_c3c5f7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
VamPa_MySQL/src/main/webapp/resources/img/bnK_w01_c3c5f7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB