[이윰] owl.carousel 플러그인을 이용한 최신글 뉴스 스티커
페이지 정보
루루아빠
4,873
2015.09.04 06:09:40
짧은주소
-
https://yadolee.com/share/12 주소복사
첨부파일
-
2015-09-04 06:09:40
-
2015-09-04 06:09:40
본문

owl.carousel 플러그인을 이용한 최신글 슬라이더 스킨
- 본 스킨은 owl.carousel 플러그인을 이용하여 모바일과 피시에서 스와이프(swipe)가 지원됩니다.
- last.skin.html의 하단부 스크립트 소스를 수정하여 속도 조절을 할 수 있습니다.
1. 첫번째 자료 owl.carousel.zip을 다운받아 압축을 풀어 그누보드5/eyoom/theme/설치된 테마/plugins 폴더에 붙혀넣습니다.
2. 그누보드5/eyoom/theme/설치된 테마/layout/head_bs.html 을 열어 상단에 아래 소스를 참조하여 추가합니다.
<?php if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
add_stylesheet('<link rel="stylesheet" href="../plugins/owl.carousel/owl-carousel/owl.carousel.css" type="text/css" media="screen">',0);
?>
3. 그누보드5/eyoom/theme/설치된 테마/layout/tail_bs.html 을 열어 <script type="text/javascript" src="../js/jquery-migrate-1.2.1.min.js"></script> 을 검색하여 적당한 위치에 다음 소스를 추가합니다.
<script type="text/javascript" src="../plugins/owl.carousel/owl-carousel/owl.carousel.min.js"></script>
4. custom_text_slider.zip 을 다운받아 압축을 풀어 그누보드5/eyoom/theme/설치된 테마/skin_bs/latest 에 붙혀 넣습니다.
5. 사용할 페이지에 다음 소스를 활용합니다.
<!--{latest->latest_eyoom('custom_text_slider','bo_exclude=제외할 게시판명||count=10||cut_subject=100')}-->
참고적으로 이 최신글 사용시 높이나 간격이 맞질 않아 margin값을 수정하셔야 할 경우가 있을 겁니다.
다음과 같은 방식으로 응용해보세요.
피시에서 보기 응용 : 네비메뉴 상단 빈 공간에 위치 시키고자 할때
<div class="col-sm-8 hidden-sm hidden-xs" style="margin-top: 값px;">
<!--{latest->latest_eyoom('custom_text_slider','bo_exclude=제외할 게시판명||count=10||cut_subject=100')}-->
</div>
모바일에서 보기 응용 : 전체 넓이에 위치시키고자 할때
<div class="col-xs-12" style="margin-top: 0px; margin-bottom: 0px;">
<!--{latest->latest_eyoom('custom_text_slider','bo_exclude=제외할 게시판명||count=10||cut_subject=45')}-->
</div>
더불어 list.skin.html 소스 중
<div class="owl-slider-text" style="bottom:값px;height:값px">
의 "값"의 수치를 조정해서 사용자 환경에 맞게 수정하세요.
추천인
레벨 101
경험치 1,522,254
Progress Bar 23.95%
- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS
BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑
루루아빠랍니다~~
-
Nvidia GeForce 378.49 WHQL2017-02-03
-
SpeedyFox 2.0.19 - 크롬, 파이어폭스, 오페라 등 속도 향상 프로그램2017-02-03
-
Nvidia GeForce 375.86 WHQL2016-11-17
-
VirtualBox 5.1.8 (released 2016-10-18)2016-10-21
-
픽픽(PicPick) 4.2.1 한글판2016-10-01
-
픽픽(PicPick) 4.2.0 한글판2016-08-30
-
Free remote desktop - NoMachine 5.1.44.12016-08-07
-
VirtualBox 5.1.2 (released 2016-07-21)2016-08-06


댓글
첫 번째 댓글을 남겨 주세요