"틀:이미지스와이퍼"의 두 판 사이의 차이
광주문화예술인문스토리플랫폼
| 11번째 줄: | 11번째 줄: | ||
{{#if:{{{1|}}}| | {{#if:{{{1|}}}| | ||
<div class="swiper-slide"> | <div class="swiper-slide"> | ||
| − | <img src="{{{1|}}}" alt="{{{1|}}}" class="swiper-image | + | <img src="{{{1|}}}" alt="{{{1|}}}" class="swiper-image" /> |
</div> | </div> | ||
|}} {{#if:{{{2|}}}| | |}} {{#if:{{{2|}}}| | ||
<div class="swiper-slide"> | <div class="swiper-slide"> | ||
| − | <img src="{{{2|}}}" alt="{{{2|}}}" class="swiper-image | + | <img src="{{{2|}}}" alt="{{{2|}}}" class="swiper-image" /> |
</div> | </div> | ||
|}} {{#if:{{{3|}}}| | |}} {{#if:{{{3|}}}| | ||
<div class="swiper-slide"> | <div class="swiper-slide"> | ||
| − | <img src="{{{3|}}}" alt="{{{3|}}}" class="swiper-image | + | <img src="{{{3|}}}" alt="{{{3|}}}" class="swiper-image" /> |
</div> | </div> | ||
|}} {{#if:{{{4|}}}| | |}} {{#if:{{{4|}}}| | ||
<div class="swiper-slide"> | <div class="swiper-slide"> | ||
| − | <img src="{{{4|}}}" alt="{{{4|}}}" class="swiper-image | + | <img src="{{{4|}}}" alt="{{{4|}}}" class="swiper-image" /> |
</div> | </div> | ||
|}} {{#if:{{{5|}}}| | |}} {{#if:{{{5|}}}| | ||
<div class="swiper-slide"> | <div class="swiper-slide"> | ||
| − | <img src="{{{5|}}}" alt="{{{5|}}}" class="swiper-image | + | <img src="{{{5|}}}" alt="{{{5|}}}" class="swiper-image" /> |
</div> | </div> | ||
|}} {{#if:{{{6|}}}| | |}} {{#if:{{{6|}}}| | ||
<div class="swiper-slide"> | <div class="swiper-slide"> | ||
| − | <img src="{{{6|}}}" alt="{{{6|}}}" class="swiper-image | + | <img src="{{{6|}}}" alt="{{{6|}}}" class="swiper-image" /> |
</div> | </div> | ||
|}} {{#if:{{{7|}}}| | |}} {{#if:{{{7|}}}| | ||
<div class="swiper-slide"> | <div class="swiper-slide"> | ||
| − | <img src="{{{7|}}}" alt="{{{7|}}}" class="swiper-image | + | <img src="{{{7|}}}" alt="{{{7|}}}" class="swiper-image" /> |
</div> | </div> | ||
|}} {{#if:{{{8|}}}| | |}} {{#if:{{{8|}}}| | ||
<div class="swiper-slide"> | <div class="swiper-slide"> | ||
| − | <img src="{{{8|}}}" alt="{{{8|}}}" class="swiper-image | + | <img src="{{{8|}}}" alt="{{{8|}}}" class="swiper-image" /> |
</div> | </div> | ||
|}} {{#if:{{{9|}}}| | |}} {{#if:{{{9|}}}| | ||
<div class="swiper-slide"> | <div class="swiper-slide"> | ||
| − | <img src="{{{9|}}}" alt="{{{9|}}}" class="swiper-image | + | <img src="{{{9|}}}" alt="{{{9|}}}" class="swiper-image" /> |
</div> | </div> | ||
|}} {{#if:{{{10|}}}| | |}} {{#if:{{{10|}}}| | ||
<div class="swiper-slide"> | <div class="swiper-slide"> | ||
| − | <img src="{{{10|}}}" alt="{{{10|}}}" class="swiper-image | + | <img src="{{{10|}}}" alt="{{{10|}}}" class="swiper-image" /> |
</div> | </div> | ||
|}} | |}} | ||
| 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번째 줄: | ||
}, | }, | ||
}, | }, | ||
| + | }); | ||
| + | |||
| + | // 이미지 로딩 실패 시 슬라이드 제거 후 Swiper 업데이트 | ||
| + | document.querySelectorAll('.image-swiper-container .swiper-image').forEach(function(img) { | ||
| + | img.addEventListener('error', function() { | ||
| + | this.closest('.swiper-slide').remove(); | ||
| + | swiper.update(); | ||
| + | }); | ||
}); | }); | ||
}); | }); | ||