11-1 캐러셀이란?

캐러셀이란 원래 회전 목마라는 의미를 가지고 있는데, 웹 디자인에서의 캐러셀도 중요하다고 생각하는 몇가지 내용을 하나씩 회전하면서 보여주고 마지막 내용 다음에는 다시 첫번째 내용으로 연결해서 보여주는 것을 말한다.

캐러셀을 사용하면 한 공간에 여러개의 내용을 번갈아 보여주기 때문에 제한된 공간에 많은 양의 내용을 보여줄 때 적합하다

캐러셀을 위한 다양한 플러그인

carousel plugin / image slideshow plugin / slider plugin 등

11-2 캡션, 비디오, 반응형 등 다양한 옵션 설정이 가능한 bxSlider 플러그인

캐러셀을 만들어 주는 플러그인 중에서도 bxSlider 플러그인을 많이 사용하는데, 그 이유는 캐러셀에서 필요한 기능이 많이 들어있기 때문이다. 게다가 반응형을 지원하기 때문에, 데스크톱뿐만 아니라 모바일에서 캐러셀을 구현할 수 있다. 이미지 뿐 아니라 웹 문서 안의 어떤 요소라도 캐러셀로 만들 수 있다

플러그인에 필요한 파일은 dist 폴더 안에 있는 css와 js 파일이다

그리고 이 캐러셀에 들어가는 이미지 파일 역시 같은 파일에 저장되어야 한다

bxSlider 플러그인을 사용해 캐러셀 만들기

1. 다음코드를 </title> 태 뒤에 삽입해 jquery.bxslider.css 파일을 링크한다

    <title>Carousel using bxSlider.js</title>
    <link rel="stylesheet" href="css/jquery.bxslider.css">

1. bxSlider 플러그인을 사용하기 위해 스크립트 파일을 링크하는 소스를 </body> 태그 앞에 추가한다

<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
</body>

1. bxSlider 플러그인을 사용하기 위해서는 스크롤할 내용 전체를 감싸는 새로은 <div> 태그를 추가해야한다 여기에서는 bxSlider 클래스 이름을 사용하는데 다른 이름을 사용해도 상관 없다

<div id="wrapper">
      <div class="bxslider">
        <div>
          <img src="images/things-1.jpeg" title="슬라이더 연습-1">
        </div>
        <div>
          <img src="images/things-2.jpeg" title="슬라이더 연습-2">
        </div>
        <div>
          <img src="images/things-3.jpeg" title="슬라이더 연습-3">
        </div>         
        <div>
            <img src="images/things-4.jpeg" title="슬라이더 연습-4">
            </div>
          </div>
        </div>            
		</div>

1. bxSlider 플러그인을 실행하면 bxSlider() 메서드를 사용한다 플러그인을 실행하는 스크립트 코드를 </body> 태그 앞에 추가하고 실행하면 작동된다

<script>
      $(function(){
        $('.bxslider').bxSlider({
          slideWidth:600,
          captions:true,
          auto:true,
          autoControls:true,
          stopAutoOnclick:true,
        })
      });
    </script>

Ex.

11-3 한 화면에 여러 개의 이미지를 보여줄 수 있는 Owl Carousel 플러그인