[JavaScript] Slick.js 반응형 rows 이슈
Lpla
·2021. 1. 5. 21:24
반응형
대다수가 그렇듯 나도 캐러셀(Carousel) 라이브러리 중에 스와이퍼(Swiper.js)와 슬릭(Slick.js)을 자주 사용한다.
그런데 얼마 전 Slick을 사용하면서 아래와 같은 이슈를 겪었다.
먼저 Slick으로 한 화면에 5개의 슬라이더가 보이도록 만들었다.
그리고 반응형 작업을 위해 breakpoint 로 1280px 이하는 슬라이더가 3개만 보이도록,
그리고 768px 이하는 슬라이더가 가로 2, 세로 2 즉 2x2 = 4개가 보이도록 만들었다.
여기까지는 의도대로 잘 작동하고 있다.
하지만 768px 에서 다시 브라우저 크기를 늘리게 되면?
위 그림처럼 2줄에서 1줄로 바뀌지도 않고 좌우여백도 제대로 작동하지 않는 이슈가 생겼다.
전체 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
</head>
<body>
<div id="slick">
<div>
<a href="javascript:void(0);">
<img src="https://dummyimage.com/250x450/662a66/fff">
</a>
</div>
<div>
<a href="javascript:void(0);">
<img src="https://dummyimage.com/250x450/4c2a66/fff">
</a>
</div>
<div>
<a href="javascript:void(0);">
<img src="https://dummyimage.com/250x450/a262a66/fff">
</a>
</div>
<div>
<a href="javascript:void(0);">
<img src="https://dummyimage.com/250x450/d362a66/fff">
</a>
</div>
<div>
<a href="javascript:void(0);">
<img src="https://dummyimage.com/250x450/8c62a66/fff">
</a>
</div>
<div>
<a href="javascript:void(0);">
<img src="https://dummyimage.com/250x450/4f62a66/fff">
</a>
</div>
<div>
<a href="javascript:void(0);">
<img src="https://dummyimage.com/250x450/9e2a66/fff">
</a>
</div>
<div>
<a href="javascript:void(0);">
<img src="https://dummyimage.com/250x450/ed62a66/fff">
</a>
</div>
<div>
<a href="javascript:void(0);">
<img src="https://dummyimage.com/250x450/ff2a66/fff">
</a>
</div>
</div>
<div class="slick_arrow">
<div class="left_prev">
</div>
<div class="right_next">
</div>
</div>
<script>
$('#slick').slick({
slidesToShow: 5,
slidesPerRow: 1,
prevArrow: $('.left_prev'),
nextArrow: $('.right_next'),
responsive: [ // 반응형 웹 구현 옵션
{
breakpoint: 1280,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
rows: 2
}
}
]
});
</script>
</body>
</html>
이 이슈는 rows 값을 건드릴 때만 나타나는 현상으로 slick api를 이것저것 건드려봐도 도무지 해결되지 않았다.
거의 포기할 때 쯤 slick.min.js 를 slick.js 로 수정해보았다.
<!-- <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.js"></script>
그 결과 거짓말처럼 잘 작동한다.
minify 파일이 이슈의 원인이 될 거라고 몇이나 떠올릴 수 있을까?
...... 참 허무하다.
오늘의 교훈 : min파일을 맹신하지 말자.
반응형
