10. 부트스트랩 슬라이드

부트스트랩 슬라이드

슬라이드 기본구조

기본 3초 후 슬라이드가 제자리에서 변경됩니다.

<div id="slideWrap" class="carousel" data-ride="carousel">

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="url" alt="" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="url" alt="" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="url" alt="" width="1100" height="500">
    </div>
  </div>
  
</div>

좌우로 움직이는 슬라이드 구조 추가

<div id="slideWrap" class="carousel slide" data-ride="carousel">

 

슬라이드 좌/우 이동 버튼 추가

carousel-inner 클래스(슬라이드 묶음 부모)의 형제 요소로 바로 a 요소를 삽입합니다.

carousel-control- 뒤로 prev, next 클래스를 사용하여 이전, 다음 대상을 설정하고 href 속성으로 큰 부모 요소의 아이디를 연결합니다.

icon을 제거하고 싶다면 -icon을 제거하고 span 요소 사이에 글자 및 이미지를 삽입합니다.

<a class="carousel-control-prev" href="#slideWrap" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#slideWrap" data-slide="next">
    <span class="carousel-control-next-icon"></span>
</a>

 

슬라이드 인디케이터 추가

carousel-indicators 클래스를 만들고 data-target에 슬라이드를 크게 묶는 부모 요소의 아이디명을 사용하여 0부터 시작하는 각 인덱스 번호를 등록합니다.

<ul class="carousel-indicators">
    <li data-target="#slideWrap" data-slide-to="0" class="active"></li>
    <li data-target="#slideWrap" data-slide-to="1"></li>
    <li data-target="#slideWrap" data-slide-to="2"></li>
</ul> 

 

 

---

 

 

슬라이드 속도 설정

밀리초 기준으로 설정됩니다. 1000 == 1초

$('슬라이드 부모요소 아이디or클래스').carousel({ interval:1000 });

 

슬라이드 인디케이터 설정

$("인디케이터1").click(function(){
    $("#슬라이드명").carousel(0);
});
  $("인디케이터2").click(function(){
    $("#슬라이드명").carousel(1);
});
  $("인디케이터3").click(function(){
    $("#슬라이드명").carousel(2);
});

 

슬라이드 이전/다음 설정

$("이전 버튼명").click(function(){
    $("슬라이드부모").carousel("prev");
  });
  $("다음 버튼명").click(function(){
    $("슬라이드부모").carousel("next");
});