Lpla 개발 블로그

JavaScript/실전

[JavaScript] 클릭 이벤트로 Swiper 슬라이드 내용 변경

1. 기능 설명 탭을 클릭하면 클릭한 값과 일치하는 슬라이드만 보여주는 방법에 대해 알아보겠다. 예시를 보자. 아래와 같이 총 8개의 이미지가 있고 이것을 "음료", "빵", "과일" 로 분류하고자 한다. 그래서 "음료" 탭을 클릭했을 때는 콜라, 우유, 커피 슬라이드만 보여주고 "빵" 탭을 클릭했을 때는 햄버거, 샌드위치, 케익 슬라이드만 보여주고 "과일" 탭을 클릭했을 때는 사과, 바나나 슬라이드만 보여주고 싶다. 2. 단순 구현 단순하게 구현하는 방법은 각각 Swiper를 따로 만들어서 탭을 클릭했을 때 해당 Swiper만 보여주고 나머지는 숨기도록 하는 것이다. See the Pen 클릭 이벤트로 Swiper 슬라이드 내용 변경(좋지 않은 예시) by lpla (@lpla) on CodePen. ..

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 예제 - 첫번째 슬라이드에서 prev 기능 막기

1. 기본 구조 1 2 3 4 5 6 7 Swiper에서 loop 기능을 사용하지 않으면 첫번째 슬라이드에서 prev 버튼이 자동적으로 비활성화된다. 마찬가지로 마지막 슬라이드에서 next 버튼도 비활성화된다. 한편 loop 기능을 사용하게 되면 첫번째 슬라이드에도 이전 슬라이드가 존재하고, 마지막 슬라이드 다음에도 슬라이드가 존재하기 때문에 버튼이 항상 활성화되어 있다. 말 그대로 루프(반복)니까 당연한 현상이다. 그런데 사용자에 따라서 loop 기능을 사용하되 첫번째 슬라이드에서 prev 버튼을 비활성화하고 싶을 수 있다. 첫번째 슬라이드에서 마지막 슬라이드로 되돌아가는 것이 마음에 들지 않을 수도 있으니까. 이제 해결 방법에 대해 알아보자. 2. reachBeginning, reachEnd Swip..

JavaScript/실전

[JavaScript] Swiper 페이징(pagination) 2개 사용하기

1. 들어가며 오늘 동료 직원이 하나의 Swiper에 2개의 페이징을 사용할 수 있는지 질문했다. 구현하고자 하는 결과물은 아래와 같았다. 2. 페이징(Pagination)? Page + (i)tion API에 따라서 페이징(Paging) 혹은 페이지네이션(Pagination) 이라고 칭하는 이것은 요소의 개수를 나타내주는 UI를 말한다. (파기, 파지, 패지네이션이 아니다) 가장 흔한 페이징은 게시판의 하단에 있는 숫자들이다. 각설하고 Swiper의 페이징은 총 네 가지가 있다. bullets fraction progressbar custom 그리고 페이징에 포함되지 않지만 거의 같은 기능으로 Scrollbar가 있다. Scrollbar Swiper 페이징은 다음 코드로 추가할 수 있지만 오직 하나의 ..

JavaScript/실전

[JavaScript] Swiper 구버전 Demo, API 확인하기

최근 Swiper가 7 버전으로 업그레이드됐다. 그래서 현재 공식 사이트에 접속하면 최신 버전의 demo와 api 자료를 확인할 수 있다. Swiper는 다른 슬라이더 라이브러리에 비해서 피드백도 빠르고 업데이트도 빠른 점이 좋다. (너무 빨라서 문제다.) 문제는 예전에 작업한 사이트의 Swiper를 수정하고자 할 때 참고할 수 있는 페이지가 없다는 점이다. 이미 공식 api 페이지나 demo 페이지는 7 버전을 기준으로 업데이트되었고 구버전은 확인할 수 없다. 대부분은 최신 api를 참고하여 작업해도 문제 되지 않겠지만 위험성을 언제나 갖고 있는 것이다. 아쉽게도 Swiper 측은 신버전이 나오면 구버전은 더 이상 지원하지 않는다고 한다. Github를 보면 Swiper 5 버전의 API가 있는데 어째..

그누보드

[그누보드5] Swiper 최신글 만들기

1. 최신글 불러오기 그누보드에서 특정 게시판의 최신글을 불러오는 방법은 다음과 같다. 스킨 이름은 /skin/latest/스킨폴더명을 의미한다. 테이블 이름은 게시판을 생성할 때 짓는 고유 명칭으로 관리자 페이지에서 확인 가능하고 URL로도 알 수 있다. 게시판 스킨은 최신글을 불러오는데 어떤 영향도 끼치지 못한다. 2. 게시판 생성 관리자 페이지에서 게시판을 하나 만든다. 여기서는 newsletter로 만들었다. 게시판을 생성한 다음, 기억해야 할 것은 바로 이 TABLE명이다. 그리고 게시글을 작성한다. 이때 이미지는 첨부 파일 형태로 업로드해야 나중에 읽어 들일 수 있다. 여기선 이런 형태의 게시글을 5개 작성했다. 3. 스킨 추가 /skin/latest/스킨폴더명 경로에 최신글 폴더를 추가한다...

JavaScript/실전

[JavaScript] Swiper 예제 - 3D 입체 효과(coverflow)

Swiper의 effect: 'coverflow'를 사용하여 3D 입체 슬라이드를 만들 수 있다. HTML CSS .swiper-slide { width: 20%; margin-right: 10px; height: 200px; } .swiper-slide.slide01 { background-color: #BE5EC2; } .swiper-slide.slide02 { background-color: #F862A7; } .swiper-slide.slide03 { background-color: #FF7B87; } .swiper-slide.slide04 { background-color: #FFA26A; } .swiper-slide.slide05 { background-color: #FFCE5E; } .swi..

JavaScript/실전

[JavaScript] Swiper 예제 - 마우스오버시 일시정지

Swiper에서 autoplay 파라미터를 사용하여 자동재생 기능을 활성화할 수 있다. const swiper = new Swiper('.swiper-container', { autoplay: true, }); autoplay: true로 3초 마다 자동재생되는 슬라이드를 만들 수 있지만 그다지 추천하는 방법은 아니고 delay와 disableOnInteraction: false 로 세부 옵션을 추가하는 것이 좋다. const swiper = new Swiper('.swiper-container', { autoplay: { delay: 2000, disableOnInteraction: false, }, }); delay는 자동 재생 시간으로 유명하니 넘어가고 disableOnInteraction은 기본값..

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/실전

Swiper 예제 - display: none 이슈 해결

탭이나 팝업 형태로 swiper를 사용한다면 페이지를 로딩한 직후에는 슬라이더가 노출되지 않고 어떤 동작을 한 이후에 나타나게 된다. 즉 처음에 보이지 않는 display: none 상태인 요소에 swiper를 사용하게 되면 에러가 발생하곤 한다. See the Pen swiper display:none issue by lpla (@lpla) on CodePen. 위 예제에서 tab2를 클릭하면 나타나는 두번째 swiper는 제대로 동작하지 않는다. 이 문제를 해결하기 위해서는 observer 매개변수를 사용해야 한다. See the Pen swiper display:none issue solve by lpla (@lpla) on CodePen. observer: true, observeParents: ..