• Q&A
  • 회원가입
  • 로그인

[basic] BS3 - Carousel (BS캐러셀 = BS슬라이드)

 

BS3 

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

https://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

 

Carousel 소개

 

요소 순환 슬라이드쇼.

 


 

1.

캐러셀 플러그인은 아래 파일 중 아무거나 하나 추가하면 사용 가능.
개별: carousel.js 파일.
통합: bootstrap.js (또는, bootstrap.min.js) 파일.

 

2.

IE10 이상 주요 최신브라우저 지원. (∵ CSS3 (Transition 및 Animation) 사용)

 

 

Carousel 이미지만

 

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

  <!-- Indicators -->

  <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0"class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    <li data-target="#myCarousel" data-slide-to="2"></li>

  </ol>


  <!-- Wrapper for slides -->

  <div class="carousel-inner">

    <div class="item active">

      <img src="la.jpg" alt="Los Angeles">

    </div>

    <div class="item">

      <img src="chicago.jpg" alt="Chicago">

    </div>

    <div class="item">

      <img src="ny.jpg" alt="New York">

    </div>

  </div>


  <!-- Left and right controls -->

  <a class="left carousel-control" href="#myCarousel" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left"></span>

    <span class="sr-only">Previous</span>

  </a>

  <a class="right carousel-control" href="#myCarousel" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

 

예제보기

 

Carousel 이미지 + 텍스트

각각의 <div class="item"> 안에 <div class="carousel-caption">추가.


 

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

  <!-- Indicators -->

  <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    <li data-target="#myCarousel" data-slide-to="2"></li>

  </ol>


  <!-- Wrapper for slides -->

  <div class="carousel-inner">

    <div class="item active">

      <img src="la.jpg" alt="Chania">

      <div class="carousel-caption">

        <h3>Los Angeles</h3>

        <p>LA is always so much fun!</p>

      </div>

    </div>


    <div class="item">

      <img src="chicago.jpg" alt="Chicago">

      <div class="carousel-caption">

        <h3>Chicago</h3>

        <p>Thank you, Chicago!</p>

      </div>

    </div>


    <div class="item">

      <img src="ny.jpg" alt="New York">

      <div class="carousel-caption">

        <h3>New York</h3>

        <p>We love the Big Apple!</p>

      </div>

    </div>

  </div>


  <!-- Left and right controls -->

  <a class="left carousel-control" href="#myCarousel" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left"></span>

    <span class="sr-only">Previous</span>

  </a>

  <a class="right carousel-control" href="#myCarousel" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

 

 

 

JS Carousel

 

Carousel 클래스

 

.carousel

캐러셀 생성.

 

.slide

한 항목에서 다음 항목으로 이동할 때 CSS 전환 및 애니메이션 효과 추가.

이 효과를 원하지 않으면 이 클래스를 제거.

 

.carousel-indicators

슬라이드 쇼에 대한 지표를 추가. 각 슬라이드 하단의 작은 점. 

(회전 슬라이드에 슬라이드가 몇 개 있는지, 사용자가 현재 보고있는 슬라이드를 나타냄.)

 

.carousel-inner

슬라이드에 슬라이드를 추가.

 

.icon-next

유니 코드 아이콘 (오른쪽 화살표). 글리피콘 대신에 자주 사용.

 

.icon-prev

유니 코드 아이콘 (왼쪽 화살표). 글리피콘 대신에 자주 사용.

 

.item

각 슬라이드의 내용을 지정.

 

.left carousel-control

슬라이드쇼에 왼쪽 버튼을 추가하여 슬라이드 간 이동 가능하게 함.

 

.right carousel-control

슬라이드쇼에 오른쪽 버튼을 추가하여 슬라이드 간 이동 가능하게 함.

 

.carousel-caption

슬라이드쇼의 캡션 지정.

 

 

 

Carousel 방법1 - data-* 속성 이용

[핵심코드]

 

<!-- data-ride = "carousel"속성 : 캐러셀 메뉴를 활성화 시킴.-->

 

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


<!-- data-slide 및 data-slide-to 속성 : 이동할 슬라이드 지정 -->

<li data-target="#myCarousel" data-slide-to="1"></li>


<!-- data-slide 속성: prev 또는 next 두 값을 허용,  data-slide-to 속성: 숫자 허용.-->

<a class="left carousel-control" href="#myCarousel" data-slide="prev">

 


[전체코드]

 

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <style>

  .carousel-inner > .item > img,

  .carousel-inner > .item > a > img {

    width: 70%;

    margin: auto;

  }

  </style>

</head>

<body>


