정보실

웹학교

정보실

그누보드 그누보드5에도 기본 포함된 bxslider

본문

슬라이더를 구현하기 위해 사용되는 여러가지 라이브러리중 그누보드5에 포함된 것...

배포판

/js/jquery.bxslider.js 로 포함되어 있고,

기본테마의 오른쪽 공지사항 최신글에 사용이 되었네요.

 

https://bxslider.com/

 

위 사이트에 가면 기본 예제 및 사용할 수 있는 옵션에 대한 설명이 있습니다.

https://bxslider.com/examples/

https://bxslider.com/options/

 

원페이지테마

https://live24.co.kr/demo/ok2one/

의 협력업체 구현에 사용되었습니다.

 

여기서 한 번에 보여줄 이미지의 갯수는

$('.bxslider').bxSlider({
  minSlides: 2,
  maxSlides: 5,
  slideWidth: 200,
  slideMargin: 20
});

이런 형태로 지정해 줄 수 있습니다.

 

자동 시작 및 제어버튼은

$('.bxslider').bxSlider({
  auto: true,
  autoControls: true
});

 

그누보드5 최신버전을 설치하고 슬라이더를 구현하고 싶으면 원하는 곳에

<ul class="bxslider">
  <li><img src="/img/img1.jpg" /></li>
  <li><img src="/img/img2.jpg" /></li>
  <li><img src="/img/img3.jpg" /></li>

  <li><img src="/img/img4.jpg" /></li>
  <li><img src="/img/img5.jpg" /></li>
  <li><img src="/img/img6.jpg" /></li>
</ul>

형태로 이미지를 추가하고 위 자바스크립트를 활용하여 하단에 반영하면 슬라이더를 구현할 수 있습니다.

 

기존 배포판의 

/theme/basic/skin/latest/notice/latest.skin.php 파일을 열고 분석해 보세요.

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 143회 ]  작성일18-04-19 09:43

웹학교