JQuery, bxslider
JQuery
- Download 탭으로 이동 -> 다른 이름으로 링크 저장
- Download jQuery 3.7.1
-> jquery-3.7.1.min.js : 정리X -> 수정할 필요가 없을 때 - Download the uncompressed development version of jQuery 3.7.1
-> jquery-3.7.1.js : 정리O -> 수정할 필요가 있을 때 사용 - 웬만하면 Download the uncompressed development version of jQuery 3.7.1 사용하기
JQuery 적용
<!-- JQuery 라이브러리를 임포팅합니다 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>예시) 토글 메뉴 구현
<!-- 토글 메뉴 구현을 위한 JQuery 소스를 삽입합니다 -->
<script>
$(function () {
// 토글 메뉴 플러그인 실행
var toggle = $("#toggle");
var menu = $("nav ul");
$(toggle).on("click", function (e) {
e.preventDefault(); // 이벤트 기본 동작 실행 막기
menu.slideToggle();
});
});
</script>bxslider
- Install 탭으로 이동 -> 복사하여 사용
- Examples: 예시보기
- Options: 옵션보기
bxslider 적용(JQuery src가 중복될 시, 생략하기)
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bxslider@4.2.17/dist/jquery.bxslider.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/bxslider@4.2.17/dist/jquery.bxslider.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>예시) 3개의 이미지 전환
<script>
$(document).ready(function () {
$(".slider").bxSlider({
mode: "fade",
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: 600,
speed: 500,
pause: 4000,
});
});
</script> <body>
<div class="slider">
<div><img src="images/top-1.jpg" /></div>
<div><img src="images/top-2.jpg" /></div>
<div><img src="images/top-3.jpg" /></div>
</div>
</body>
안녕하세요