gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[기능] 메인 스와이퍼 자동재생 및 프로그레스바 페이지네이션 추가

Browse Source 
- 메인 KV 스와이퍼에 autoplay(5초) 및 재생/일시정지 컨트롤러 추가
- 페이지네이션을 프로그레스바 애니메이션 방식으로 변경
- 프로모션 탭 네비게이션 배경색 수정
- is_black 스타일 임시 비활성화

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
NEW_GIL_HOME\hyeon
2026-02-03 23:26:48 +09:00
parent 93137319ee
commit 3c8b54a716
11 changed files with 301 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
kr/assets/css/kia/kiamain.css
View File

@@ -740,14 +740,63 @@
width: 100%;
object-fit: cover;
}
.mainTopKey .mainSwiper .swiper-pagination {
.mainTopKey .mainSwiper .main-swiper-controller {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
position: absolute;
bottom: 3rem;
z-index: 3;
width: 100%;
}
.mainTopKey .mainSwiper .swiper-pagination span {
width: 5.6rem;
height: 0.4rem;
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination {
position: static;
width: auto;
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination .swiper-pagination-bullet {
overflow: hidden;
position: relative;
width: 4rem;
height: 0.2rem;
margin: 0 0 0 0.2rem !important;
border-radius: 0;
opacity: 1;
background-color: transparent;
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination .swiper-pagination-bullet::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 0.2rem;
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination .swiper-pagination-bullet::after {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 0.2rem;
background: rgba(255, 255, 255, 0.3);
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination .swiper-pagination-bullet-active::before {
transition: 0.5s all;
background-color: #fff;
animation: slide-progress 5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination .swiper-pagination-bullet-active.swiper-paused::before {
animation-play-state: paused;
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination-controller {
width: 2.4rem;
height: 2.4rem;
background: url(../images/common/swiper-pagination-controller-play.png) no-repeat center center/contain;
cursor: pointer;
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination-controller.is-paused {
background-image: url(../images/common/swiper-pagination-controller-pause.png);
}
.mainTopKey .kvSwiperBtnArea {
position: absolute;
@@ -1469,4 +1518,13 @@
border: 0;
}
@keyframes slide-progress {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
/*# sourceMappingURL=kiamain.css.map */

2
kr/assets/css/kia/kiamain.css.map
View File

File diff suppressed because one or more lines are too long

79
kr/assets/css/kia/kiamain.scss
View File

@@ -672,13 +672,71 @@
}
}
}
.swiper-pagination {
.main-swiper-controller {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
position: absolute;
bottom: 3rem;
span {
width: 5.6rem;
height: 0.4rem;
border-radius: 0;
background-color: #fff;
z-index: 3;
width: 100%;
.swiper-pagination {
position: static;
width: auto;
// bottom: 3rem;
// span {
// width: 5.6rem;
// height: 0.4rem;
// border-radius: 0;
// background-color: #fff;
// }
.swiper-pagination-bullet {
overflow: hidden;
position: relative;
width: 4rem;
height: 0.2rem;
margin: 0 0 0 0.2rem !important;
border-radius: 0;
opacity: 1;
background-color: transparent;
}
.swiper-pagination-bullet::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 0.2rem;
}
.swiper-pagination-bullet::after {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 0.2rem;
background: rgba(255, 255, 255, 0.3);
}
.swiper-pagination-bullet-active::before {
transition: 0.5s all;
background-color: #fff;
animation: slide-progress 5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
.swiper-pagination-bullet-active.swiper-paused::before {
animation-play-state: paused;
}
}
.swiper-pagination-controller {
width: 2.4rem;
height: 2.4rem;
background: url(../images/common/swiper-pagination-controller-play.png) no-repeat center center / contain;
cursor: pointer;
&.is-paused {
background-image: url(../images/common/swiper-pagination-controller-pause.png);
}
}
}
}
@@ -1344,3 +1402,12 @@
}
}
}
@keyframes slide-progress {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}

133
kr/assets/css/kiamain.css
View File

@@ -9,14 +9,6 @@
/*반응형, 브라우저 크기가 1204px 이상일때*/
/*넓이, 높이 자동 계산함수*/
/*변수파일 import*/
@-webkit-keyframes fadein {
from {
opacity: 0.9;
}
to {
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0.9;
@@ -411,24 +403,26 @@
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .discount b {
font-weight: 600;
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .discount i {
font-weight: 400;
text-decoration: line-through;
}
@media (min-width: 1025px) {
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .discount i {
font-size: 1.2rem;
}
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .discount i {
font-weight: 400;
text-decoration: line-through;
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .dc {
font-size: 1.1rem;
color: #ea0029;
}
@media (min-width: 1025px) {
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .dc {
font-size: 1.4rem;
}
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl dd .dc {
color: #ea0029;
}
.mainProductItem .item .infoArea .infoBottom .listOtionPrice dl:not(:first-child) {
margin-left: 0.8rem;
}
@@ -497,8 +491,7 @@
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
object-fit: cover;
}
@media (max-width: 768px) {
.mainBannerArea .mainBannerImageArea .mainBannerPC {
@@ -513,8 +506,7 @@
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
object-fit: cover;
}
}
.mainBannerArea .mainBannerInfo {
@@ -577,11 +569,13 @@
}
}
.mainBanner .mabannerInner .listImgBtn .oneButton a::after, .mainBanner .mabannerInner .listImgBtn .oneButton a::before {
.mainBanner .mabannerInner .listImgBtn .oneButton a::after,
.mainBanner .mabannerInner .listImgBtn .oneButton a::before {
width: 3rem;
}
@media (min-width: 1240px) {
.mainBanner .mabannerInner .listImgBtn .oneButton a::after, .mainBanner .mabannerInner .listImgBtn .oneButton a::before {
.mainBanner .mabannerInner .listImgBtn .oneButton a::after,
.mainBanner .mabannerInner .listImgBtn .oneButton a::before {
width: 4rem;
}
}
@@ -725,8 +719,7 @@
justify-content: center;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
object-fit: cover;
overflow: hidden;
}
.mainTopKey .mainSwiper ul li .imageArea.mainKvImagePc {
@@ -747,17 +740,65 @@
}
.mainTopKey .mainSwiper ul li .imageArea img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
object-fit: cover;
}
.mainTopKey .mainSwiper .swiper-pagination {
.mainTopKey .mainSwiper .main-swiper-controller {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
position: absolute;
bottom: 3rem;
z-index: 3;
width: 100%;
}
.mainTopKey .mainSwiper .swiper-pagination span {
width: 5.6rem;
height: 0.4rem;
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination {
position: static;
width: auto;
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination .swiper-pagination-bullet {
overflow: hidden;
position: relative;
width: 4rem;
height: 0.2rem;
margin: 0 0 0 0.2rem !important;
border-radius: 0;
opacity: 1;
background-color: transparent;
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination .swiper-pagination-bullet::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 0.2rem;
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination .swiper-pagination-bullet::after {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 0.2rem;
background: rgba(255, 255, 255, 0.3);
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination .swiper-pagination-bullet-active::before {
transition: 0.5s all;
background-color: #fff;
animation: slide-progress 5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination .swiper-pagination-bullet-active.swiper-paused::before {
animation-play-state: paused;
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination-controller {
width: 2.4rem;
height: 2.4rem;
background: url(../images/common/swiper-pagination-controller-play.png) no-repeat center center/contain;
cursor: pointer;
}
.mainTopKey .mainSwiper .main-swiper-controller .swiper-pagination-controller.is-paused {
background-image: url(../images/common/swiper-pagination-controller-pause.png);
}
.mainTopKey .kvSwiperBtnArea {
position: absolute;
@@ -859,8 +900,6 @@
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
@@ -887,8 +926,6 @@
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
@@ -897,8 +934,6 @@
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist span + span {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
@@ -927,7 +962,8 @@
background: url("/kr/assets/images/common/icon-wtbarrow.svg") center right no-repeat;
background-size: 1.2rem;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem:hover, .mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem:focus {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem:hover,
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem:focus {
border: none;
outline: none;
}
@@ -953,8 +989,6 @@
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem {
top: 8.7rem;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
left: auto;
right: 0;
@@ -1008,8 +1042,6 @@
color: #9ea1a2;
font-weight: 400;
display: flex;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carlistItem ul li + li {
@@ -1024,8 +1056,6 @@
}
@media (min-width: 1025px) {
.mainTopKey .mycarInfo .mycarInfoInner .mainCarNum .carlist .carItem.on + .carlistItem {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
@@ -1243,7 +1273,7 @@
}
@media (min-width: 1025px) {
.mainProductList .mainProductInner ul li a .contentInfo .listOtionPrice dl dt,
.mainProductList .mainProductInner ul li a .contentInfo .listOtionPrice dl dd {
.mainProductList .mainProductInner ul li a .contentInfo .listOtionPrice dl dd {
font-size: 1.6rem;
}
}
@@ -1276,7 +1306,8 @@
display: none;
width: 16rem;
}
.mainProductList .mainProductInner ul li a .contentInfo .listImgBtn .oneButton div::after, .mainProductList .mainProductInner ul li a .contentInfo .listImgBtn .oneButton div::before {
.mainProductList .mainProductInner ul li a .contentInfo .listImgBtn .oneButton div::after,
.mainProductList .mainProductInner ul li a .contentInfo .listImgBtn .oneButton div::before {
width: 4rem;
}
.mainProductList .mainProductInner ul li a .contentInfo .descript + .listImgBtn {
@@ -1284,8 +1315,7 @@
}
.mainProductList .mainProductInner ul li a:hover::before {
content: "";
-webkit-animation: fadein 1s;
animation: fadein 1s;
animation: fadein 1s;
background-image: url(/kr/assets/images/kia/producy-on.png);
z-index: 1;
background-size: cover;
@@ -1293,8 +1323,7 @@
.mainProductList .mainProductInner ul li a:hover .descript,
.mainProductList .mainProductInner ul li a:hover .listImgBtn {
display: block;
-webkit-animation: fadein 1s;
animation: fadein 1s;
animation: fadein 1s;
}
.mainSevice {
@@ -1492,4 +1521,14 @@
color: #000;
border: 0;
}
/*# sourceMappingURL=kiamain.css.map */
@keyframes slide-progress {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
/*# sourceMappingURL=kiamain.css.map */

12
kr/assets/css/kiamain.css.map
View File

File diff suppressed because one or more lines are too long

11
kr/assets/css/promotion.css
View File

@@ -615,7 +615,7 @@ html {
height: 4.8rem;
padding: 0 2rem;
margin-bottom: -5.4rem;
background: rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
z-index: 100;
transition: top 0.3s ease-in-out;
@@ -701,15 +701,6 @@ html {
#promotion .tabNavigation .tabNavigationInner .tabList .tabItem.active .tabLink:after {
background-color: #fff;
}
#promotion .tabNavigation.is_black .tabNavigationInner .tabList .tabItem .tabLink {
color: rgba(5, 20, 31, 0.5);
}
#promotion .tabNavigation.is_black .tabNavigationInner .tabList .tabItem.active .tabLink {
color: #05141f;
}
#promotion .tabNavigation.is_black .tabNavigationInner .tabList .tabItem.active .tabLink::after {
background-color: #05141f;
}
#promotion .tabContentArea {
width: 100%;
min-height: 60rem;

2
kr/assets/css/promotion.css.map
View File

File diff suppressed because one or more lines are too long

40
kr/assets/css/promotion.scss
View File

@@ -639,7 +639,7 @@ html {
height: 4.8rem;
padding: 0 2rem;
margin-bottom: -5.4rem;
background: rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
z-index: 100;
transition: top 0.3s ease-in-out;
@@ -731,25 +731,25 @@ html {
}
}
&.is_black {
.tabNavigationInner {
.tabList {
.tabItem {
.tabLink {
color: rgba(5, 20, 31, 0.5);
}
&.active {
.tabLink {
color: $KiaBlack;
&::after {
background-color: $KiaBlack;
}
}
}
}
}
}
}
// &.is_black {
// .tabNavigationInner {
// .tabList {
// .tabItem {
// .tabLink {
// color: rgba(5, 20, 31, 0.5);
// }
// &.active {
// .tabLink {
// color: $KiaBlack;
// &::after {
// background-color: $KiaBlack;
// }
// }
// }
// }
// }
// }
// }
}
// 탭 콘텐츠 영역 스타일

BIN
kr/assets/images/common/swiper-pagination-controller-pause.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 B

BIN
kr/assets/images/common/swiper-pagination-controller-play.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 320 B

47
kr/kia.html
View File

@@ -471,7 +471,12 @@
</div>
</li>
</ul>
<div class="swiper-pagination"></div>
<!-- pagination/controller -->
<div class="main-swiper-controller">
<div class="swiper-pagination"></div>
<button class="swiper-pagination-controller is-paused" type="button"></button>
</div>
<!-- !pagination/controller -->
</div>
<!-- [추가] KV 좌우버튼 추가되었습니다. -->
@@ -1156,6 +1161,12 @@
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 5000, // 설정 시간
disableOnInteraction: false,
},
speed: 1000,
watchSlidesProgress: true,
loop: true,
loopAdditionalSlides: 1,
navigation: {
@@ -1263,6 +1274,40 @@
},
},
});
const swiperControlBtn = $(".swiper-pagination-controller");
let swiperState = false; //paused state
swiperControlBtn.on("click", function () {
swiperState = !swiperState;
if (swiperState) {
$(this).addClass("is-playing").removeClass("is-paused");
$(".swiper-pagination-bullet-active").addClass("swiper-paused");
swiper.autoplay.stop();
} else {
const activeNavItem = $(".swiper-pagination-bullet-active");
$(this).addClass("is-paused").removeClass("is-playing");
swiper.autoplay.start();
activeNavItem.removeClass("swiper-paused");
activeNavItem.removeClass("swiper-pagination-bullet-active");
setTimeout(function () {
activeNavItem.addClass("swiper-pagination-bullet-active");
}, 10);
}
});
$(".swiper-pagination-bullet").on("click", function () {
swiperState = false;
swiperControlBtn.addClass("is-paused").removeClass("is-playing");
$(".swiper-pagination-bullet-active").removeClass("swiper-paused");
swiper.autoplay.start();
});
swiper.on("slideChange", function () {
swiperState = false;
swiperControlBtn.addClass("is-paused").removeClass("is-playing");
$(".swiper-pagination-bullet-active").removeClass("swiper-paused");
swiper.autoplay.start();
});
</script>
</body>
</html>