부트스트랩5로 만든 이미지 슬라이더

부트스트랩5로 만든 이미지 슬라이더

QA

부트스트랩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문으로 만들고 싶습니다.                   
                    
   
                                       

더 좋은 답변을 위해 필요한 추가정보를 요청해 보세요.

추가정보요청

이 질문에 댓글 쓰기 :

답변 1

슬라이더가 자동으로 돌게 만들고 싶다는 것 같은데..

 

https://mdbootstrap.com/docs/standard/components/carousel/ 

 

참조해서 해보세요

답변을 작성하시기 전에 로그인 해주세요.
전체 104,324 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT