캐로셀
캐로셀
회전목마처럼 요소들의 순환시키는(cycling) 슬라이드 쇼(Slide show) 이다.
- 움직임이있어야하는 태그들은 자바스크립트 추가해줘야함
<!-- 자바스크립트 -->
<script>
// 자바스크립트로 캐로셀 동작
$('.carousel').carousel({
interval: 2000, //속도
pause: 'hover' //마우스를 올렸을때 움직임 멈춤 'flase' 마우스를 올려도 계속움직임
})
</script>
<div id="caro1" class="carousel slide" data-ride="carousel">
<!-- 기본 사진 슬라이드 -->
<div class="carousel-inner " style="height: 100vh;">
<div class="carousel-item active">
<img src="img/pic1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/pic2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/pic3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/pic4.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/pic5.jpg" class="d-block w-100" alt="...">
</div>
</div>
<!-- 화살표 -->
<a class="carousel-control-prev" href="#caro1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#caro1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Author And Source
이 문제에 관하여(캐로셀), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hoppang/캐로셀저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)