[CSS] - bxslider 이용한 캐러셀, owlcarousel 이용한 다중 캐러셀
○ bxslider 이용한 캐러셀, owlcarousel 이용한 다중 캐러셀 |
https://bxslider.com/install/ 에서 bxslider 를 다운로드 받는다 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Carousel using bxSlider.js</title> // bxslider 사용하기 위해! <link rel="stylesheet" href="./css/jquery.bxslider.css"> <script src="./js/jquery-3.1.1.min.js"></script> <script src="./js/jquery.bxslider.js"></script> <script> // jquery는 스크립트 사용 $(function(){ // 익명함수 $(".bxslider").bxSlider({ // class는 .으로 접근, .다음에 메소드다 slideWidth:600, captions:true, auto:true, // 자동실행 autoControls:true, // 재생버튼 표시 stopAutoOnclick:true // 클릭하면 자동멈춤 지정 }); }); </script> <style> // css는 style 사용 #은 id로 접근 #wrapper { width:600px; margin:0 auto; } </style>
</head> <body> <div id="wrapper"> <div class="bxslider"> <div> <img src="./img/things-1.jpeg" alt="캐러셀 그림1" title="슬라이더1"> </div> <div> <img src="./img/things-2.jpeg" alt="캐러셀 그림2" title="슬라이더2"> </div> <div> <img src="./img/things-3.jpeg" alt="캐러셀 그림3" title="슬라이더3"> </div> <div> <img src="./img/things-4.jpeg" alt="캐러셀 그림4" title="슬라이더4"> </div> </div> </div> </body> </html> 이거말고 여러개의 이미지를 캐러셀하고 싶다면 아래를 참조해보면 된다 https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> // 아래의 css와 js파일은 다운받으면 있으니 찾아서 원하는 프로젝트 폴더에 넣는다 // 5개가 다 있어야 동작한다 !!! <link rel="stylesheet" href="/css/owl.carousel.min.css"> <link rel="stylesheet" href="/css/owl.theme.default.min.css"> <script src="/js/jquery.min.js"></script> <script src="/js/owlcarousel/owl.carousel.min.js"></script> <script src="js/owl.carousel.js"></script> </head> <body> <div class="owl-carousel owl-theme"> <img src="img/1.PNG"> <img src="img/2.PNG"> <img src="img/3.PNG"> <img src="img/4.PNG"> <img src="img/5.PNG"> <img src="img/6.PNG"> <img src="img/7.PNG"> <img src="img/8.PNG"> <img src="img/9.PNG"> <img src="img/10.PNG"> <img src="img/11.PNG"> </div> <script> $('.owl-carousel').owlCarousel({ loop: true, margin: 10, nav: true, responsive: { // 반응형이라 가로 사이즈에 맞춰 아이템 개수를 나타낸다 0: { items: 1 }, 600: { items: 3 }, 1000: { items: 5 } } }) </script> </body> </html> |
