슬라이더로 많이 이용하고, 쉽게 적용할 수 있는 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에 넣는 경우

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

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

감사합니다.