Lpla 개발 블로그

JavaScript/실전

[JavaScript] Swiper 해상도에 따라 다른 효과 사용하기 (반응형)

Swiper를 PC 해상도에서만 사용하거나 모바일 해상도에서만 사용하는 기능을 원하면 다음 포스팅을 참고하자. Swiper 예제 - 특정 해상도에서만 사용하기 (반응형) 1. breakpoints? swiper는 breakpoints로 반응형을 지원한다. const swiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 10, breakpoints: { // 1280px 보다 클 경우 1280: { slidesPe.. lpla.tistory.com 코딩을 하다보면 다양한 요구사항에 맞닥뜨린다. 이번에는 1200px 이상의 해상도에서는 슬라이드, 1200px 미만의 해상도에서는 페이드인 Swiper 슬라이드를 만들고자 한다. 1..

JavaScript/실전

Swiper 예제 - 특정 해상도에서만 사용하기 (반응형)

1. breakpoints? swiper는 breakpoints로 반응형을 지원한다. const swiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 10, breakpoints: { // 1280px 보다 클 경우 1280: { slidesPerView: 2, spaceBetween: 20 } } }); breakpoints는 반응형에 따라 swiper 효과를 다르게 주고 싶을 때 유용하다. 하지만 swiper 기능 자체를 호출(실행)/제거하려면 breakpoints로 해결할 수 없다. 가령 pc 해상도에서만 사용하고 모바일 해상도에서는 사용하지 않으려면 가장 단순무식한 방법은 display: none; 으로 pc에서 보여..

JavaScript/실전

[JavaScript] Slick.js 반응형 rows 이슈

대다수가 그렇듯 나도 캐러셀(Carousel) 라이브러리 중에 스와이퍼(Swiper.js)와 슬릭(Slick.js)을 자주 사용한다. 그런데 얼마 전 Slick을 사용하면서 아래와 같은 이슈를 겪었다. 먼저 Slick으로 한 화면에 5개의 슬라이더가 보이도록 만들었다. 그리고 반응형 작업을 위해 breakpoint 로 1280px 이하는 슬라이더가 3개만 보이도록, 그리고 768px 이하는 슬라이더가 가로 2, 세로 2 즉 2x2 = 4개가 보이도록 만들었다. 여기까지는 의도대로 잘 작동하고 있다. 하지만 768px 에서 다시 브라우저 크기를 늘리게 되면? 위 그림처럼 2줄에서 1줄로 바뀌지도 않고 좌우여백도 제대로 작동하지 않는 이슈가 생겼다. 전체 코드는 다음과 같다. 이 이슈는 rows 값을 건드릴..