<div class="container">

  <br>

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

    <!-- Indicators -->

    <ol class="carousel-indicators">

      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

      <li data-target="#myCarousel" data-slide-to="1"></li>

      <li data-target="#myCarousel" data-slide-to="2"></li>

      <li data-target="#myCarousel" data-slide-to="3"></li>

    </ol>


    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">


      <div class="item active">

        <img src="a.jpg" alt="a" width="460" height="345">

        <div class="carousel-caption">

          <h3>a 제목</h3>

          <p>a 내용</p>

        </div>

      </div>


      <div class="item">

        <img src="b.jpg" alt="b" width="460" height="345">

        <div class="carousel-caption">

          <h3>b 제목</h3>

          <p>b 내용</p>

        </div>

      </div>

    

      <div class="item">

        <img src="c.jpg" alt="c" width="460" height="345">

        <div class="carousel-caption">

          <h3>c 제목</h3>

          <p>c 내용</p>

        </div>

      </div>


      <div class="item">

        <img src="d.jpg" alt="d" width="460" height="345">

        <div class="carousel-caption">

          <h3>d 제목</h3>

          <p>d 내용</p>

        </div>

      </div>

  

    </div>


    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

      <span class="sr-only">Previous</span>

    </a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>

</div>


</body>

</html>


 

 

 

Carousel 방법2 - JS 이용 

 

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <style>

  .carousel-inner > .item > img,

  .carousel-inner > .item > a > img {

    width: 70%;

    margin: auto;

  }

  </style>

</head>

<body>


<div class="container">

  <h2>Activate Carousel with JavaScript</h2>

  <div id="myCarousel" class="carousel slide">

    <!-- Indicators -->

    <ol class="carousel-indicators">

      <li class="item1 active"></li>

      <li class="item2"></li>

      <li class="item3"></li>

      <li class="item4"></li>

    </ol>


    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">


      <div class="item active">

        <img src="a.jpg" alt="a" width="460" height="345">

        <div class="carousel-caption">

          <h3>a 제목</h3>

          <p>a 내용</p>

        </div>

      </div>


      <div class="item">

        <img src="b.jpg" alt="b" width="460" height="345">

        <div class="carousel-caption">

          <h3>b 제목</h3>

          <p>b 내용</p>

        </div>

      </div>

    

      <div class="item">

        <img src="c.jpg" alt="c" width="460" height="345">

        <div class="carousel-caption">

          <h3>c 제목</h3>

          <p>c 내용</p>

        </div>

      </div>


      <div class="item">

        <img src="d.jpg" alt="d" width="460" height="345">

        <div class="carousel-caption">

          <h3>d 제목</h3>

          <p>d 내용</p>

        </div>

      </div>

  

    </div>


    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" role="button">

      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

      <span class="sr-only">Previous</span>

    </a>

    <a class="right carousel-control" href="#myCarousel" role="button">

      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>

</div>


<script>

$(document).ready(function(){

  // Activate Carousel (캐러셀 활성화)

  $("#myCarousel").carousel();

    

  // Enable Carousel Indicators (각 슬라이드 이동)

  $(".item1").click(function(){

    $("#myCarousel").carousel(0);

  });

  $(".item2").click(function(){

    $("#myCarousel").carousel(1);

  });

  $(".item3").click(function(){

    $("#myCarousel").carousel(2);

  });

  $(".item4").click(function(){

    $("#myCarousel").carousel(3);

  });

    

  // Enable Carousel Controls (슬라이드 좌우이동)

  $(".left").click(function(){

    $("#myCarousel").carousel("prev");

  });

  $(".right").click(function(){

    $("#myCarousel").carousel("next");

  });

});

</script>


</body>

</html>


 

 

Carousel Option (옵션)

 

interval

각 슬라이드 사이의 지연 시간 (밀리 초) 지정. (기본값: 5000)

가능 속성값 유형: number false

참고 : 항목이 자동으로 슬라이드 되는 걸 막으려면 interval을 false로 설정.

 

pause

마우스 포인터가 슬라이드쇼에 들어가면 슬라이드 일시 중지시키고,

마우스 포인터가 슬라이드쇼를 벗어나면 슬라이드를 다시 시작시킴. (기본값: hover)

가능 속성값 유형: string | false 

참고 : 이 기능을 사용 안 하려면, pause 속성값을 false로 설정.

 

wrap

슬라이드 쇼가 모든 슬라이드를 계속 통과해야하는지 아니면 마지막 슬라이드에서 정지해야하는지 지정.

가능 속성값 유형: boolean

true - 지속적으로 반복 회전. (기본값)

false - 마지막 항목에서 멈춤.

 

 

Carousel Method (메서드)

 

.carousel (option)

옵션을 사용하여 슬라이드 쇼를 활성화. 유효한 값은 위 옵션 참조.

 

.carousel ( "cycle")

캐러셀 항목을 왼쪽에서 오른쪽으로 이동.

 

.carousel ( "pause")

캐러셀 일시정지.

 

.carousel (number)

지정된 항목으로 이동. (0부터 시작 : 첫 번째 항목은 0, 두 번째 항목은 1, ...).

 

.carousel ( "prev")

이전 항목으로 이동.

 

.carousel ( "next")

다음 항목으로 이동.

 

 

Carousel Event (이벤트)

 

slide.bs.carousel

캐러셀이 한 항목에서 다른 항목으로 슬라이드하려고 할 때 발생.

 

slid.bs.carousel

캐러셀이 한 항목에서 다른 항목으로 슬라이딩을 마치면 발생.

 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012