- 0
- 이니스프리
- 조회 수 496
동일한 페이지 내에서 복수의 OwlCarousel의 설정을 달리해야 하는 경우에
다음과 같은 방법으로 하시면 됩니다 ^^
우선 내용을 넣을 HTML에서 각 div 태그마다 id를 다르게 설정합니다.
[예시] <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">
그리고 설정을 넣을 script에서 위 id대로 셀렉트 해주면 됩니다.
[예시] $('#owl-one').owlCarousel({ $('#owl-two').owlCarousel({ $('#owl-three').owlCarousel({
저도 잠시 삽질을 했는데요 ㅠㅠ
첫 번째 carousel은 id를 지정하지 않고 그대로 두고 두 번째 carousel부터 id를 지정했더니
첫 번째 carousel의 설정이 두 번째에 그대로 반영되더군요 ㅠㅠ
각각의 carousel의 id를 달리 지정해니 비로소 제대로 작동하네요.
그리고 아래 참고 페이지에 class 명만 달리 하는 방법이 소개되어 있던데요.
id를 지정하는 방법이 더욱 확실하게 잘 작동하는 것 같네요 ^-^
참고: https://github.com/OwlCarousel2/OwlCarousel2/issues/1906
작성자
댓글 0
권한이 없습니다.