채택완료

부트스트랩 캐러셀 질문

Copy
<!-- Usage -->
        <div class="usage">
            
            <!-- 슬라이드 -->
            <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item item01 active" data-bs-interval="10000">
                        <img src="images/usage_sample01.png" class="d-block w-100" alt="">    
                    </div>
                    <div class="carousel-item item02" data-bs-interval="10000">
                        <img src="images/usage_sample01.png" class="d-block w-100" alt="">    
                    </div>
                    <div class="carousel-item item03" data-bs-interval="10000">
                        <img src="images/usage_sample01.png" class="d-block w-100" alt="">
                    </div>

                </div>
            </div>
            <!-- //슬라이드 -->
            
            <div class="bottom_menu">
                <a href="#" class="float-start">건너뛰기</a>
                <a href="#" class="float-end active" data-bs-target="#carouselExampleDark" data-bs-slide="next">다음</a>
                <!--<a href="#" class="float-end active" >시작하기</a>-->
            </div>
        </div>
        <!-- //Usage -->

 

이런 부트스트랩 캐러셀이 있는데요 다음 누르면 넘어가는 단순 캐러셀입니다.

 

1. 현재는 다음을 누르면 계속 무한 루프가 되는데 마지막 슬라이드에서 더 이상 안넘어가게 멈출 수 있나요?

 

2. 멈추고 난 후 다음이 시작하기 버튼으로 바뀌었으면 좋겠는데 어떻게 하면 좋을까요?

답변 1개 / 댓글 1개

채택된 답변
+20 포인트

https://getbootstrap.com/docs/4.0/components/carousel/

wrap boolean true

Whether the carousel should cycle continuously or have hard stops.

 

옵션 wrap을 false로 하면 되지 않을까요?

답변에 대한 댓글 1개

아 말씀대로 최상단에 data-bs-wrap="false"를 했더니 루프는 멈췄네요

이 상태에서 슬라이드 완료 후 다음 버튼이 주석처리 된 시작하기 버튼이 돼야 하는데 ㅠㅠ

답변을 작성하려면 로그인이 필요합니다.