bxSlider란?
bxSlider는 한 화면에서 내용이 바뀌는 슬라이드로 이미지뿐만 아니라 일반 컨텐츠에도 적용할 수 있으며 사용법도 간편하고 반응형도 지원하고 있으며 무료로 사용을 할 수 있기 때문에 아직까지도 홈페이지 제작에 많이 사용되고 있는 jQuery 플러그인입니다. 다양한 옵션을 지원하고 jQuery로 만들어져 직접 기능을 확장할 수 있어 전문가뿐만 아니라 초보자 분들도 쉽게 사용할 수 있다는 장점이 있습니다.
지난 번 포스팅에서는 bxSider의 반응형 방법만 말씀드렸기 때문에 오늘 포스팅에서는 bxSlider의 사용법과 자주 사용하는 옵션에 대해서 말씀드리려고 합니다.
bxSlider의 기본 사용법
bxSlider를 사용하기 위해서는 사용하려는 프로젝트에 플러그인을 추가를 해줘야하는데요, 프로젝트 성격에 따라서 cdn이나 파일을 다운로드하여 프로젝트에 직접 추가를 해줄 수 있습니다. 아래에 있는 링크로 들어가시면 설치파일을 다운받을 수 있습니다.
jQuery Slider | Responsive jQuery Slider | bxSlider
Initialize the bxSlider plugin This code tells the webpage to start the slider setup. Without this code the slider plugin would not be visible on the page.
bxslider.com
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bxslider@4.2.17/dist/jquery.bxslider.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bxslider@4.2.17/dist/jquery.bxslider.min.js"></script>
</head>
</html>$(".bx-slider").bxSlider()이렇게 다운받은 파일을 프로젝트안에 넣어주시면 바로 bxSlider를 사용할 수 있습니다. 슬라이더의 생성은 별개의 js 파일에서도 생성이 가능합니다.
jquery.bxslider.min.css 파일이 있어서 bxSlider를 적용하게 되면 위의 이미지와 같이 기본 스타일일 적용되기 때문에 pager나 controls의 모양을 따로 커스텀 하실 경우에는 css파일은 포함을 안하셔도 됩니다. 위에서도 말씀드렸다시피 jQuery 플러그인이기 때문에 jQuery는 꼭 있어야 합니다.
bxSlider에서 자주 사용하는 옵션
$(".bx-slider").bxSlider({
auto: true,
mode: "horizontal",
speed: 700,
infiniteLoop: true,
pager: true,
controls: true,
pause: 4000,
});
아주 기본 상태인 슬라이드에서 자주 사용하는 옵션을 정리를 해봤는데요,
- auto : 슬라이드를 자동으로 실행시킬지 여부입니다.
- mode : 슬라이드 방식으로 'horizontal(가로)', 'vertical(세로)', 'fade(사라졌다가 다시 나타나는 효과)' 가 있습니다.
- speed : 슬라이드가 이동하는 속도로 ms 기준입니다.
- infiniteLoop : 슬라이드를 무한으로 작동시킬지 여부로 true(켜기), false(끄기) 입니다.
- pager : 슬라이드 아래에 페이저를 표시할지 여부입니다.
- controls : 이전, 다음 슬라이드로 이동하는 버튼을 표시할지 여부입니다.
- pause : 슬라이드 전환 후 슬라이드를 보여주는 시간입니다. ms 기준으로 숫자가 크면 클수록 한 슬라이드에 오래 머물러 있습니다.
이 외에도 캐러샐 방식의 슬라이드의 경우 한 화면에 슬라이드를 몇 개를 보여줄지(minSlides, maxSlides), 캐러샐의 크기(slideWidth), 슬라이드를 한 번에 몇 개씩 이동을 할 것인지(moveSlides), 캐러샐 간의 간격(slideMargin) 등을 조절할 수 있는 옵션부터 슬라이드를 처음 로드하였을 때(onSliderLoad), 슬라이드 이동 직전(onSlideBefore), 슬라이드 이동 직후(onSlideAfter) callback function도 있어 슬라이드를 보다 개성적으로 만들 수 있습니다.
var slider = $(".bx-slider").bxSlider()
$(".prev-btn").on("click", function() {
slider.goToPrevSlider();
}
$(".next-btn").on("click", function() {
slider.goToNextSlider();
}또한 슬라이드를 변수에 넣어 public method를 사용하여 슬라이드를 조절할 수 있으니 아래의 링크를 통해 다양한 옵션을 확인해보시고 많은 연습을 해보시길 바라겠습니다.
jQuery Slider | Responsive jQuery Slider | bxSlider
Would you mind answering a few questions? We value your experience and would love to hear your thoughts. Could you spare just two minutes to fill out a quick survey? Your feedback helps us make bxSlider even better! Thank you for your support 🤗 No thank
bxslider.com
'jQuery' 카테고리의 다른 글
| 마우스 휠로 bxslider를 조정하는 방법에 대하여 (0) | 2024.07.10 |
|---|---|
| bxslider 반응형 적용하는 방법 (0) | 2024.06.12 |
