"틀:이미지스와이퍼"의 두 판 사이의 차이

광주문화예술인문스토리플랫폼
이동: 둘러보기, 검색
 
(같은 사용자의 중간 판 하나는 보이지 않습니다)
1번째 줄: 1번째 줄:
 
<includeonly>
 
<includeonly>
 
{{#tag:html|
 
{{#tag:html|
−
    <!-- Swiper CDN CSS -->
+
<!-- Swiper CDN CSS -->
−
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
+
<link
−
   
+
rel="stylesheet"
−
    <div class="swiper image-swiper-container etb-image-swiper">
+
href="/wiki/skins/ETBSkin/resources/styles/swiper-bundle.min.css"
−
        <div class="swiper-wrapper">
+
/>
−
            {{#if:{{{1|}}}|<div class="swiper-slide"><img width="200" height="200" src="{{{1|}}}" alt="{{{1|}}}" class="swiper-image"></div>|}}
+
<script src="/wiki/skins/ETBSkin/resources/scripts/swiper-bundle.min.js"></script>
−
            {{#if:{{{2|}}}|<div class="swiper-slide"><img width="200" height="200"  src="{{{2|}}}" alt="{{{2|}}}" class="swiper-image"></div>|}}
+
<div class="swiper image-swiper-container etb-image-swiper">
−
            {{#if:{{{3|}}}|<div class="swiper-slide"><img width="200" height="200"  src="{{{3|}}}" alt="{{{3|}}}" class="swiper-image"></div>|}}
+
    <div class="swiper-wrapper">
−
            {{#if:{{{4|}}}|<div class="swiper-slide"><img width="200" height="200"  src="{{{4|}}}" alt="{{{4|}}}" class="swiper-image"></div>|}}
+
        {{#if:{{{1|}}}|<div class="swiper-slide"><img src="{{#replace:{{{1|}}}|-|=}}" alt="{{{1|}}}" class="swiper-image"></div>|}}
−
            {{#if:{{{5|}}}|<div class="swiper-slide"><img width="200" height="200"  src="{{{5|}}}" alt="{{{5|}}}" class="swiper-image"></div>|}}
+
        {{#if:{{{2|}}}|<div class="swiper-slide"><img src="{{#replace:{{{2|}}}|-|=}}" alt="{{{2|}}}" class="swiper-image"></div>|}}
−
            {{#if:{{{6|}}}|<div class="swiper-slide"><img width="200" height="200"  src="{{{6|}}}" alt="{{{6|}}}" class="swiper-image"></div>|}}
+
        {{#if:{{{3|}}}|<div class="swiper-slide"><img src="{{#replace:{{{3|}}}|-|=}}" alt="{{{3|}}}" class="swiper-image"></div>|}}
−
            {{#if:{{{7|}}}|<div class="swiper-slide"><img width="200" height="200"  src="{{{7|}}}" alt="{{{7|}}}" class="swiper-image"></div>|}}
+
        {{#if:{{{4|}}}|<div class="swiper-slide"><img src="{{#replace:{{{4|}}}|-|=}}" alt="{{{4|}}}" class="swiper-image"></div>|}}
−
            {{#if:{{{8|}}}|<div class="swiper-slide"><img width="200" height="200"  src="{{{8|}}}" alt="{{{8|}}}" class="swiper-image"></div>|}}
+
        {{#if:{{{5|}}}|<div class="swiper-slide"><img src="{{#replace:{{{5|}}}|-|=}}" alt="{{{5|}}}" class="swiper-image"></div>|}}
−
            {{#if:{{{9|}}}|<div class="swiper-slide"><img width="200" height="200"  src="{{{9|}}}" alt="{{{9|}}}" class="swiper-image"></div>|}}
+
        {{#if:{{{6|}}}|<div class="swiper-slide"><img src="{{#replace:{{{6|}}}|-|=}}" alt="{{{6|}}}" class="swiper-image"></div>|}}
−
            {{#if:{{{10|}}}|<div class="swiper-slide"><img width="200" height="200"  src="{{{10|}}}" alt="{{{10|}}}" class="swiper-image"></div>|}}
+
        {{#if:{{{7|}}}|<div class="swiper-slide"><img src="{{#replace:{{{7|}}}|-|=}}" alt="{{{7|}}}" class="swiper-image"></div>|}}
−
        </div>
+
        {{#if:{{{8|}}}|<div class="swiper-slide"><img src="{{#replace:{{{8|}}}|-|=}}" alt="{{{8|}}}" class="swiper-image"></div>|}}
−
        <div class="swiper-pagination"></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>
−
    <!-- Swiper CDN JS -->
+
</div>
−
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
+
 
−
     <script>
+
<!-- Swiper CDN JS -->
−
        document.addEventListener('DOMContentLoaded', function() {
+
<script>
−
            new Swiper('.image-swiper-container', {
+
     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,
−
                spaceBetween: 28,
 
−
                pagination: {
 
−
                    el: '.swiper-pagination',
 
−
                    type: 'progressbar',
 
 
                 },
 
                 },
−
+
             },
−
             });
 
 
         });
 
         });
−
     </script>
+
     });
 +
</script>
 
}}
 
}}
 
</includeonly>
 
</includeonly>

2025년 8월 14일 (목) 09:03 기준 최신판

원본 주소 "http://prd-gwangju.etribe.co.kr/wiki/index.php?title=틀:이미지스와이퍼&oldid=43869"