- 이슈 상황
- 해결 방법
- 데모 화면
# 이슈 상황
Slick Slider를 반응형으로 좌우 배치 할때, 레이아웃이 틀어지는 경우가 생겼다.
# 해결 방법
이는 Slick-slider가 속한 영역보다 너비가 커서, 옆에 있는 code 영역을 밀어내어 차지하게 되는건데,
이유는 모든 요소의 CSS의 overflow 기본 값이 visible로 설정되어 있기 때문이다. {overflow: visible;}
초과하는 영역을 넘어가지 않게 설정하면 이 문제는 해결된다.
초과되는 요소에 overflow : auto, overflow : scroll, overflow : hidden ... 등을 CSS 적용하면 된다.
그러면 브라우저를 리사이징해도 Slick Slider의 레이아웃이 틀어지지 않는 것을 볼 수 있다.
.slick-slider{overflow : auto;}
# 데모 화면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slick-Slider 좌우배치 이슈</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></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">
<style>
/* reset.css */
*{margin: 0; padding: 0;;}
body{overflow-x: hidden; }
/* 레이아웃 */
.wrap{max-width: 1200px; margin: 40px auto; }
.description{padding: 24px; border-top: 1px solid #000; border-bottom: 1px solid #000; margin: 24px 0; background-color: #f0f0f0;}
.group{display: flex; gap: 24px;}
.code{width: 30%;}
.code span{color: crimson;}
[class*="slider-"]{flex:1}
.slider-1{height: 200px;}
.slider-no{white-space: nowrap;}
.slider-no2{white-space: nowrap; overflow: auto;}
.slider-2{overflow: auto;}
/* 클래스명 지정 */
.class{position: relative; padding: 36px 24px; box-sizing: border-box; border: 1px solid #ddd;}
.class::after{ position: absolute; top:0px; left:0px; color: #fff; font-size: 14px; background-color: #999; padding: 1px 4px 3px 4px;}
.group::after{ content: 'group'; }
.group .code::after{ content: 'code'; }
.group [class*="slider-"]::after{ content: 'slider'; }
/* Slider.css */
.slick-slider {position: relative; padding: 36px 48px 36px 48px; }
.slick-slider .slick-slide{width: 100%; height: 200px; font-size: 36px; font-weight:600; line-height: 140px; border-radius: 10px; padding: 24px; box-sizing: border-box;}
.slick-slider .slick-arrow{position: absolute; top:50%; transform: translateY(-50%); width: 36px; height: 48px; background-color: rgba(0,0,0,.5); color: #fff;; z-index: 1; cursor: pointer; border: 0px;}
.slick-slider .slick-arrow:hover{background-color: rgba(0,0,0,.8);}
.slick-slider .slick-arrow.slick-prev{left:0;}
.slick-slider .slick-arrow.slick-next{right:0;}
</style>
</head>
<body>
<div class="wrap">
<p class="description">Slick Slider를 좌우 배치 하면, 하단 처럼 레이아웃이 틀어진다. 반응형으로 브라우저 크기를 이동하면 Slider 자체도 레이아웃이 틀어지는 것을 볼 수 있다.</p>
<div class="group class">
<div class="code class">
.group { display: flex; }<br/>
.group .code { width: 30%; }<br/>
.group .slider { flex:1; }
</div>
<div class="slider-1 class">
<div style="background-color: #e3eef1;">Slider-1</div>
<div style="background-color: #fae2e2;">Slider-2</div>
<div style="background-color: #c9e6d5;">Slider-3</div>
</div>
</div>
<p class="description">이는 Slick-slider가 속한 영역보다 너비가 커서, 옆에 있는 code 영역을 밀어내어 차지하게 된다. <br/>
이유는 모든 요소의 CSS의 overflow 기본 값이 visible로 설정되어 있기 때문이다. {overflow: visible;}</p>
<div class="group class">
<div class="code class">
.group { display: flex; }<br/>
.group .code { width: 30%; }<br/>
.group .slider { flex:1; <span> white-space: nowrap;</span> }
</div>
<div class="slider-no class">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam a voluptatum voluptates ipsa, laudantium sint reiciendis quidem laborum! Blanditiis accusamus impedit vero eos quos ex quo nostrum fugit quasi sit!
</div>
</div>
<p class="description">초과하는 영역을 넘어가지 않게 설정하면 이 문제는 해결된다. overflow : auto, overflow : scroll, overflow : hidden ... 등</p>
<div class="group class">
<div class="code class">
.group { display: flex; }<br/>
.group .code { width: 30%; }<br/>
.group .slider { flex:1; white-space: nowrap; <span> overflow: auto; </span> }
</div>
<div class="slider-no2 class">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam a voluptatum voluptates ipsa, laudantium sint reiciendis quidem laborum! Blanditiis accusamus impedit vero eos quos ex quo nostrum fugit quasi sit!
</div>
</div>
<p class="description">Slick Slider 도 같은 원리로 overflow를 설정해주면 해결된다.<br/>
브라우저를 리사이징해도 Slick Slider의 레이아웃이 틀어지지 않는 것을 볼 수 있다.</p>
<div class="group class">
<div class="code class">
.group { display: flex; }<br/>
.group .code { width: 30%; }<br/>
.group .slider { flex:1; <span>overflow: auto;</span> }
</div>
<div class="slider-2 class">
<div style="background-color: #e3eef1;">Slider-1</div>
<div style="background-color: #fae2e2;">Slider-2</div>
<div style="background-color: #c9e6d5;">Slider-3</div>
</div>
</div>
</div>
<script>
$(function(){
$(".slider-1").slick({})
$(".slider-2").slick({})
$(".slick-slider .slick-arrow.slick-prev").text("◀")
$(".slick-slider .slick-arrow.slick-next").text("▶")
});
</script>
</body>
</html>'Web 개발 > Plugin&Library' 카테고리의 다른 글
| Flatpickr [2] : 옵션 정리 - 날짜&시간 선택 JS 라이브러리 (0) | 2025.03.04 |
|---|---|
| Flatpickr [1] - 날짜&시간 선택 JS 라이브러리 (0) | 2025.02.28 |
| Slick.js [3] : HTML 구조 & CSS 적용 - 슬라이드 jQuery 라이브러리 (0) | 2025.02.21 |
| Slick.js [2] : 옵션 정리- 슬라이드 jQuery 라이브러리 (0) | 2025.02.20 |
| Slick.js [1] - 슬라이드 jQuery 라이브러리 (0) | 2025.02.19 |
