홈페이지에 많이 사용되는 이미지 슬라이더 입니다.
bxslider 플러그인을 사용하여 만들었습니다.
샘플 파일 올려두었으니 다운받으셔서 참고하세요.^^
*이미지 크기변경, 주석 적어놨습니다.
bxslider_example.zip슬라이더에 필요한 옵션은 해당 URL에서 참고하세요
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <script> $(document).ready(function(){ var main = $('.bxslider').bxSlider({ mode: 'fade', auto: true, //자동으로 슬라이드 controls : true, //좌우 화살표 autoControls: true, //stop,play pager:true, //페이징 pause: 3000, autoDelay: 0, slideWidth: 800, //이미지 박스 크기설정 speed: 500, stopAutoOnclick:true }); $(".bx-stop").click(function(){ // 중지버튼 눌렀을때 main.stopAuto(); $(".bx-stop").hide(); $(".bx-start").show(); return false; }); $(".bx-start").click(function(){ //시작버튼 눌렀을때 main.startAuto(); $(".bx-start").hide(); $(".bx-stop").show(); return false; }); $(".bx-start").hide(); //onload시 시작버튼 숨김. }); </script> </head> <body> <div class="home__slider"> <div class="bxslider"> <div><img src="이미지경로~~" alt="그림1"></div> <div><img src="이미지경로~~" alt="그림2"></div> </div> </div> </body> </html>
---추가 update..
티스토리 앱으로 블로그를 보았는데 슬라이더가 작동하지 않아 한참 뻘짓한 결과 원인을 찾았습니다.
티스토리 내에서 사용하는 jquery 버전과 제가 사용한 jquery 버전이 충돌이났습니다..
$ <-- 요놈을 인식못했음..
$.noConflict()를 사용해서 충돌을 방지했습니다.
변경한 소스.
참고: https://api.jquery.com/jquery.noconflict/
<script>
var j = $.noConflict(true); // $.noConflict(true) 를 사용해서 $ -> 변수로 선언한 j로 바꾸니 해결!
j(document).ready(function(){
var main = j('.bxslider').bxSlider({
mode: 'fade',
auto: true, //자동으로 슬라이드
controls : true, //좌우 화살표
autoControls: true, //stop,play
pager:true, //페이징
pause: 3000,
autoDelay: 0,
slideWidth: 800,
speed: 300,
stopAutoOnclick:true
});
j(".bx-stop").click(function(){ // 중지버튼 눌렀을때
main.stopAuto();
j(".bx-stop").hide();
j(".bx-start").show();
return false;
});
j(".bx-start").click(function(){ //시작버튼 눌렀을때
main.startAuto();
j(".bx-start").hide();
j(".bx-stop").show();
return false;
});
j(".bx-start").hide(); //onload시 시작버튼 숨김.
});
</script>
즐프하시구 공감눌러주세요~~
'jQuery' 카테고리의 다른 글
| jquery - 클립보드 복사하기 (0) | 2018.07.25 |
|---|---|
| jquery HTML DOM 객체 존재 여부 체크 (0) | 2018.06.23 |
| jquery 차트 그래프 플러그인 사이트 (0) | 2018.04.17 |
| jquery id, name, class 접근 (0) | 2018.04.03 |
| jquery 숫자(금액) 콤마 찍기 및 제거 (2) | 2018.03.30 |