owl.carousel 플러그인을 이용한 슬라이더 스킨 > 시즌3 공유자료실

본문 바로가기

시즌3 공유자료실

owl.carousel 플러그인을 이용한 슬라이더 스킨

배포파일 : 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님의 댓글

profile_image
대단한 자료 공개 고맙습니다~~~~ ^^이모티콘

축하합니다. 첫댓글 포인트 71포인트를 획득하였습니다.

joosam님의 댓글

profile_image
적용 결과 성공~~ shadow님 감사합니다~~~

shadow님의 댓글의 댓글

profile_image
적용된 사이트를 봐야 알 것 같은데요?

축하합니다. 행운의 포인트 86포인트를 획득하였습니다.

joosam님의 댓글의 댓글

profile_image
ㅎㅎㅎ 다 지우고 다시 다운받아서 다시 설치 했습니다~~~ 성급한 질문 죄송합니다... 짱이십니다~~~
이미지를 4개 이상으로 하려면 이미지 사이즈를 줄여야 하나요? 상하로 길게 만들고 싶은데요.

joosam님의 댓글

profile_image
보여지는 갯수가 4개가 아닌 6개 이상으로 보여지는 방법과 상하 이미지 조절 방법을 알고 싶습니다요~~

shadow님의 댓글의 댓글

profile_image
두가지 작업을 하셔야 하는데요

먼저 last.skin.html을 열어 하단부에 보시면 다음과 같은 소스가 있습니다.

	    items : [4],
	    itemsDesktop : [847,4],
	    itemsMobile : [479,2],
items는 기본적으로 몇개를 보여줄 것 인가?
itemsDesktop은 847 해상도 크기보다 클 경우 몇개를 보여줄 것 인가?
itemsMobile은 479 해상도보다 작을 경우는 몇개를 보여줄 것 인가?

style.css를 열어 다음 소스를 보시면 .custom-image-slider .item 에서 min-height 의 값과 max-height 의 값을 조정하시면 됩니다.

joosam님의 댓글

profile_image
shadow님 답변 고맙습니다... 역시 알찬 답변 감동입니다~~ 이모티콘 즐거운 오후 되세요~~~

shadow님의 댓글의 댓글

profile_image
"joosam"님도 굿데이되세요~~~~이모티콘

joosam님의 댓글

profile_image
shadow님 외람되나 또 다른 질문 좀 드릴려고요... 슬라이더 스킨을  게시판에 연결 안하고 베너 처럼 사용이 가능 할 런지요...

shadow님의 댓글의 댓글

profile_image
list.skin.html의 소스를 보시면 예제 샘플이 있습니다.
샘플을 보시고 적용하시면 될 듯 하네요.
정해진 이미지를 입력하는 것이니

<!--{@ loop}-->
...
<!--{:}-->
위 소스는 삭제하시고요.

joosam님의 댓글

profile_image
latest.skin.html를 말씀 하시는거죠? 그걸 보고 질문을 드렸다는....
왕초보 연구중입니다...custom_image_slider 폴더내에 img 폴더를 만들었고 이미지를 넣었는데... 이미지 링크를 어떻게 걸어야 할지....

shadow님의 댓글의 댓글

profile_image
예제 이미지를 1.Jpg라고 했을때 아래와 같이 간단히 해결될 듯 합니다.

<a href="링크걸 주소"><img class="img-responsive" src="http://이미지 경로/1.jpg" alt=""></a>

joosam님의 댓글

profile_image
다음 소스 에서 수정해야 할곳이 있나요? {latest->latest_eyoom('custom_image_slider','title=게시판 제목||bo_table=추출 게시판명||count=뽑을 갯수||cut_subject=20||img_view=y||bo_direct=n||img_width=600')}

shadow님의 댓글의 댓글

profile_image
사실 스킨이 아닌 html속에 넣어서 사용하는게 맞는지라
추출 소스는 버리시고 다음을 참조해서 나타낼 위치에 넣어보세요.

<div id="owl-banner">
  <div class="item"><img src="이미지경로" alt="이미지 설명"></div>
  <div class="item"><img src="이미지경로" alt="이미지 설명"></div>
  <div class="item"><img src="이미지경로" alt="이미지 설명"></div>
  <div class="item"><img src="이미지경로" alt="이미지 설명"></div>
  <div class="item"><img src="이미지경로" alt="이미지 설명"></div>
  <div class="item"><img src="이미지경로" alt="이미지 설명"></div>
  <div class="item"><img src="이미지경로" alt="이미지 설명"></div>
  <div class="item"><img src="이미지경로" alt="이미지 설명"></div>
</div>
html소스 하단분에 아래 소스를

$(document).ready(function() {
  $("#owl-banner").owlCarousel({
	autoPlay : 6000,
	items : [4],
	itemsDesktop : [847,4],
	itemsMobile : [479,2],
	slideSpeed: 300,
  });
});
그리고 모양을 잡기 위해 그누보드5/eyoom/theme/설치된 테마/css/custom.css를 열어 다음을 첨부하세요.

