본문 바로가기

WEB/내맘대로 코딩

최악의 슬라이드 플러그인 기능구현

OwlCarousel2

슬라이드 중에서 가장 후진 것으로 평가받는 플러그인

bxslider, swiperjs 보다도 후진 것으로 평가받는 최악의 슬라이드 플러그인이나 현 프로젝트에서 사용중이라 어쩔수 없이 정리한다.

owlcarousel2 에서 커스텀가능한 기능구현

마지막 슬라이드에서 더보기 기능 추가

슬라이드 마지막에서 링크나 버튼이 동적으로 붙게하는 경우


재생/정지 기능

정지버튼을 눌러도 모바일에서 스와이프하면 재생이 되는데, 이를 정지시킬 필요가 있는경우

접근성 처리를 할때 좌우 버튼을 누르거나 정지버튼을 누른후 재생을 멈춰야하는데 owl은 스와이프시 재생이 다시 진행되는 버그가 있다.

정지나 재생을 구분짓는 클래스를 두고 해당 클래스가 붙었을때 컨트롤하면 이를 개선할 수 있다.


높이 가변옵션

Auto Height라는 옵션이 있으나 높이가 들쭉날쭉 모션 자체가 상당히 어색하므로, 최대 높이값 계산해서 적용하는게 차라리 낫다.


슬라이드 애니메이션

슬라이드 요소를 움직이고 싶은 경우

로딩하자마자 active가 붙는데 시간차 효과를 주고싶을때는 setTimeout을 이용한다.


'WEB > 내맘대로 코딩' 카테고리의 다른 글

Bounce Effect  (0) 2021.08.11
최악의 슬라이드 플러그인 기능구현  (0) 2021.08.10
드래그로 정렬가능한 컴포넌트  (0) 2021.01.05
셀렉트박스 url 이동  (0) 2020.12.27
일반스크롤 vs 아이스크롤  (0) 2020.12.27
깜박임 효과  (0) 2020.12.15