제이쿼리(jQuery) 기초 문법
제이쿼리 bxSlider 플러그인 활용
bxSlider 플러그인은 여러 개의 배너에 슬라이드 기능을 간편하게 적용할 수 있는 플러그인이다. 또한 bxSlider 플러그인은 모바일에도 최적화 되어 있어 슬라이드 기능도 동일하게 동작하며 반응형 디자인에도 최적화 되어 있다.
bxSlider플러그인 설치
1.bxSlider(http://bxslider.com/)홈페이지에서 [Click here to install] 버튼을 클릭한다.
2. install 페이지에서 [Download jquery.bxslider.zip here]를 클릭하면 플러그인 파일을 내려받을 수 있다. 또는 라이브러리 링크를 복사해서 붙여넣는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bxSlider 실습</title>
<script src="../js/jquery.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(function(){
$('.slide_gallery').bxSlider({
auto:true,
autoControls:false,
pagerCustom:'.slider-pager'
});
});
</script>
</head>
<body>
<div id="gallery_wrap">
<ul class="slide_gallery">
<li><img src="../Images/icon1.png" alt="사진1"></li>
<li><img src="../Images/icon2.png" alt="사진2"></li>
<li><img src="../Images/icon3.png" alt="사진3"></li>
<li><img src="../Images/facebook.gif" alt="사진4"></li>
<li><img src="../Images/twitter.gif" alt="사진5"></li>
</ul>
<ul class="slider-pager">
<li><a href="#" data-slide-index="0"><img src="../Images/icon1.png" alt="사진1"></a></li>
<li><a href="#" data-slide-index="1"><img src="../Images/icon2.png" alt="사진2"></a></li>
<li><a href="#" data-slide-index="2"><img src="../Images/icon3.png" alt="사진3"></a></li>
<li><a href="#" data-slide-index="3"><img src="../Images/facebook.gif" alt="사진4"></a></li>
<li><a href="#" data-slide-index="4"><img src="../Images/twitter.gif" alt="사진5"></a></li>
</ul>
</div>
</body>
</html>
'언어공부 > JavaScript&jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) 기초 문법 - 플러그인 직접 제작, 자주 묻는 질문 플러그인 제작 (0) | 2021.08.17 |
|---|---|
| 제이쿼리(jQuery) 기초 문법 - jquery-cookie 플러그인 활용 (0) | 2021.08.16 |
| 제이쿼리(jQuery) 기초 문법 - Ajax($.get())로 XML 데이터 바인딩 (0) | 2021.08.13 |
| 제이쿼리(jQuery) 기초 문법 - Ajax($.getJSON())로 JSON 데이터 바인딩 (0) | 2021.08.12 |
| 제이쿼리(jQuery) 기초 문법 - Ajax 관련 메소드 (2) (0) | 2021.08.11 |
