공부하자
제이쿼리 플러그인 슬라이드 효과 bxslider 본문
bxslider
: 슬라이드 효과를 줄 수 있는 제이쿼리 플러그인.
bxslider에서 제공하는 각종 옵션값을 수정해 다양하게 표현 할 수 있다.
jQuery Content Slider | Responsive jQuery Slider | bxSlider
Coded with ♥ by
bxslider.com
사용법
1. bxslider에서 제공하는 플러그인 파일 다운로드 및 프로젝트 파일에 js, css 연결
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css" /> <!-- bxslider css -->
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script> <!-- bxslider js -->
</head>
<body>
</body>
</html>
2. bxslider 기본 구조 및 js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.slider').bxSlider();
});
</script>
</head>
<body>
<div class="slider">
<div>첫번째 슬라이드</div>
<div>두번째 슬라이드</div>
</div>
</body>
</html>
3. js 에 필요한 옵션값 추가
$(function(){
//각종 옵션 추가 시 이 영역에 추가 할 수 있다. 홈페이지 참고
pager:false, //하단 페이지 아이콘 제거
controls:false, //양 옆 버튼 제거
auto:true, //자동 넘김
pause:3000, //자동 넘김 시간 조절
speed:1000, //넘어가는 시간 조절
//mode:vertical, //상하 넘김(넘김 효과 조절,기본값은 horizen)
});
* $("선택자").플러그인 정의 함수(); 의 형태로 다른 플러그인도 사용 가능
$(function(){
//$("선택자").플러그인정의함수(); 의 형태로 다른 플러그인도 사용 가능
// bxslider 커스텀마이징 두번째 방법
$(".slider").bxSlider({
onSlideAfter:function($slideElement, oldIndex, newIndex){
$(".slider > div").removeClass("on");
$slideElement.addClass("on");
}
});
});
* 슬라이드 하나에 여러 이미지 넣기
// 상품 3개씩 정렬한 배너
$(function () {
$(".section.box > ul").bxSlider({
// bxSlider의 또 다른 옵션값
minSlides:3, // 슬라이드 최소 값
maxSlides:3, // 슬라이드 최대 값
moveSlides:3, // 전환시 이동될 슬라이드 값 = minSlides = maxSlides
slideWidth:"330px" // 전체 width 값 기준으로 계산하여 지정. 전체 값보다 합한 값이 클 경우 틀이 깨지지않고 배치가 유지된다.
});
})
* css 수정이 필요할 경우엔 bxslider에서 제공하는 css 파일은 건드리지 말고
내가 작업중인 css 파일에 해당 class 혹은 id 값을 불러와 수정.
혹은 따로 class를 추가하여 수정하거나 우선 순위로 css 적용이 안 될 경우 !important 로 작업해준다.
(bxslider 에서 제공하는 css 파일에서 필요한 것만 불러다 작업해도 된다.)
bxslider 옵션추가&콜백함수 참고
m.blog.naver.com/coding-/221393131940
제이쿼리 bx슬라이더[bxSlider] 플러그인 (옵션추가/콜백함수)
이미지 슬라이드를 매우 쉽게 만들어주는 제이쿼리 플러그인, bxSlider 사용법이에요 먼저 html페이지에 b...
blog.naver.com
'J-Query·Plug-in' 카테고리의 다른 글
| 페이지 스크롤 다운 애니메이션 (0) | 2021.03.10 |
|---|---|
| 제이쿼리 플러그인 슬라이드 효과 3. owl.carousel.js (0) | 2021.03.10 |
| 움직이는 배경을 넣고 싶을 때 사용하는 particles.js (0) | 2021.01.25 |
| 제이쿼리 플러그인 슬라이드 효과 2. Swiper (0) | 2021.01.12 |
| 제이쿼리 플러그인 풀스크린 스크롤 효과 fullPage (0) | 2021.01.11 |
Comments