Commit @a6cb43718f69f7bac04b1cbfa816680ae8ae265a

kmg 2023-12-21

2023/12/21 비주얼 이미지 속도, 배너 속도 및 위치 수정

@a6cb43718f69f7bac04b1cbfa816680ae8ae265a

b1d0458

a6cb437

src/main/webapp/publish/css/main.css

--- src/main/webapp/publish/css/main.css

+++ src/main/webapp/publish/css/main.css


 .visual {min-width: 1240px;position: relative;}
 .visual {max-width: 100%; position: relative;}
 .visual .swiper-slide {z-index: -1 !important;}
-.visual .slideImg {height: 525px;min-width: 1400px;}
+.visual .slideImg {height: 455px;min-width: 1400px;}
 .visual .slideImg img {position:relative;left:50%;transform:translateX(-50%);}
 .visual .swiper-button-prev,.visual  .swiper-button-next {position: absolute;top: 50%;transform: translateY(-50%);background-position:center; width: 50px;height: 50px;margin:0;border-radius: 8px; background-color: rgba(0,0,0,0.5);background-repeat: no-repeat;background-size:15px 26px;}
 .visual .swiper-button-prev {left: 50px;background-image: url(/publish/images/main/visual_prev.png);}
 .visual .swiper-button-next {right:50px;background-image: url(/publish/images/main/visual_next.png);}
-.visual .slide_button{position: absolute;left:50%;bottom:28%;margin:0 0 0 -680px;text-align:center;}
+.visual .slide_button{position: absolute;left:50%;bottom:15%;margin:0 0 0 -680px;text-align:center;}
 .visual .slide_button .swiper-pagination{position:relative;display:inline-block;margin: 0 auto;white-space:nowrap;}
 .visual .slide_button .swiper-pagination .swiper-pagination-bullet{display: inline-block;margin-right:10px;position: relative;vertical-align: middle;width: 12px;height: 12px;background-color: rgba(0,0,0,0.5);border-radius: 100%;opacity:1;}
 .visual .slide_button .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 33px;height: 7px; background-color: #eea301;border-radius: 3.5px;vertical-align: middle;}

 /*// visual 영역 */
 
 /* content1 */
-.banner_w {position:relative;max-width: 1400px;min-width: 1200px;margin: -100px auto 0 auto;z-index:1;}
+.banner_w {position:relative;max-width: 1400px;min-width: 1200px;margin: -40px auto 0 auto;z-index:1;}
 .banner_w .swiper2 .swiper-wrapper .swiper-slide {position:relative;}
 .banner_w .swiper2 .swiper-wrapper .swiper-slide img {width:90%;}
 .banner_w .swiper2 .swiper-button-next {width: 10px;height: 18px;background-image:none;position:absolute;top:266px;right:42%; z-index: 1;}

 
 
 /* content2 문자샘플 */
