부트스트랩 캐러셀 질문

부트스트랩 캐러셀 질문

QA

부트스트랩 캐러셀 질문

답변 1

본문


        <!-- 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

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

wrap boolean true

Whether the carousel should cycle continuously or have hard stops.

 

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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 267
© SIRSOFT
현재 페이지 제일 처음으로