그누보드5에도 기본 포함된 bxslider
본문
슬라이더를 구현하기 위해 사용되는 여러가지 라이브러리중 그누보드5에 포함된 것...
배포판
/js/jquery.bxslider.js 로 포함되어 있고,
기본테마의 오른쪽 공지사항 최신글에 사용이 되었네요.
위 사이트에 가면 기본 예제 및 사용할 수 있는 옵션에 대한 설명이 있습니다.
https://bxslider.com/examples/
원페이지테마
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 파일을 열고 분석해 보세요.
- 이전글무료로 다운로드가 가능한 부트스트랩3 버전 템플릿들.. 18.04.19
- 다음글이미지가 없을 때.. Font Awesome, Ionicons, Glyphicons을 사용하여... 18.04.17