부트스트랩5로 만든 이미지 슬라이더
본문
for문으로 돌리고 싶습니다.
감사합니다.
<!-- for 문 시작 -->
<?php
for ($i=0; $i<=28; $i++) {
if ($view['file'][$i]['view']) {
//echo $view['file'][$i]['view'];
echo get_view_thumbnail($view['file'][$i]['view']);
}
}
?>
<!-- for 문 끝 -->
부트스트랩5로 만든 이미지 슬라이더
<!-- 사진 출력 시작 -->
<div class="container">
<div class="pgia-gallery" data-pg-ia='{"l":[{"name":"Next","trg":"swipe_left","a":{"l":[{"t":".pgia-gallery-thumbnails a-#gt#next(.pgia-current)","l":[{"t":"tween","p":0,"d":0.5,"l":{"pgia":{"play":"Open,SetAsCurrent,ScrollToThumbnail,UpdateCount"}}}]}]},"pdef":"true","rcr":"true"},{"name":"Prev","trg":"swipe_right","a":{"l":[{"t":".pgia-gallery-thumbnails a-#gt#previous(.pgia-current)","l":[{"t":"tween","p":0,"d":0.5,"l":{"pgia":{"play":"Open,SetAsCurrent,ScrollToThumbnail,UpdateCount"}}}]}]},"pdef":"true","rcr":"true"},{"name":"ShowFirstOnStart","trg":"load","a":{"l":[{"t":"","l":[{"t":"tween","p":0,"d":0.5,"l":{"pgia":{"play":"Next"}}}]}]}}]}' style="position: relative;">
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="pgia-gallery-lightbox pgia-gallery-lightbox-inline" data-pg-ia='{"l":[{"name":"Show","trg":"no","a":{"l":[{"t":"","l":[{"t":"tween","p":0,"d":0.3,"l":{"autoAlpha":1}}]},{"t":".pgia-gallery-lightbox-slide.pgia-current","l":[{"t":"tween","p":0,"d":0.5,"l":{"pgia":{"play":"HideSlide"}}}]},{"t":".pgia-gallery-lightbox-slide:not(.pgia-clone)","l":[{"t":"tween","p":0,"d":0.5,"l":{"pgDom":{"clone":1,"play":"ShowSlide"}}}]},{"t":".pgia-gallery-loading","l":[{"t":"tween","p":0,"d":0.5,"l":{"pgia":{"play":"StartLoading"}}}]}],"desc":"Edit the first timeline to customize the lightbox open animation. Leave the other timelines in place."},"rcr":"true","po":"true","pol":"Hide"},{"name":"Hide","a":{"l":[{"t":"","l":[{"t":"tween","p":0,"d":0.5,"l":{"autoAlpha":0}}]},{"t":".pgia-gallery-lightbox-slide.pgia-current","l":[{"t":"tween","p":0,"d":0.5,"l":{"pgia":{"play":"HideSlide"}}}]},{"t":"^.pgia-gallery|.pgia-gallery-thumbnails a.pgia-current","l":[{"t":"set","p":0,"d":0,"l":{"pgia":{"play":"-SetAsCurrent"},"class.remove":"pgia-current"}}]}]},"rcr":"true","po":"true","pol":"Show","trg":"no"},{"name":"ClickToShowNext","trg":"no","a":{"l":[{"t":"^.pgia-gallery","l":[{"t":"tween","p":0,"d":0.5,"l":{"pgia":{"play":"Next"}}}]}]},"rstr":"true"}]}'>
<div class="pgia-gallery-lightbox-slide" data-pg-ia='{"l":[{"name":"ShowSlide","trg":"no","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"class.add":"pgia-current"}}]},{"t":".pgia-gallery-placeholder","l":[{"t":"set","p":0,"d":0,"l":{"attr":{"src":"${target.parentNode.data-image-src}"},"autoAlpha":0}}]},{"t":"h2","l":[{"t":"set","p":0,"d":0,"l":{"innerHTML":"${target.parentNode.data-image-title}"}}]},{"t":"p","l":[{"t":"set","p":0,"d":0,"l":{"innerHTML":"${target.parentNode.data-image-description}"}}]}]},"po":"true","pol":"HideSlide"},{"name":"HideSlide","trg":"no","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":1,"y":0}},{"t":"set","p":0,"d":0,"l":{"class.remove":"pgia-current"}},{"t":"tween","p":0,"d":1,"l":{"x":"100%"}}]}],"desc":"Customize the animation that hides the previous image. Remove class \"pgia-current\" and Remove element at the end are required."},"po":"true","pol":"ShowSlide"}]}'>
<img class="pgia-gallery-placeholder" data-pg-ia='{"l":[{"name":"OnImageLoaded","trg":"res_load","a":{"l":[{"t":"","l":[{"t":"tween","p":0,"d":0.4,"l":{"autoAlpha":1}}]},{"t":"^.pgia-gallery-lightbox-slide|.pgia-gallery-lightbox-slide-caption","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":0}},{"t":"tween","p":0.3,"d":0.3,"l":{"autoAlpha":1}}]},{"t":"^.pgia-gallery|.pgia-gallery-loading","l":[{"t":"tween","p":0,"d":0.21,"l":{"pgia":{"play":"StopLoading"}}}]}],"desc":"Customize the animation for showing the image and the caption after the image is loaded."},"rstr":"true"}]}' data-pg-ia-hide/>
<div class="pgia-gallery-lightbox-slide-caption" data-pg-ia-hide>
<h2>Title</h2>
<p>Description</p>
</div>
</div>
<div class="pgia-controls">
<a class="prev pgia-control" href="#" data-scroll-to="prev" data-pg-ia='{"l":[{"name":"ScrollTo","trg":"click","a":{"l":[{"t":"^.pgia-gallery","l":[{"t":"tween","p":0,"d":0.5,"l":{"pgia":{"play":"${target.data-scroll-to}"}}}]}]},"pdef":"true","sprop":"true"}]}' data-pg-ia-apply="^.pgia-gallery|.pgia-control">‹</a>
<a class="next pgia-control" href="#" data-scroll-to="next">›</a>
</div>
<div class="pgia-gallery-count" style="left: 0; right: 0; text-align: center;">
<span>1</span> /
<span>5</span>
</div>
<a class="pgia-control pgia-control-button" href="#" style="position: absolute; left: 20px; top: 0px;" data-pg-ia='{"l":[{"name":"CloseOnClick","trg":"click","pdef":"true","sprop":"true","a":{"l":[{"t":"^.pgia-gallery-lightbox","l":[{"t":"tween","p":0,"d":0.27,"l":{"pgia":{"play":"Hide"}}}]}]}}]}' data-pg-ia-hide>× Close</a>
<div class="pgia-gallery-loading" data-pg-ia-hide data-pg-ia='{"l":[{"name":"StartLoading","trg":"no","a":{"l":[{"t":"","l":[{"t":"tween","p":0.3,"d":0.39,"l":{"autoAlpha":1,"pgia":{"play":"AnimateDots"}}}]}]},"po":"true","pol":"StopLoading"},{"name":"AnimateDots","trg":"no","a":{"l":[{"t":"span","l":[{"t":"tween","p":0,"d":0.5,"s":0.5,"l":{"autoAlpha":1}},{"t":"tween","p":1.5,"d":0.5,"s":0.5,"l":{"autoAlpha":0}}]}]},"rpt":"-1"},{"name":"StopLoading","trg":"no","a":{"l":[{"t":"","l":[{"t":"tween","p":0,"d":0.5,"l":{"autoAlpha":0,"pgia":{"pause":"AnimateDots"}}}]}]},"po":"true","pol":"StartLoading"}]}' style="position: absolute; top: 50%; left: 50%; margin-left: -45px; margin-top: -20px;">
<span data-pg-ia-hide></span>
<span data-pg-ia-hide></span>
<span data-pg-ia-hide></span>
</div>
</div>
</div><!-- col-lg-8 col-md-12 -->
<div class="col-lg-4 col-md-12 d-md-inline-block d-none">
<div class="d-flex flex-wrap justify-content-around pgia-gallery-thumbnails" data-pg-ia-scene='{"dir":"h","s":"whole"}' style="position: relative;">
<a href="https://images.unsplash.com/photo-1589533610925-1cffc309ebaa?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-pg-ia='{"l":[{"name":"Open","trg":"click","a":{"l":[{"t":"^.pgia-gallery|.pgia-gallery-thumbnails a.pgia-current","l":[{"t":"set","p":0,"d":0,"l":{"pgia":{"play":"-SetAsCurrent"},"class.remove":"pgia-current"}}]},{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"pgia":{"play":"SetAsCurrent,ScrollToThumbnail,UpdateCount"}}}]},{"t":"^.pgia-gallery|.pgia-gallery-lightbox","l":[{"t":"set","p":0,"d":0,"l":{"attr":{"data-image-src":"${target.href}","data-image-title":"${target.data-title}","data-image-description":"${target.data-description}"}}},{"t":"tween","p":0.04,"d":0.5,"l":{"pgia":{"play":"Show"}}}]}]},"pdef":"true","rcr":"true"},{"name":"SetAsCurrent","trg":"no","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"class.add":"pgia-current","zIndex":1}},{"t":"tween","p":0,"d":0.5,"l":{"scale":1.1,"boxShadow":"2px 2px 8px rgba(0,0,0,0.35)"}}]}],"desc":"Customize to animate the Current state. Add class \"pgia-current\" is required."}},{"name":"ScrollToThumbnail","trg":"no","a":{"l":[{"t":"^.pgia-gallery-thumbnails","l":[{"t":"tween","p":0,"d":0.5,"l":{"scrollTo":{"dest":"${target}","offset":"25%"}}}]}]}},{"name":"UpdateCount","trg":"no","a":{"l":[{"t":"^.pgia-gallery|.pgia-gallery-count","l":[{"t":"tween","p":0,"d":0.43,"l":{"autoAlpha":1}}]},{"t":"^.pgia-gallery|.pgia-gallery-count span:nth-of-type(1)","l":[{"t":"set","p":0,"d":0,"l":{"innerHTML":"${target.index1}"}}]},{"t":"^.pgia-gallery|.pgia-gallery-count span:nth-of-type(2)","l":[{"t":"set","p":0,"d":0,"l":{"innerHTML":"${target.parentNode.children.length}"}}]}]},"rstr":"true"}]}' data-pg-ia-apply="^.pgia-gallery|.pgia-gallery-thumbnails a" data-title="Strawberries" data-description="Red and yummy!">
<img src="https://images.unsplash.com/photo-1589533610925-1cffc309ebaa?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ">
</a>
<a href="https://images.unsplash.com/photo-1557800636-894a64c1696f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Orange" data-description="Want some orange juice?"><img src="https://images.unsplash.com/photo-1557800636-894a64c1696f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ"></a>
<a href="https://images.unsplash.com/photo-1528825871115-3581a5387919?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Banana" data-description="Peel a banana for a quick snack."><img src="https://images.unsplash.com/photo-1528825871115-3581a5387919?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ"></a>
<a href="https://images.unsplash.com/photo-1523049673857-eb18f1d7b578?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Avocado" data-description="Take it with crackers and plant the seed."><img src="https://images.unsplash.com/photo-1523049673857-eb18f1d7b578?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ"></a>
<a href="https://images.unsplash.com/photo-1579613832125-5d34a13ffe2a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Apple" data-description="Always have an apple in your bag."><img src="https://images.unsplash.com/photo-1579613832125-5d34a13ffe2a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ"></a>
<a href="https://images.unsplash.com/photo-1571575173700-afb9492e6a50?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Melon" data-description="The perfect snack buddy!"><img src="https://images.unsplash.com/photo-1571575173700-afb9492e6a50?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ"></a>
<a href="https://images.unsplash.com/photo-1572635148818-ef6fd45eb394?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Lemon" data-description="Add ginger and honey for the perfect cup of tea."><img src="https://images.unsplash.com/photo-1572635148818-ef6fd45eb394?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ"></a>
<a href="https://images.unsplash.com/photo-1589820296156-2454bb8a6ad1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Pineapple" data-description="Do you know a good way to peel it?"><img src="https://images.unsplash.com/photo-1589820296156-2454bb8a6ad1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ"></a>
<a href="https://images.unsplash.com/photo-1517282009859-f000ec3b26fe?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Papaya" data-description="Make a smoothy and use the peel as a boat."><img src="https://images.unsplash.com/photo-1517282009859-f000ec3b26fe?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ"></a>
<a href="https://images.unsplash.com/photo-1554795808-3231c32711cf?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Blueberries" data-description="They grow in a forest. Pick them up and bake a pie."><img src="https://images.unsplash.com/photo-1554795808-3231c32711cf?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ"></a>
<a href="https://images.unsplash.com/photo-1554795808-3231c32711cf?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Blueberries" data-description="They grow in a forest. Pick them up and bake a pie."><img src="https://images.unsplash.com/photo-1554795808-3231c32711cf?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ"></a>
<a href="https://images.unsplash.com/photo-1554795808-3231c32711cf?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Blueberries" data-description="They grow in a forest. Pick them up and bake a pie.">
<img src="https://images.unsplash.com/photo-1554795808-3231c32711cf?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ">
</a>
</div>
</div><!-- col-lg-4 col-md-12 d-md-inline-block d-none -->
</div><!-- row -->
</div>
</div>
<!-- 사진 출력 끝 -->
위의 이미지 슬라이드더를
for문으로 만들고 싶습니다.