owl carousel 슬라이드 여러개 넣기

웹 포트폴리오를 만드는 중에 한 가지 난관에 봉착한 것이 있었는데,
바로 owl-carousel에 관한 문제였다.

내가 만들고 있는 웹에는 owl-carousel의 플러그인을 사용하여
이미지 슬라이더를 구현하고 있었는데,
이 슬라이더를 한 개만 썼을때는 코드를 그대로 갖다붙혀도 문제가 없었으나,

슬라이더를 하나 더 늘리니 클래스를 제대로 인식하지 못했고 어떻게 수정할지 감이 안잡히는 상황이 왔었다.

하지만, 이 문제는 구글에 서치를 해보며 쉽게 해결되었다.
원 링크는 [https://github.com/OwlCarousel2/OwlCarousel2/issues/1906]
이 곳으로 가면된다. 복잡한 영어가 없으므로, 쉽게 해석가능할 것이다.

일반적으로 owl carousel의 클래스명을 입력할때, 우리는 아래와 같이 입력한다.

<div class="owl-carousel owl-theme owl-loaded">  
    <div class="owl-stage-outer">  
        <div class="owl-stage">  
            <div class="owl-item">...</div>  
            <div class="owl-item">...</div>  
            <div class="owl-item">...</div>  
        </div>  
    </div>
</div>

 

만약, 여기서 슬라이더를 하나 더 추가한다면, 다음과 같이 구분을 해주면 된다.

<div class="owl-one owl-carousel owl-theme">
<div class="owl-two owl-carousel owl-theme">
<div class="owl-three owl-carousel owl-theme">

혹은,

<div id="owl-one" class="owl-carousel owl-theme">
<div id="owl-two" class="owl-carousel owl-theme">
<div id="owl-three" class="owl-carousel owl-theme">

*이렇게 아예 ID값을 주어도 된다.

직접 해본 결과, id값을 추가하는것이 보다 안정적으로 슬라이더를 늘리는데 도움이 되었다.

클래스와 id값을 추가하였다면, js 파일에 있는 owl-carousel 선택자도 변경하는것을
잊지말아야한다.*

$('#owl-one').owlCarousel({
$('#owl-two').owlCarousel({
$('#owl-three').owlCarousel({

하지만, 계속되는 owl carousel의 오류로 인해,
결국 다른 슬라이드를 이용하게 되었다는 비하인드 스토리가 있다..