[이윰] owl.carousel 플러그인을 이용한 최신글 뉴스 스티커

페이지 정보

루루아빠 3,386 2015.09.04 06:09

첨부파일

평점

  • 평점 : 0점 (0명 참여)

본문

owl.carousel 플러그인을 이용한 최신글 뉴스 스티커
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">
의 "값"의 수치를 조정해서 사용자 환경에 맞게 수정하세요.

추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,294,500
레벨 97
경험치 1,397,845

Progress Bar 4%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요

자료실 게시판에서 다양한 자료를 공유하실 수 있습니다. 공유 자료는 형식에 구애를 받지 않습니다.

  • 포인트 배포가 가능합니다. 포인트를 걸고 자료를 업로드 하시면 다운로드 발생 시 배포한 회원님께 100%의 포인트가 적립됩니다.
  • 적립된 포인트는 향후 사용가능하도록 하겠습니다.
  • 저작권이 있는 자료는 무단으로 배포하실 수 없으니 주의하여 주시길 바랍니다.
배포되는 자료는 일일이 필터링 할 수 없으며 문제발생 시 책임을 지지 않습니다.
회원님들간의 자발적인 정화와 참여를 부탁드립니다.
Total 5782929 페이지
제목 글쓴이 날짜 조회 추천
유틸리티  🏆 📸 Rufus 3.9 shadow2fox 2020.03.08 3,998 0
유틸리티  🏆 📸 💾 유튜브_다운 > MassTube Free 12.9.3.314 (Windows 10 Ready) 루루아빠 2015.08.13 4,056 0
프로그램  🏆 📸 AnyDesk - 원격 제어 프로그램 루루아빠 2016.06.02 4,147 0
유틸리티  🏆 📸 SpaceSniffer v1.3.0.2 - 디스크 공간 분석기 shadow2fox 2017.02.13 4,222 0
유틸리티  🏆 📸 💾 Windows Update MiniTool v09.10.2015 by stupid user 루루아빠 2015.10.10 4,255 0
유틸리티  🏆 📸 반디집 v5.17 shadow2fox 2016.12.24 4,373 0
프로그램  🏆 VMware Workstation 12 Pro 루루아빠 2015.08.26 4,502 0
기타  댓글+1🏆 🎞️ 1박2일에서 소개된 오목 프로그램 알파오 shadow2fox 2016.03.29 4,789 1
기타  🏆 🎞️ 💾 2015년 11월 트래커[Torrent] 모음 루루아빠 2015.11.19 4,943 0
드라이버  🏆 Realtek High Definition Audio Driver R2.82 shadow2fox 2017.07.27 5,052 1
기타  🏆 📸 💾 2015년 12월 트래커[Torrent] 모음 루루아빠 2015.12.28 5,087 0
유틸리티  🏆 📸 HFS ~ Http File Server 2.3g (간단한 웹서버 프로그램) 루루아빠 2015.10.18 5,369 0
기타  🏆 📸 💾 2016년 2월 트래커[Torrent] 모음 루루아빠 2016.02.27 5,448 2
유틸리티  🏆 📸 💾 임시 폴더 변경 (윈도우10, 심볼릭링크 지원) Version 1.10 루루아빠 2015.08.20 5,471 2
유틸리티  댓글+1🏆 📸 💾 커서에 한영 상태 표시 프로그램 (IMECursor v0.71) 루루아빠 2015.10.29 6,026 1
유틸리티  🏆 📸 DesktopOK 4.89 - 바탕화면 아이콘 위치 저장 복원 shadow2fox 2017.12.03 6,139 2
기타  🏆 📸 💾 2015년 8월 - 트래커[Torrent] 모음 루루아빠 2015.08.19 6,359 0
프로그램  🏆 📸 Free remote desktop - NoMachine 5.1.44.1 루루아빠 2016.08.07 8,407 0