이번 게시물에서는 캐러셀에 대해서 알아보겠습니다. 캐러셀이란 아래 동영상을 보면 알 수 있습니다. 글보다는 눈으로 보는 것이 훨씬 빠른 것 같습니다.
예시 코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Carousel using bxSlider.js</title>
<link rel="stylesheet" href="css/jquery.bxslider.css">
<style>
#wrapper{
width: 600px;
margin:0 auto;
}
</style>
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div class="bxslider">
<div>
<img src="images/things-1.jpeg" title="첫번째 이미지">
</div>
<div>
<img src="images/things-2.jpeg" title="두번째 이미지">
</div>
<div>
<img src="images/things-3.jpeg" title="세번째 이미지">
</div>
<div>
<img src="images/things-4.jpeg" title="네번째 이미지">
</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>
html에서 wrapper의 bxslider안에 이미지들을 나열했습니다. html 헤더에서 wrapper에 대한 width, margin 값을 조율하여 이미지 위치를 페이지 가운데 위치하도록 설정했습니다. 자바스크립트에서는 bxslider에 대해서 bxSlider 함수를 사용하여 캐러셀을 구성하였고 자동으로 페이지가 슬라이드 되도록 설정했습니다.
'웹 개발 > Front End' 카테고리의 다른 글
| 플렉스 박스 사이트 만들기 (0) | 2021.11.09 |
|---|---|
| 구글 웹 폰트 (1) | 2021.11.08 |
| 유튜브 동영상 풀 스크린 배경으로 사용하기 (0) | 2021.11.08 |
| 풀 스크린 배경 (0) | 2021.11.08 |
| CSS 그리드 레이아웃 (0) | 2021.11.08 |
댓글