[jQuery] Owl Carousel 여백 없애기

Owl Carousel는 jquery 기반으로 반응형, 터치 기능을 제공하는 이미지 슬라이더이다.

https://owlcarousel2.github.io/OwlCarousel2/

Home | Owl Carousel | 2.3.4

 

그런데 Owl Carousel 옵션에 margin:0, items:1 을 넣어 이미지 하나씩 나오도록 설정하여 사용하였는데, 오른쪽에 여백이 30px씩 계속 생기는 문제가 발생하였다. PC화면에서는 문제가 발생하지 않는데, 이상하게 모바일에서만 계속 여백이 생겼다.

<script>
$("#slider").owlCarousel({
    loop:true,
    nav:false,
    margin:0,
    autoplay:true,
    items:1
})
</script>

 

 

코드를 확인해보니 화면 크기가 달라져도 동일하게 30px씩 계속 여백이 생겼다.

Owl Carousel 공식 홈페이지 예시에서도 화면 사이즈가 달라져도 양옆 30px씩 항상 padding이 생겼다.

Owl Carousel에서 제공하는 예시

 

그래서 owl carousel 구성 파일에서 30px이 생기는 부분을 찾아 해결하였다.

Owlcarousel.js 파일이 문제였는데 이 파일 중간쯤 pull = 30 부분을 0으로 변경하면 해결되는 아주 간단한 방법.

/**
 * Gets absolute position of the closest item for a coordinate.
 * @todo Setting `freeDrag` makes `closest` not reusable. See #165.
 * @protected
 * @param {Number} coordinate - The coordinate in pixel.
 * @param {String} direction - The direction to check for the closest item. Ether `left` or `right`.
 * @return {Number} - The absolute position of the closest item.
 */
Owl.prototype.closest = function(coordinate, direction) {
    var position = -1,
        pull = 0, // 30에서 0으로 숫자 변경
        width = this.width(),
        coordinates = this.coordinates();