크롬80버전 결제 이슈, 영카트5 주요패치 확인!

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

컨텐츠몰 10% 할인 기간연장!
그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

그누보드5 스킨

스킨 다운로드시 좋아요 클릭과 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

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

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

첨부파일

첨부파일 bx_sliders.zip (6.0M) 187회 다운로드 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> 식으로 불러옵니다
전체 6 |RSS
그누보드5 스킨 내용 검색 전체검색에서

회원로그인

진행중 포인트경매

  1. 참여18 회 시작20.04.04 09:21 종료20.04.11 09:21

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT