안녕하세요 Bxslider 소개해드립니다.
홈페이지에서 슬라이드 넘기는 동작을 사용할 때가 많은데요, 그때 Bxslider 사용해서 쉽게
슬라이드를 만들수 있습니다.
사용방법은 간단 cdn 주소 불러와서, 슬라이드 사용할 곳들을
셋팅해서 jquery를 입혀 주기만 하면 Bxslider를 사용할 수 있습니다.
1. jquery라이브러리, bxslider jquery cdn 적용
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>1번째 - jquery 라이브러리
2번째 - bxslider 구성하는 css스타일
3번째 - bxslider 작동하게 하는 js파일
<head>사이에 적용해줍니다.
2.html 구성
<div class="slider_wrap">
<ul class="my_bxslider">
<li><img src="image/1.jpg" /></li>
<li><img src="image/2.jpg" /></li>
<li><img src="image/3.jpg" /></li>
</ul>
</div>css
.slider_wrap{width:100%;max-width:600px;margin:0 auto;}
.my_bxslider img{width:100%;}
ul li 태그로 만들어도 좋고, div로 묶어서 사용하셔도 무방합니다.
편하신대로 코드구성을 해주시고 저는 my_bxslider 클래스를 주었습니다.
3. script 구성
<script type="text/javascript">
$(document).ready(function(){
$('.my_bxslider').bxSlider();
});
</script>기본 구조입니다. </body> 바로 위쪽에 넣어줍니다.
4.결과
결과인데 슬라이드만 사용하고 싶으신 분들은
양옆 화살표, 밑에 점들을 뺄수 있게 스크립트를 구성할 수 도 있습니다.
<script type="text/javascript">
$(document).ready(function(){
$('.my_bxslider').bxSlider({
auto: true, // 자동 슬라이드
controls: false, // 양옆 화살표 노출 여부
pager: false, // 슬라이드 밑 버튼 노출 여부
});
});
</script>많이 사용하는 bxslider 옵션
mode: 'horizontal' // (horizontal, vertical, fade) 슬라이드 방향
auto: false // (false, true) 자동 슬라이드
autoHover: false // (false, true) 마우스 hover시 정지
controls: false // (false, true) 양옆 화살쵸
speed: 1000 // 슬라이드 속도
randomStart: false // (false, true) 랜덤 스타트
infiniteLoop: true // (false, true) 무한루프 (마지막에서 첫번째로 슬라이드 됨)
pager: true // (false, true) 불릿버튼
minSlides: 1 // 최소 슬라이드 개수
maxSlides: 5 // 최대 슬라이드 개수
autoControls: false // (false, true) 시작, 정지버튼 노출 여부
'Jquery, Javascript' 카테고리의 다른 글
| [Jquery] 제이쿼리로 css 적용하기 (0) | 2022.11.08 |
|---|---|
| [Jquery] 클릭시 페이지 맨 위로 이동 하기 (0) | 2022.10.24 |
| [Jquery] datepicker 사용 제이쿼리로 달력 입력 방법 (1) | 2022.09.01 |
| [Jquery] 이미지 떨림효과 주기 (2) | 2022.08.25 |
| [Jquery] 스크롤 내렸을때 상단 메뉴 변경 (2) | 2022.08.11 |
댓글