bxslider 스킨...질문좀요..

참고: https://sir.kr/g5_skin/16847?sfl=mb_id%2C1&stx=kimchulyong100

bxslider는 images,js등이 들어있는 bxslider폴더를 그누보드 root(adm 폴더와 동일한 레벨)에 업로드한후에

슬라이더를 적용하고자 하는곳에서(index.php,outlogin, skin/basic/list.skin.php등) 아래코드처럼 bxslider를 불러오기하면 적용이 됩니다.

따라서 이미지를 바꾸거나 할때에 관리자모드에서 이미지를 변경하는것이 아니라 bxslider폴더내의 img폴더안의 이미지를 변경한후에 불러오는 이미지를 변경합니다.

  # 어디서나 넣을수 있는  bx_slider 슬라이드 적용방법(pc,mobile 동일)

1.root(adm폴더가 있는 레벨)에 jquery_bxslider폴더를 업로드합니다. basic스킨이 아닌 
 테마(theme/basic, theme/private_school)를 사용하는경우에도 root에 올리고
 해당파일에서 include합니다. 즉 jquery_bxslider을 root에 올리고 index.php, theme/basic/index.php,
 theme/private_school/head.php, list.skin.php, 등 어디라도 적용할 수 있습니다. 
 include경로만 주의하시면됩니다.

 * 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/01.jpg"</li>
  <li><img src="jquery_bxslider/images/02.jpg" /></li>
  <li><img src="jquery_bxslider/images/03.jpg" /></li>
  <li><img src="jquery_bxslider/images/04.jpg" /></li>
</ul>

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

* 외부로그인아래적용시 경로(head.php의 <div id="aside">내에 적용)
 css확인해보면 #aside width가 210px이기때문에 image크기를 210px로 하면 됩니다.
 
 <!-- 콘텐츠 시작 { -->
<div id="wrapper">
    <div id="aside">
        <?php echo outlogin('basic'); // 외부 로그인, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정 ?>
        <?php echo poll('basic'); // 설문조사, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정 ?>
                
<!--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="bxslider1">
    <li><a href="http://www.snu.ac.kr/index.html"><img src="jquery_bxslider/images/university/snu.png"></a></li>
    <li><a href="https://www.stanford.edu/"><img src="jquery_bxslider/images/university/stanford.png"></a></li>
    <li><a href="http://www.u-tokyo.ac.jp/index_j.html"><img src="jquery_bxslider/images/university/tokyo.png"></a></li>

</ul>

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

</div>
 

 * 테마적용시 경로(예:theme/private_school/index.php 또는 head.php)

   <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/view/1.png"></li>
  <li><img src="../../jquery_bxslider/images/view/2.png" /></li>
  <li><img src="../../jquery_bxslider/images/view/3.png" /></li>
  <li><img src="../../jquery_bxslider/images/view/4.png" /></li>

 * 게시판에 슬라이더 적용시(예: theme/private_school/skin/board/folio_webzine_kim)
 
 <!--bxslider start -->
<!-- root에 있는 bx_slider폴더 내의 파일을 인클루드합니다. 이코드를 view.skin.php 또는 write.skin.php의 어느 위치에 넣어도 작동합니다. 경로는 skin/basic/skin/board/folio_webzine_kim/list.skin.php 에서 rooot/bx_slider을 인클루드합니다.-->
<!-- 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/1000_200/picto.png"></li>
  <li><img src="../../../../../jquery_bxslider/images/1000_200/hillside.jpg"></li>
  <li><img src="../../../../../jquery_bxslider/images/1000_200/houses.jpg"></li>
</ul>

<script> $(document).ready(function(){
  $('.bxslider').bxSlider({
    //mode: 'vertical', : 이것은 상하로 슬라이드 됩니다.
    slideMargin: 5
  });
    });
</script>
<!--bxslider end -->

* 한화면에서 두개의 슬라이드를 적용하는경우(index.php의 최신글위, head.php의 외부로그인 아래)에
 각각 움직임을 다르게 하려면 (하나는 자동슬라이드, 하나는 수동슬라이드) <ul class="bxslider">의 이름을
 다르게 하면 됩니다.

 -슬라이드1: 수동 상하
<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>

-슬라이드2: 자동 좌우
<ul class="bxslider1">
    <li><a href="http://www.snu.ac.kr/index.html"><img src="../../jquery_bxslider/images/university/snu.png"></a></li>
    <li><a href="https://www.stanford.edu/"><img src="../../jquery_bxslider/images/university/stanford.png"></a></li>
    <li><a href="http://www.u-tokyo.ac.jp/index_j.html"><img src="../../jquery_bxslider/images/university/tokyo.png"></a></li>

</ul>

<script> $(document).ready(function(){
  $('.bxslider1').bxSlider({
  auto: true,
  autoControls: true,
    slideMargin: 5
  });
    });
</script>

2. 슬라이딩 옵션

* 상하슬라이드
<script> 
 $(document).ready(function(){
 $('.bxslider').bxSlider({
  mode: 'vertical',
  slideMargin: 5
});
});
</script>

* 타이틀넣기
$('.bxslider').bxSlider({
  mode: 'fade',
  captions: true
});

* 자동슬라이드: false로 설정하면 자동슬라이드가 안됨
$('.bxslider').bxSlider({
  auto: true,
  autoControls: true
});

* 무한반복금지: 슬라이드갯수만큼 슬라이드되면 더이상 슬라이드안됨
$('.bxslider').bxSlider({
  infiniteLoop: false,
  hideControlOnEnd: true
});

* 높이자동조절 슬라이드
$('.bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'fade'
});