클래스 메인 공지사항 swiper 수정
@c97dbdbc7a2fd70d5d3985c576c5321901999f1b
--- resources/front/site/SITE_00000/js/common-custom2.js
+++ resources/front/site/SITE_00000/js/common-custom2.js
... | ... | @@ -91,56 +91,11 @@ |
| 91 | 91 |
}, |
| 92 | 92 |
}); |
| 93 | 93 |
}); |
| 94 |
- }, |
|
| 95 |
- noticeSwiper: function (obj) {
|
|
| 96 |
- return this.each(function () {
|
|
| 97 |
- var $container = $(this); |
|
| 98 |
- var $el = $container.find('.swiper');
|
|
| 99 |
- var $btnPrev = $container.find('.btn-prev')[0];
|
|
| 100 |
- var $btnNext = $container.find('.btn-next')[0];
|
|
| 101 |
- var $btnPlayStop = $container.find('.swiper-btn-playstop-toggle')[0];
|
|
| 102 |
- var isPaused = false; // 재생 상태 변수 (컨테이너별) |
|
| 103 |
- |
|
| 104 |
- var swiper = new Swiper($el[0], {
|
|
| 105 |
- preloadImages: true, |
|
| 106 |
- // autoplay: {
|
|
| 107 |
- // delay: 3000, |
|
| 108 |
- // disableOnInteraction: false, |
|
| 109 |
- // }, |
|
| 110 |
- effect: "fade", |
|
| 111 |
- fadeEffect: {
|
|
| 112 |
- crossFade: true, |
|
| 113 |
- }, |
|
| 114 |
- loop: true, |
|
| 115 |
- speed: 1000, |
|
| 116 |
- slidesPerView: 1, |
|
| 117 |
- initialSlide: 0, |
|
| 118 |
- watchSlidesProgress: true, |
|
| 119 |
- navigation: {
|
|
| 120 |
- prevEl: $btnPrev, |
|
| 121 |
- nextEl: $btnNext |
|
| 122 |
- }, |
|
| 123 |
- }); |
|
| 124 |
- |
|
| 125 |
- // 재생/중지 버튼 |
|
| 126 |
- $($btnPlayStop).on('click', function () {
|
|
| 127 |
- if (isPaused) {
|
|
| 128 |
- swiper.autoplay.start(); |
|
| 129 |
- $(this).removeClass('is-stop').text('중지');
|
|
| 130 |
- isPaused = false; |
|
| 131 |
- } else {
|
|
| 132 |
- swiper.autoplay.stop(); |
|
| 133 |
- $(this).addClass('is-stop').text('재생');
|
|
| 134 |
- isPaused = true; |
|
| 135 |
- } |
|
| 136 |
- }); |
|
| 137 |
- }); |
|
| 138 |
- }, |
|
| 94 |
+ } |
|
| 139 | 95 |
}); |
| 140 | 96 |
})(jQuery); |
| 141 | 97 |
|
| 142 | 98 |
$(document).ready(function () {
|
| 143 | 99 |
$('.mn-visual').mnVisualSwiper();
|
| 144 | 100 |
$('.mn-course .mn-cont').mnCourseSwiper();
|
| 145 |
- $('.notice-swiper-area').noticeSwiper();
|
|
| 146 | 101 |
});(파일 끝에 줄바꿈 문자 없음) |
--- resources/front/site/SITE_00000/js/common.js
+++ resources/front/site/SITE_00000/js/common.js
... | ... | @@ -1048,6 +1048,12 @@ |
| 1048 | 1048 |
thumbs: {
|
| 1049 | 1049 |
swiper: imgThumbSwiper, |
| 1050 | 1050 |
}, |
| 1051 |
+ slidesPerView: 1.1, |
|
| 1052 |
+ spaceBetween: 8, |
|
| 1053 |
+ breakpoints: {
|
|
| 1054 |
+ 767: { slidesPerView: 1.2 },
|
|
| 1055 |
+ 1279: { slidesPerView: 1}
|
|
| 1056 |
+ } |
|
| 1051 | 1057 |
}); |
| 1052 | 1058 |
}); |
| 1053 | 1059 |
}, |
... | ... | @@ -1162,7 +1168,52 @@ |
| 1162 | 1168 |
}); |
| 1163 | 1169 |
|
| 1164 | 1170 |
}); |
| 1165 |
- } |
|
| 1171 |
+ }, |
|
| 1172 |
+ |
|
| 1173 |
+ classMnNoticeSwiper: function (obj) {
|
|
| 1174 |
+ return this.each(function () {
|
|
| 1175 |
+ var $container = $(this); |
|
| 1176 |
+ var $el = $container.find('.swiper');
|
|
| 1177 |
+ var $btnPrev = $container.find('.swiper-button-prev')[0];
|
|
| 1178 |
+ var $btnNext = $container.find('.swiper-button-next')[0];
|
|
| 1179 |
+ var $btnPlayStop = $container.find('.swiper-btn-playstop-toggle')[0];
|
|
| 1180 |
+ var isPaused = false; // 재생 상태 변수 (컨테이너별) |
|
| 1181 |
+ |
|
| 1182 |
+ var swiper = new Swiper($el[0], {
|
|
| 1183 |
+ preloadImages: true, |
|
| 1184 |
+ // autoplay: {
|
|
| 1185 |
+ // delay: 3000, |
|
| 1186 |
+ // disableOnInteraction: false, |
|
| 1187 |
+ // }, |
|
| 1188 |
+ effect: "fade", |
|
| 1189 |
+ fadeEffect: {
|
|
| 1190 |
+ crossFade: true, |
|
| 1191 |
+ }, |
|
| 1192 |
+ loop: true, |
|
| 1193 |
+ speed: 1000, |
|
| 1194 |
+ slidesPerView: 1, |
|
| 1195 |
+ initialSlide: 0, |
|
| 1196 |
+ watchSlidesProgress: true, |
|
| 1197 |
+ navigation: {
|
|
| 1198 |
+ prevEl: $btnPrev, |
|
| 1199 |
+ nextEl: $btnNext |
|
| 1200 |
+ }, |
|
| 1201 |
+ }); |
|
| 1202 |
+ |
|
| 1203 |
+ // 재생/중지 버튼 |
|
| 1204 |
+ $($btnPlayStop).on('click', function () {
|
|
| 1205 |
+ if (isPaused) {
|
|
| 1206 |
+ swiper.autoplay.start(); |
|
| 1207 |
+ $(this).removeClass('is-stop').text('중지');
|
|
| 1208 |
+ isPaused = false; |
|
| 1209 |
+ } else {
|
|
| 1210 |
+ swiper.autoplay.stop(); |
|
| 1211 |
+ $(this).addClass('is-stop').text('재생');
|
|
| 1212 |
+ isPaused = true; |
|
| 1213 |
+ } |
|
| 1214 |
+ }); |
|
| 1215 |
+ }); |
|
| 1216 |
+ }, |
|
| 1166 | 1217 |
}); |
| 1167 | 1218 |
})(jQuery); |
| 1168 | 1219 |
|
... | ... | @@ -1204,7 +1255,8 @@ |
| 1204 | 1255 |
$('.thumb-swiper').thumbSwiper();
|
| 1205 | 1256 |
$('.img-swiper-area').imgSwiper();
|
| 1206 | 1257 |
$('.mn-popup-area').mnPopupSwiper();
|
| 1207 |
- |
|
| 1258 |
+ $('.notice-swiper-area').classMnNoticeSwiper();
|
|
| 1259 |
+ |
|
| 1208 | 1260 |
checkIsSticky(); |
| 1209 | 1261 |
window.onscroll = () => {
|
| 1210 | 1262 |
checkIsSticky(); |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?