'자바스크립트 슬라이드'에 해당되는 글 1건

공식 홈페이지 


https://owlcarousel2.github.io/OwlCarousel2/



공식 git-hub


https://github.com/OwlCarousel2/OwlCarousel2


이번에 소개해드릴 라이브러리는 정말 제가 실전에도 자주썼었고


슬라이드 라이브러리중 심플에서는 No.1 이라고 말 할수 있을 정도로


자주 사용했던 라이브러일수있습니다.


제가사용했던 버전은 구버전이었는데 이번에 나온건 좀더 기능이 많은것같네요.




<head> 태그안에 css 파일 로컬로 다운로드 받은 CSS 파일을 인클루드 시킵니다.


<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />



기본 스타일을 사용하려면 반드시 추가하라고 나와있네요


<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>



JS 파일은 


jquery 라이브러리 추가한뒤 바로밑에 추가하라고 정의되어있습니다.


jquery 태그위에 적용하면 오류가 발생하거나 동작이 원활하게 되지않겠죠?


우리는 라이브러리를 쓰는입장이니 하라는대로 합시다 (허허)



Wrap your items (divaimgspanli etc.) with a container element (divul etc.). Only the class owl-carousel is mandatory to apply proper styles:



요런 말이 나와있는데. 


결국 div 나 ul 태그로 묶으라고 나와있네요.


클래스 이름은 무조건 주어져야 한다고 합니다.


<div class="owl-carousel owl-theme">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>




데모페이지는 밑에 정리해두겠습니다



기본 basic 슬라이드 


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



반응형 슬라이드 (브라우저의 가로 크기나 세로크기에 따라서 

슬라이드가 자동조정됨)


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



그외에도 여러기능이 있네요 슬라이드 끊기지않고 쭉이어간다던지.. 


jquery로 로드할때에 속성값을 맞춰주면 아이콘이랑 

여러가지 바꿔서 사용할수 있었던것으로 기억합니다.


따로 만들어보는것도 중요하지만


실전을 위해서 자기가 자주 사용하는 라이브러리들은 정리해두는것이 중요합니다.


가져다쓰는것도 결국엔 기본문법이 되어야 가져다 쓸수있는겁니다.



즐프하시길 바랄께요 ^_^



블로그 이미지

잡코드맨

댓글을 달아 주세요