#owl-banner {position:relative;overflow:hidden;display:blockpadding:10px;border: 0px solid #ddd;border-left: 0px solid #ddd;}
#owl-banner .item{position:relative;overflow:hidden;margin:1px;background:#54545a;text-align:center;min-height:120px;max-height:120px}
#owl-banner a.item-subj {position:absolute;left:0;bottom:0;color:#fff;width:100%;padding:5px 5px;font-size:13px;text-align:center;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;overflow: hidden;background:#000;-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=70)";filter:alpha(opacity=70);opacity:0.7}

테스트해보지 않았습니다. 참고하세요.이모티콘

축하합니다. 행운의 포인트 86포인트를 획득하였습니다.

joosam님의 댓글

profile_image
아 넵 감사합니다... 적용 해보았습니다 assets/owl1.jpg 중 assets폴더는 custom_image_slider폴더 밑에 만들어야 할까요?
$(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님의 댓글의 댓글

profile_image
제가 적어드린 소스는 다운로드 받은 스킨과 별개의 개념이니 첨부하실 html 위치에 적어드린 소스를 넣어주세요.
저장 위치가 헷갈리신다면 그누보드5 폴더에 별도의 폴더(예제:example)명을 만드시고 아래와 같이 하면 되지 않을까 합니다.
그누보드5 폴더가 루트였을때.

<div id="owl-banner">
  <div class="item"><img src="http://도메인/example/1.jpg" alt="이미지 설명"></div>
  <div class="item"><img src="http://도메인/example/2.jpg" alt="이미지 설명"></div>
  <div class="item"><img src="http://도메인/example/3.jpg" alt="이미지 설명"></div>
  <div class="item"><img src="http://도메인/example/4.jpg" alt="이미지 설명"></div>
  <div class="item"><img src="http://도메인/example/5.jpg" alt="이미지 설명"></div>
  <div class="item"><img src="http://도메인/example/6.jpg" alt="이미지 설명"></div>
  <div class="item"><img src="http://도메인/example/7.jpg" alt="이미지 설명"></div>
  <div class="item"><img src="http://도메인/example/8.jpg" alt="이미지 설명"></div>
</div>

joosam님의 댓글

profile_image
넵 적용은 잘되었습니다... 별개의 개념이라면
$(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님의 댓글의 댓글

profile_image
제가 반복해서 말씀드렸지만 제 말이 어려우셨나보네요.
다시 설명을 드릴께요.
금일 질문 주신 댓글 아래쪽에 제가 적어드린 소스들은 list.skin.html과 아무런 관련이 없습니다.
스킨을 이용하는게 아닌 직접 첨부하는 방식입니다.
index_bs.html이나 page폴더의 특정.html이나 이런 소스내에 첨부하세요.
단 아래 소스는 그누보드5/eyoom/theme/설치된 테마/css/custom.css 내에 첨부하세요
꼼꼼히 금일에 적힌 제 댓글들을 확인해주시면 충분히 이해가 가실꺼에요.

#owl-banner {position:relative;overflow:hidden;display:blockpadding:10px;border: 0px solid #ddd;border-left: 0px solid #ddd;}
#owl-banner .item{position:relative;overflow:hidden;margin:1px;background:#54545a;text-align:center;min-height:120px;max-height:120px}
#owl-banner a.item-subj {position:absolute;left:0;bottom:0;color:#fff;width:100%;padding:5px 5px;font-size:13px;text-align:center;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;overflow: hidden;background:#000;-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=70)";filter:alpha(opacity=70);opacity:0.7}

shadow님의 댓글의 댓글

profile_image
다운받으신 스킨처럼 이미지 아래쪽에 제목을 넣고 싶으시다면 list.skin.html 소스를 살펴보시면 될 듯 하구요.
alt= 이 제대로 동작치 않으시면 title= 으로 수정해보세요.

joosam님의 댓글

profile_image
shadow님 넵 귀찮게 해드려서 송구스럽습니다~~ 정말 꼼꼼한 답변 다시 한번 고맙습니다~~ 평안한 저녁 되시고 언제나 건강 하시길 바랍니다.

shadow님의 댓글의 댓글

profile_image
이해하시기 편하게 말씀드렸어야 했는데 생각보다 의사전달이 안되었나보네요.
프로그래밍이 아닌 이용하는거니까 한번쯤 직접 수정해보시면 홈 구축에 꽤 도움이 되실꺼에요

joosam님의 댓글의 댓글

profile_image
아이고 아닙니다... 그저 고맙운 마음이라... ㅎㅎ 많은 공부 되고있습니다~~

회색늑대님의 댓글

profile_image
갤러리 최신글로는 최고네요.

주주봉봉님의 댓글

profile_image
너무너무 감사합니다~~

빨강모자님의 댓글

profile_image
아래것은 포인트가 모자라서..ㅠㅠ
열심히 학습해 봅니다. 감사합니다.

오피님의 댓글

profile_image
3천 포인트...

오늘도좋은날님의 댓글

profile_image
수고가 보이네요. 멋집니다.
전체 7 건 - 1 페이지
사이트 내 전체검색