어디에나 쉽게 넣을 수 있는 슬라이더(bxslider) > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

어디에나 쉽게 넣을 수 있는 슬라이더(bxslider) 정보

전체검색 어디에나 쉽게 넣을 수 있는 슬라이더(bxslider)

첨부파일

bx_sliders.zip (6.0M) 245회 다운로드 2017-10-31 03:32:08 포인트 차감10

본문

슬라이더로 많이 이용하고, 쉽게 적용할 수 있는 bxslider를 이용해서 슬라이더를 넣는 방법입니다.

index.php / head.php / theme/basic/index.php / 게시판(list.skin.php/view.skin.php/write.skin.php)등 어디에도 쉽게 넣을 수 있습니다.

이전에 비슷한 내용을 올렸었는데 theme에서는 제대로 작동하지 않아서 테스트해보고 다시 올린것 입니다.

압축을 풀면 나오는 jquery_bxslider폴더를 root에 올립니다.(adm과 같은 레벨)

 

아래 코드를  슬라이더를 넣고자 하는 위치에 붙여넣기 합니다. 경로는 root/jquery_bxslider폴더 에서 가져오는 것으로 정하시면 됩니다.(예: theme/private_school/index.php 의 경로)

<!--bxslider start -->
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="../../jquery_bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="../../jquery_bxslider/jquery.bxslider.css" rel="stylesheet" />

<ul class="bxslider">
  <li><img src="../../jquery_bxslider/images/hakmundang/1.png"></li>
  <li><img src="../../jquery_bxslider/images/hakmundang/2.png" /></li>
  <li><img src="../../jquery_bxslider/images/hakmundang/3.png" /></li>
  <li><img src="../../jquery_bxslider/images/hakmundang/4.png" /></li>
</ul>

<script> $(document).ready(function(){
  $('.bxslider').bxSlider({
    mode: 'vertical',
    slideMargin: 5
  });
    });
</script>
<!--bxslider end -->
 

* 테마를 사용하시는 경우에도  root에 올리고 링크해야합니다. jquery_bxslider폴더를 테마폴더안에 넣고 적용해보니 그림이 주루룩나오고 적용이 안되는 것을 확인했습니다.

 

* 한 화면에 두개이상의 슬라이드를 사용하는경우에 움직임을 다르게 (하나는 수동, 하나는 자동) 할 경우에는 <ul class="bxslider">의 .bxslider이름을 서로 다르게 하면됩니다.

 

*  image대신에 동영상을 넣는 경우는 <il>안에 <video>를 사용하여 넣으면 됩니다.

<li>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</li>

- 동영상확장자(mp4를 많이사용해서 .ogg를 생략해도 재생이 됩니다)

.ogg: Developed by the Xiph.Org Foundation. Supported by HTML5.

.mp4: Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube.

 

* image대신에 youtube영상을 넣는 경우: <li>안에 <iframe>을 사용하여 넣으면 됩니다. 유튜브화면에서 마우스우클릭- 소스코드복사하면 유튜브소스가 <iframe>으로 복사됩니다. 이것을 <li>안에 붙여넣기 하면됩니다. 크기나 배치등은 <style>로 조정하면 됩니다.

<li>

<li><iframe style="width: 500px; height: 300px; ; margin-left:100px;" src="https://www.youtube.com/embed/ve0EKXjlIO0" frameborder="0" gesture="media" allowfullscreen></iframe>

</li>

 

* theme/private_school/index.php에 넣는 경우

 

* 게시판에 슬라이드 넣는 경우( 

* 자세한 사용법은 첨부한 메모장을 참고하시기 바랍니다.

감사합니다.

 

추천
12

댓글 전체

정말 잘되네요^^ 감사합니다
혹시 반응형일때 브라우져창크기를 줄이면 이미지 화살표버튼 위치가 아래로 내려가고 메인슬라이드이미지는 안보였다가 새로고침 또는 이미지 오토로딩으로 될때 다시 사이즈가 정상적으로 보이는데 저만 그런건가요?
basic/skin/index.php, theme/basic/skin/index.php, board/list.skin.php 그리고 mobile/theme에서 테스트했습니다.폰과 pc에서 작동되는것만 확인했습니다.오류가 왜 생기는지 다시 봐야겠네요
감사합니다.
다운받으면 나오는 jquery_bxslider폴더 안에 images폴더안에 이미지를 넣고 불러옵니다. 예를들어 suzy.png를 슬라이드에 사용하려면  suzy.png을 images폴더에 넣습니다
그리고 <li><img src="jquery_bxslider/images/suzy.png"></li> 식으로 불러옵니다
이왕하는거 자동으로 15초 타임이에요.
<script> $(document).ready(function(){
  $('.bxslider').bxSlider({
            auto: true,
autoControls: true,
            pause: 15000,
  });
});
</script>
전체 6 |RSS
그누보드5 스킨 내용 검색 전체검색에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT