[jquery] Bootstrap4 - Carousel 슬라이드 배경색 변경하기 > 이용후기

본문 바로가기

회원메뉴

쇼핑몰 검색

회원로그인

오늘 본 상품

없음

[jquery] Bootstrap4 - Carousel 슬라이드 배경색 변경하기

페이지 정보

작성자 최고관리자 댓글 0건 조회 3,606회 작성일 23-05-14 12:29

본문

<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 슬라이드의 인덱스 값을 받아서 배경색을 각각 변경시켜 보았다.

댓글목록

등록된 댓글이 없습니다.

Total 4건 1 페이지
이용후기 목록
번호 제목 글쓴이 조회 날짜
열람중 최고관리자 3607 05-14
3 최고관리자 3979 03-23
2 최고관리자 5171 02-13
1 최고관리자 125317 02-07
게시물 검색
회사명 공동구매25시 주소 대구시 남구 봉덕동 1056번지
사업자 등록번호 579-10-01028 대표자 박성학 상담센터 053.475-1098 전화 010-8274-1098 팩스 053.475-1098
통신판매업신고번호 제2019경북경산339호 개인정보 보호책임자 박성학 건강기능식품 영업번호 제2019-0564455호
Copyright 2019 공동구매25시. All Rights Reserved.

고객센터

053.475-1098

월-금 am 9:00 - pm 05:00
점심시간 : am 12:00 - pm 01:00