-.main_cont2{margin: -170px auto 0 auto; padding: 235px 150px 80px 150px; text-align: center; background-color: #ecedef; min-width: 1240px; box-sizing: border-box;}
+.main_cont2{margin: -240px auto 0 auto; padding: 305px 150px 80px 150px; text-align: center; background-color: #ecedef; min-width: 1240px; box-sizing: border-box;}
 .main_cont2 .inner{min-width: 0;}
 .main_cont2 .inner>p.tit_text{font-size: 34px; font-weight: 700;}
 .main_cont2 .inner>p.sub_text{font-size: 14px; font-weight: 400; margin: 20px auto 0 auto; width: 60%; color: #777; line-height: 1.4;} 

b1d0458

a6cb437

src/main/webapp/publish/js/main.js

--- src/main/webapp/publish/js/main.js

+++ src/main/webapp/publish/js/main.js


 	var mySwiper = new Swiper('.swiper2', {
 		slidesPerView: 4,
 		spaceBetween: 0,
-		speed : 600,
+		speed : 800,
 		loop: true,
 		touchRatio: 0,//드래그 금지
 		autoplay: {
-          delay: 2500
+          delay: 7000
         },
 		pagination: {
 			el: '.swiper-pagination',

         effect: "fade",
 		slidesPerView: 1,
 		spaceBetween: 0,
-		speed : 400,
+		speed : 500,
 		loop: true,
 		autoplay: {
-		   delay: 3000,
+		   delay: 6500,
 	       disableOnInteraction: false,
 		 },
 		pagination: {

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,12 +2,12 @@
2	2	.visual {min-width: 1240px;position: relative;}
3	3	.visual {max-width: 100%; position: relative;}
4	4	.visual .swiper-slide {z-index: -1 !important;}
5		-.visual .slideImg {height: 525px;min-width: 1400px;}
	5	+.visual .slideImg {height: 455px;min-width: 1400px;}
6	6	.visual .slideImg img {position:relative;left:50%;transform:translateX(-50%);}
7	7	.visual .swiper-button-prev,.visual .swiper-button-next {position: absolute;top: 50%;transform: translateY(-50%);background-position:center; width: 50px;height: 50px;margin:0;border-radius: 8px; background-color: rgba(0,0,0,0.5);background-repeat: no-repeat;background-size:15px 26px;}
8	8	.visual .swiper-button-prev {left: 50px;background-image: url(/publish/images/main/visual_prev.png);}
9	9	.visual .swiper-button-next {right:50px;background-image: url(/publish/images/main/visual_next.png);}
10		-.visual .slide_button{position: absolute;left:50%;bottom:28%;margin:0 0 0 -680px;text-align:center;}
	10	+.visual .slide_button{position: absolute;left:50%;bottom:15%;margin:0 0 0 -680px;text-align:center;}
11	11	.visual .slide_button .swiper-pagination{position:relative;display:inline-block;margin: 0 auto;white-space:nowrap;}
12	12	.visual .slide_button .swiper-pagination .swiper-pagination-bullet{display: inline-block;margin-right:10px;position: relative;vertical-align: middle;width: 12px;height: 12px;background-color: rgba(0,0,0,0.5);border-radius: 100%;opacity:1;}
13	13	.visual .slide_button .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 33px;height: 7px; background-color: #eea301;border-radius: 3.5px;vertical-align: middle;}
...	...	@@ -16,7 +16,7 @@
16	16	/// visual 영역 /
17	17
18	18	/* content1 */
19		-.banner_w {position:relative;max-width: 1400px;min-width: 1200px;margin: -100px auto 0 auto;z-index:1;}
	19	+.banner_w {position:relative;max-width: 1400px;min-width: 1200px;margin: -40px auto 0 auto;z-index:1;}
20	20	.banner_w .swiper2 .swiper-wrapper .swiper-slide {position:relative;}
21	21	.banner_w .swiper2 .swiper-wrapper .swiper-slide img {width:90%;}
22	22	.banner_w .swiper2 .swiper-button-next {width: 10px;height: 18px;background-image:none;position:absolute;top:266px;right:42%; z-index: 1;}
...	...	@@ -67,7 +67,7 @@
67	67
68	68
69	69	/* content2 문자샘플 */
70		-.main_cont2{margin: -170px auto 0 auto; padding: 235px 150px 80px 150px; text-align: center; background-color: #ecedef; min-width: 1240px; box-sizing: border-box;}
	70	+.main_cont2{margin: -240px auto 0 auto; padding: 305px 150px 80px 150px; text-align: center; background-color: #ecedef; min-width: 1240px; box-sizing: border-box;}
71	71	.main_cont2 .inner{min-width: 0;}
72	72	.main_cont2 .inner>p.tit_text{font-size: 34px; font-weight: 700;}
73	73	.main_cont2 .inner>p.sub_text{font-size: 14px; font-weight: 400; margin: 20px auto 0 auto; width: 60%; color: #777; line-height: 1.4;}

...	...	@@ -6,11 +6,11 @@
6	6	var mySwiper = new Swiper('.swiper2', {
7	7	slidesPerView: 4,
8	8	spaceBetween: 0,
9		- speed : 600,
	9	+ speed : 800,
10	10	loop: true,
11	11	touchRatio: 0,//드래그 금지
12	12	autoplay: {
13		- delay: 2500
	13	+ delay: 7000
14	14	},
15	15	pagination: {
16	16	el: '.swiper-pagination',
...	...	@@ -64,10 +64,10 @@
64	64	effect: "fade",
65	65	slidesPerView: 1,
66	66	spaceBetween: 0,
67		- speed : 400,
	67	+ speed : 500,
68	68	loop: true,
69	69	autoplay: {
70		- delay: 3000,
	70	+ delay: 6500,
71	71	disableOnInteraction: false,
72	72	},
73	73	pagination: {

Delete comment