캐러셀을 만들어 주는 플러그인 중에서도 bxSlider 플러그인을 많이 사용하는데, 그 이유는 캐러셀에서 필요한 기능이 많이 들어있기 때문이다. 게다가 반응형을 지원하기 때문에, 데스크톱뿐만 아니라 모바일에서 캐러셀을 구현할 수 있다. 이미지 뿐 아니라 웹 문서 안의 어떤 요소라도 캐러셀로 만들 수 있다
플러그인에 필요한 파일은 dist 폴더 안에 있는 css와 js 파일이다
그리고 이 캐러셀에 들어가는 이미지 파일 역시 같은 파일에 저장되어야 한다
bxSlider 플러그인을 사용해 캐러셀 만들기
- 다음코드를 </title> 태 뒤에 삽입해 jquery.bxslider.css 파일을 링크한다
<title>Carousel using bxSlider.js</title>
<link rel="stylesheet" href="css/jquery.bxslider.css">
- bxSlider 플러그인을 사용하기 위해 스크립트 파일을 링크하는 소스를 </body> 태그 앞에 추가한다
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
</body>
- bxSlider 플러그인을 사용하기 위해서는 스크롤할 내용 전체를 감싸는 새로은 <div> 태그를 추가해야한다 여기에서는 bxSlider 클래스 이름을 사용하는데 다른 이름을 사용해도 상관 없다
<div id="wrapper">
<div class="bxslider">
<div>
<img src="images/things-1.jpeg" title="슬라이더 연습-1">
</div>
<div>
<img src="images/things-2.jpeg" title="슬라이더 연습-2">
</div>
<div>
<img src="images/things-3.jpeg" title="슬라이더 연습-3">
</div>
<div>
<img src="images/things-4.jpeg" title="슬라이더 연습-4">
</div>
</div>
</div>
</div>
- bxSlider 플러그인을 실행하면 bxSlider() 메서드를 사용한다 플러그인을 실행하는 스크립트 코드를 </body> 태그 앞에 추가하고 실행하면 작동된다
<script>
$(function(){
$('.bxslider').bxSlider({
slideWidth:600,
captions:true,
auto:true,
autoControls:true,
stopAutoOnclick:true,
})
});
</script>
Ex.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Carousel using bxSlider.js</title>
<link rel="stylesheet" href="css/jquery.bxslider.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
<style>
#wrapper{
width:600px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="bxslider">
<div>
<img src="images/things-1.jpeg" title="슬라이더 연습-1">
</div>
<div>
<img src="images/things-2.jpeg" title="슬라이더 연습-2">
</div>
<div>
<img src="images/things-3.jpeg" title="슬라이더 연습-3">
</div>
<div>
<img src="images/things-4.jpeg" title="슬라이더 연습-4">
</div>
</div>
</div>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(function(){
$('.bxslider').bxSlider({
slideWidth:600,
captions:true,
auto:true,
autoControls:true,
stopAutoOnclick:true,
})
});
</script>
</body>
</html>
'프론트 개발' 카테고리의 다른 글
| [ FE ] Do it! 프런트엔드 웹디자인 입문 11-4 그 밖의 캐러셀 플러그인 (0) | 2026.02.27 |
|---|---|
| [ FE ] Do it! 프런트엔드 웹디자인 입문 11-3 한 화면에 여러 개의 이미지를 보여줄 수 있는 Owl Carousel 플러그인 (0) | 2026.02.27 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 11-1 캐러셀이란? (0) | 2026.02.25 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 10-2 풀 스크린 배경 동영상 직접 만들기 (0) | 2026.02.25 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 10-1 풀 스크린 배경 이미지 직접 만들기 (0) | 2026.02.25 |