웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 반응형 슬라이드 플러그인 OwlCarousel2 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] 반응형 슬라이드 플러그인 OwlCarousel2

해피CGI윤실장 2020. 6. 15. 09:17

반응형 기반의 회전식 슬라이드 및 터치식 슬라이드 등 다양한 효과의 슬라이드 jquery 플러그인 소스입니다.

터치 앤 드래그 및 최신 브라우저에 호환성이 높은 소스입니다.

 

 

예시된 샘플 슬라이드 효과는 대략 10여종이며, 기본적인 슬라이드 형식은 아래와 같습니다.

 

 

최근 홈페이지에 자주 이용되는 마우스 휠 슬라이드 효과가 있어
해당 소스를 이용한 효과를 참고하시기 바랍니다.

https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html


우선 기본베이스가 되는 슬라이드 소스를 html 에 삽입후

 

라는 소스를 적용하여 마우스 휠 소스가 적용되도록 합니다.

혹은 다운로드 받은 소스에서 docs > demos 폴더내에 mousewheel.html 파일을 확인하실수 있습니다.

본 소스에서는 원하는 만큼의 div 영역을 추가하거나 삭제하여도 문제가 없이 다음 번호를 순차적으로 루프하여

보여주고 있으며 loop 값을 false 로 적용할 경우 루프가 없는 형태의 휠마우스 효과가 적용됩니다.

홈페이지바로가기

Comments