[jquery] Bootstrap4 - Carousel 슬라이드 배경색 변경하기
작성일 23-05-14 12:29
페이지 정보
작성자 최고관리자 조회 3,732회 댓글 0건본문
<script>
$(document).ready(function(){
// Activate Carousel
$("#carousel-visual").carousel({interval: 6000});
$("#carousel-visual").on('slide.bs.carousel', function(){
currentIndex = $('div.active').index()+1;
if (currentIndex=="1") {
$("#carousel-visual").css("background-color","#f2f2f2");
} else if (currentIndex=="2") {
$("#carousel-visual").css("background-color","#f5f6ce");
} else {
$("#carousel-visual").css("background-color","#ceecf5");
}
});
});
<div id="carousel-visual" class="carousel slide" data-ride="carousel">
<div class="container">
<ol class="carousel-indicators">
<li data-target="#carousel-visual" data-slide-to="0" class="active"></li>
<li data-target="#carousel-visual" data-slide-to="1"></li>
<li data-target="#carousel-visual" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="../img/b1.jpg" border="0" alt=""></div>
<!-- /.item -->
<div class="item"><img src="../img/b2.jpg" border="0" alt=""></div>
<!-- /.item -->
<div class="item"><img src="../img/b3.jpg" border="0" alt=""></div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
</div>
<!-- /.container -->
</div>
위의 소스를 보면 7라인이다.
currentIndex 변수에 해당 item 슬라이드의 인덱스 값을 받아서 배경색을 각각 변경시켜 보았다.
댓글목록
등록된 댓글이 없습니다.
