반응형
퍼블리싱을 하다 보면 이미지 슬라이드 플러그인을 가장 많이 사용한다고 생각합니다.
그중에 무료이고, 사용법이 간편하여 자주 사용하는 것이 bxslider입니다.
jQuery Content Slider | Responsive jQuery Slider | bxSlider
Coded with ♥ by
bxslider.com
다운로드 방법
install을 클릭하여 이동한 페이지에서 내리다 보면 manual이 있습니다.
노란색 표시한 부분을 클릭하면 파일을 다운로드할 수 있습니다 :)
사용 방법
1.js, css 파일 인클루드
<head>
<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
</head>제이쿼리 파일과 (필수입니다.)
다운로드한 경로에 맞게 css와 js파일을 인클루드 해줍니다.
2.HTML 생성
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
html을 생성해줍니다. ul, div 둘 다 사용이 가능합니다 :)
3.bxSlider 호출 및 옵션
$(document).ready(function(){
$('.bxslider').bxSlider( {
mode: 'horizontal',// 가로 방향 수평 슬라이드
speed: 500, // 이동 속도를 설정
pager: false, // 현재 위치 페이징 표시 여부 설정
moveSlides: 1, // 슬라이드 이동시 개수
slideWidth: 100, // 슬라이드 너비
minSlides: 4, // 최소 노출 개수
maxSlides: 4, // 최대 노출 개수
slideMargin: 5, // 슬라이드간의 간격
auto: true, // 자동 실행 여부
autoHover: true, // 마우스 호버시 정지 여부
controls: false // 이전 다음 버튼 노출 여부
});
});bxslider를 호출해주면 이미지 슬라이더를 간편하게 구현할 수 있습니다.
더 많은 옵션은 bxslider 홈페이지에서 확인하실 수 있습니다. (https://bxslider.com/options/)
반응형
'Web > 플러그인' 카테고리의 다른 글
| chart.js를 사용해 막대 그래프 그리는 법 (예제 多) (0) | 2021.04.13 |
|---|---|
| swiper 슬라이드 IE 작동 안할 때, 해결하는 방법 (0) | 2021.04.13 |
| [parallax.js] 패럴렉스 스크롤링(parallax scroll) 사용법/옵션, 예제 파일 (0) | 2021.04.01 |
| [차트플러그인]chart.js 시작하기 사용법, 옵션 (0) | 2020.11.17 |
| [jQuery Plugin] isotope.js 필터와 이미지정렬 플러그인 사용 방법 (0) | 2019.09.25 |