"틀:이미지스와이퍼"의 두 판 사이의 차이
광주문화예술인문스토리플랫폼
(새 문서: <includeonly> {{#tag:html| <!-- Swiper CDN CSS --> <link rel="stylesheet" href="/wiki/skins/ETBSkin/resources/styles/swiper-bundle.min.css" /> <script src="/wiki/ski...) |
|||
| (같은 사용자의 중간 판 13개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
<includeonly> | <includeonly> | ||
| − | + | {{#tag:html| | |
<!-- Swiper CDN CSS --> | <!-- Swiper CDN CSS --> | ||
<link | <link | ||
| 56번째 줄: | 56번째 줄: | ||
<script> | <script> | ||
document.addEventListener("DOMContentLoaded", function () { | document.addEventListener("DOMContentLoaded", function () { | ||
| − | new Swiper(".image-swiper-container", { | + | var swiper = new Swiper(".image-swiper-container", { |
slidesPerView: 1, | slidesPerView: 1, | ||
spaceBetween: 28, | spaceBetween: 28, | ||
| 68번째 줄: | 68번째 줄: | ||
}, | }, | ||
}, | }, | ||
| + | }); | ||
| + | |||
| + | // 이미지 로딩 타임아웃 및 에러 처리 | ||
| + | var swiperContainer = document.querySelector('.image-swiper-container'); | ||
| + | document.querySelectorAll('.image-swiper-container .swiper-image').forEach(function(img) { | ||
| + | var timeout; | ||
| + | var removeSlide = function() { | ||
| + | clearTimeout(timeout); | ||
| + | |||
| + | // 슬라이드 제거 | ||
| + | var slideToRemove = img.closest('.swiper-slide'); | ||
| + | if (slideToRemove) { | ||
| + | slideToRemove.remove(); | ||
| + | } | ||
| + | |||
| + | swiper.update(); | ||
| + | |||
| + | // 슬라이드 제거 후 남은 슬라이드 확인 | ||
| + | var remainingSlides = document.querySelectorAll('.image-swiper-container .swiper-slide'); | ||
| + | console.log('남은 슬라이드 개수:', remainingSlides.length); | ||
| + | |||
| + | // 슬라이드가 하나도 없으면 스와이퍼 컨테이너 및 상위 h2 제거 | ||
| + | if (remainingSlides.length === 0 ) { | ||
| + | if(swiperContainer){ | ||
| + | console.log('슬라이드가 없어서 스와이퍼 컨테이너 제거'); | ||
| + | |||
| + | // id가 "이미지"인 h2 찾기 | ||
| + | var imageHeading = document.querySelector('#이미지'); | ||
| + | if (imageHeading) { | ||
| + | // h2 요소의 부모 찾기 (일반적으로 h2.mw-headline의 부모) | ||
| + | var headingParent = imageHeading.closest('h2'); | ||
| + | if (headingParent) { | ||
| + | console.log('이미지 섹션 제목도 제거'); | ||
| + | headingParent.remove(); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | swiperContainer.remove(); | ||
| + | } | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | // 1.5초 타임아웃 설정 | ||
| + | timeout = setTimeout(function() { | ||
| + | if (!img.complete) { | ||
| + | removeSlide(); | ||
| + | } else if (img.naturalHeight === 0) { | ||
| + | removeSlide(); | ||
| + | } | ||
| + | }, 1500); | ||
| + | |||
| + | // 이미지 로딩 성공 시 타임아웃 취소 | ||
| + | img.addEventListener('load', function() { | ||
| + | clearTimeout(timeout); | ||
| + | }); | ||
| + | |||
| + | // 이미지 로딩 실패 시 슬라이드 제거 | ||
| + | img.addEventListener('error', function() { | ||
| + | removeSlide(); | ||
| + | }); | ||
}); | }); | ||
}); | }); | ||
</script> | </script> | ||
| − | + | }} | |
</includeonly> | </includeonly> | ||