[bxSlider]_bxSlider 설치, 단순 예제
2022. 6. 30. 18:49ㆍ[Plug_in]_
728x90
반응형
bxSlider 란 오픈소스 플러그인으로
프론트에서 슬라이드를 구현할 때 사용 가능합니다.
<설치>
jQuery Content 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
공식 사이트에서 다음 링크로 zip 다운로드
<JSP>
JQuery 를 먼저 참조 한 뒤
다운로드한 zip 파일을 프로젝트의 resource 경로에 두고 script 경로로 참조합니다.
<script>
$('.slider').bxSlider();
와 같은 방법으로 원하는 element class,id 등을 jquery 선택자로 잡고 bx.Slider()을 선언해 줍니다.
<html>
<div class="slider">
<div>I am a slide.</div>
<div>I am another slide.</div>
</div>
간단한 div 예시로 부모의 div에 해당 class 를 지정하게 되면
자식의 div 요소가 슬라이더의 대상이 됩니다.
감사합니다.
728x90
반응형
'[Plug_in]_' 카테고리의 다른 글
| [bxSlider]_Added non-passive event listener to a scroll-blocking ISSUE (0) | 2022.07.15 |
|---|---|
| [select2]_select2 옵션, 설정 ,심화 _(select2 예제) (0) | 2022.07.05 |
| [select2]_select2 설치, 기본 설정 (0) | 2022.07.05 |
| [bootstrap-datepicker]_부트스트랩 데이트 피커 설치,운용 (0) | 2022.07.05 |
| [bxSlider]_슬라이더 index 구하기, 이벤트 부여하기 (0) | 2022.07.01 |