owl.carousel 플러그인을 이용한 슬라이더 스킨
shadow
182.♡.102.157
2015-09-02 14:39
13,808
27
3
배포파일 : owl.carousel.zip (20.8K)
다운로드횟수 : 38|최종수정일 : 2015-09-02 14:39:22
배포파일 : custom_image_slider.zip (1.5K)
후원포인트 : 3,000포인트|다운로드횟수 : 13|최종수정일 : 2015-09-02 21:00:29
본문
owl.carousel 플러그인을 이용한 최신글 슬라이더 스킨
- 본 스킨은 owl.carousel 플러그인을 이용하여 모바일과 피시에서 스와이프(swipe)가 지원됩니다.
- 스킨 기본 설정은 위 샘플 gif 에서 보이는 것처럼 피시에선 4개의 이미지를 모바일에선 2개의 이미지를 한 화면에 표시합니다.
- 새로운 게시물일 경우 오른쪽 상단에 NEW 클래스를 적용하여 새로 올라온 글임을 나타냅니다.
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_image_slider.zip 을 다운받아 압축을 풀어 그누보드5/eyoom/theme/설치된 테마/skin_bs/latest 에 붙혀 넣습니다.
5. 사용할 페이지에 다음 소스를 활용합니다..
{latest->latest_eyoom('custom_image_slider','title=게시판 제목||bo_table=추출 게시판명||count=뽑을 갯수||cut_subject=20||img_view=y||bo_direct=n||img_width=600')}
3
로그인 후 추천 또는 비추천하실 수 있습니다.
댓글목록27
joosam님의 댓글
축하합니다. 첫댓글 포인트 71포인트를 획득하였습니다.
joosam님의 댓글
shadow님의 댓글의 댓글
축하합니다. 행운의 포인트 86포인트를 획득하였습니다.
joosam님의 댓글의 댓글
이미지를 4개 이상으로 하려면 이미지 사이즈를 줄여야 하나요? 상하로 길게 만들고 싶은데요.
joosam님의 댓글
shadow님의 댓글의 댓글
먼저 last.skin.html을 열어 하단부에 보시면 다음과 같은 소스가 있습니다.
items는 기본적으로 몇개를 보여줄 것 인가?
itemsDesktop은 847 해상도 크기보다 클 경우 몇개를 보여줄 것 인가?
itemsMobile은 479 해상도보다 작을 경우는 몇개를 보여줄 것 인가?
style.css를 열어 다음 소스를 보시면 .custom-image-slider .item 에서 min-height 의 값과 max-height 의 값을 조정하시면 됩니다.
joosam님의 댓글
shadow님의 댓글의 댓글
joosam님의 댓글
shadow님의 댓글의 댓글
샘플을 보시고 적용하시면 될 듯 하네요.
정해진 이미지를 입력하는 것이니
위 소스는 삭제하시고요.
joosam님의 댓글
왕초보 연구중입니다...custom_image_slider 폴더내에 img 폴더를 만들었고 이미지를 넣었는데... 이미지 링크를 어떻게 걸어야 할지....
shadow님의 댓글의 댓글
joosam님의 댓글
shadow님의 댓글의 댓글
추출 소스는 버리시고 다음을 참조해서 나타낼 위치에 넣어보세요.
html소스 하단분에 아래 소스를
그리고 모양을 잡기 위해 그누보드5/eyoom/theme/설치된 테마/css/custom.css를 열어 다음을 첨부하세요.
테스트해보지 않았습니다. 참고하세요.
축하합니다. 행운의 포인트 86포인트를 획득하였습니다.
joosam님의 댓글
$(document).ready(function() {
$("#owl-banner").owlCarousel({
autoPlay : 6000,
items : [4],
itemsDesktop : [847,4],
itemsMobile : [479,2],
slideSpeed: 300,
});
}); 이 소스는 latest.skin.html에 적용 하는것 맞는지요? 저는 latest.skin.html 하eks 스크립터에 첨부했는데 적용 잘된듯 싶습니다만..
shadow님의 댓글의 댓글
저장 위치가 헷갈리신다면 그누보드5 폴더에 별도의 폴더(예제:example)명을 만드시고 아래와 같이 하면 되지 않을까 합니다.
그누보드5 폴더가 루트였을때.
joosam님의 댓글
$(document).ready(function() {
$("#owl-banner").owlCarousel({
autoPlay : 6000,
items : [4],
itemsDesktop : [847,4],
itemsMobile : [479,2],
slideSpeed: 300,
});
}); 소스는 아무곳에다 넣어도 된다는 애기신지... latest.skin.html 하단 적용 후 일단 적용 하는데는 무리가 없는데요... 제가 잘못 적용 한건 아닌지 몰라서요 ^^:
저의 경우 인덱스 하단에
<div class="item"><a href="http://blog.naver.com/jaeyeol9093j" target="_blank"><img src="../image/tile_banner_1.jpg" alt="Banner_01"></a></div>
적용을 해보았는데.. 이미지 설명이 안 나타나네요...
shadow님의 댓글의 댓글
다시 설명을 드릴께요.
금일 질문 주신 댓글 아래쪽에 제가 적어드린 소스들은 list.skin.html과 아무런 관련이 없습니다.
스킨을 이용하는게 아닌 직접 첨부하는 방식입니다.
index_bs.html이나 page폴더의 특정.html이나 이런 소스내에 첨부하세요.
단 아래 소스는 그누보드5/eyoom/theme/설치된 테마/css/custom.css 내에 첨부하세요
꼼꼼히 금일에 적힌 제 댓글들을 확인해주시면 충분히 이해가 가실꺼에요.
shadow님의 댓글의 댓글
alt= 이 제대로 동작치 않으시면 title= 으로 수정해보세요.
joosam님의 댓글
shadow님의 댓글의 댓글
프로그래밍이 아닌 이용하는거니까 한번쯤 직접 수정해보시면 홈 구축에 꽤 도움이 되실꺼에요
joosam님의 댓글의 댓글
회색늑대님의 댓글
주주봉봉님의 댓글
빨강모자님의 댓글
열심히 학습해 봅니다. 감사합니다.
오피님의 댓글
오늘도좋은날님의 댓글