"틀:이미지스와이퍼"의 두 판 사이의 차이
광주문화예술인문스토리플랫폼
| 1번째 줄: | 1번째 줄: | ||
<includeonly> | <includeonly> | ||
{{#tag:html| | {{#tag:html| | ||
| − | + | <!-- Swiper CDN CSS --> | |
| − | + | <link | |
| − | + | rel="stylesheet" | |
| − | + | href="/wiki/skins/ETBSkin/resources/styles/swiper-bundle.min.css" | |
| − | + | /> | |
| − | + | <script src="/wiki/skins/ETBSkin/resources/scripts/swiper-bundle.min.js"></script> | |
| − | + | <div class="swiper image-swiper-container etb-image-swiper"> | |
| − | + | <div class="swiper-wrapper"> | |
| − | + | {{#if:{{{1|}}}|<div class="swiper-slide"><img src="{{#replace:{{{1|}}}|-|=}}" alt="{{{1|}}}" class="swiper-image"></div>|}} | |
| − | + | {{#if:{{{2|}}}|<div class="swiper-slide"><img src="{{#replace:{{{2|}}}|-|=}}" alt="{{{2|}}}" class="swiper-image"></div>|}} | |
| − | + | {{#if:{{{3|}}}|<div class="swiper-slide"><img src="{{#replace:{{{3|}}}|-|=}}" alt="{{{3|}}}" class="swiper-image"></div>|}} | |
| − | + | {{#if:{{{4|}}}|<div class="swiper-slide"><img src="{{#replace:{{{4|}}}|-|=}}" alt="{{{4|}}}" class="swiper-image"></div>|}} | |
| − | + | {{#if:{{{5|}}}|<div class="swiper-slide"><img src="{{#replace:{{{5|}}}|-|=}}" alt="{{{5|}}}" class="swiper-image"></div>|}} | |
| − | + | {{#if:{{{6|}}}|<div class="swiper-slide"><img src="{{#replace:{{{6|}}}|-|=}}" alt="{{{6|}}}" class="swiper-image"></div>|}} | |
| − | + | {{#if:{{{7|}}}|<div class="swiper-slide"><img src="{{#replace:{{{7|}}}|-|=}}" alt="{{{7|}}}" class="swiper-image"></div>|}} | |
| − | + | {{#if:{{{8|}}}|<div class="swiper-slide"><img src="{{#replace:{{{8|}}}|-|=}}" alt="{{{8|}}}" class="swiper-image"></div>|}} | |
| − | + | {{#if:{{{9|}}}|<div class="swiper-slide"><img src="{{#replace:{{{9|}}}|-|=}}" alt="{{{9|}}}" class="swiper-image"></div>|}} | |
| + | {{#if:{{{10|}}}|<div class="swiper-slide"><img src="{{#replace:{{{10|}}}|-|=}}" alt="{{{10|}}}" class="swiper-image"></div>|}} | ||
</div> | </div> | ||
| − | + | <div class="swiper-pagination"></div> | |
| − | + | </div> | |
| − | + | ||
| − | + | <!-- Swiper CDN JS --> | |
| − | + | <script> | |
| − | + | document.addEventListener('DOMContentLoaded', function() { | |
| + | new Swiper('.image-swiper-container', { | ||
| + | slidesPerView: 1, | ||
| + | spaceBetween: 28, | ||
| + | pagination: { | ||
| + | el: '.swiper-pagination', | ||
| + | type: 'progressbar', | ||
| + | }, | ||
| + | breakpoints: { | ||
| + | 768: { | ||
slidesPerView: 2, | slidesPerView: 2, | ||
| − | |||
| − | |||
| − | |||
| − | |||
}, | }, | ||
| − | + | }, | |
| − | } | ||
}); | }); | ||
| − | </script> | + | }); |
| + | </script> | ||
}} | }} | ||
</includeonly> | </includeonly> | ||