부트스트랩 캐러셀 질문
본문
<!-- 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로 하면 되지 않을까요?
아 말씀대로 최상단에 data-bs-wrap="false"를 했더니 루프는 멈췄네요
이 상태에서 슬라이드 완료 후 다음 버튼이 주석처리 된 시작하기 버튼이 돼야 하는데 ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.
