[펄스나인] 슬라이드 카드형 최신글 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

[펄스나인] 슬라이드 카드형 최신글 정보

최신글 [펄스나인] 슬라이드 카드형 최신글

첨부파일

swiper_card.zip (395.6K) 675회 다운로드 2020-08-08 20:08:12 포인트 차감10
테스트한 버전5.4.2.7
호환 가능 버전5.X.X.X

본문

Swiper 플러그인(3.4.2 버전) 을 활용한 슬라이드 카드형 최신글 스킨 입니다.

 

모바일용으로 작업되어 있으며,

일부 수정을 통해 PC에서도 무난하게 사용할 수 있을것 같습니다.

 

자동롤링이 필요 없으신 경우

latest.skin.php 파일 83라인의 autoplay: 3000, 을 주석처리 하시면 되고

루프(슬라이드가 끝나지 않고 반복) 옵션이 필요하신 경우는

82라인 //loop: true, 를 주석해제 하시면 되겠습니다.

좌, 우 화살표 사용은 68라인 주석처리 된 부분을 해제 하시면 됩니다.

 

호출방법은 일반 최신글과 동일하며

/skin/latest/ 폴더에 업로드하신 후 아래와 같이 호출 하시면 되겠습니다.

<?php echo latest('swiper_card', '게시판ID', 추출갯수, 99); ?>

 

테마 사용시 theme/테마폴더/skin/latest/ 폴더에 업로드 후

아래와 같이 호출 하시면 되겠습니다.

<?php echo latest('theme/swiper_card', '게시판ID', 추출갯수, 99); ?>

 

제목글자수는 브라우저 가로폭에 맞게 잘리도록 되어있으므로

99정도로 해주시면 될것같습니다.

 

링크1 미리보기 페이지에 있는 모바일 비스무리한 레이아웃은

보기 편하시라고 예시로 만들어둔거라 스킨파일에 포함되지 않습니다.

 

브라우징 테스트 : 익스11, 엣지, 크롬, 웨일

테스트 제이쿼리 버전 : 그누5 기본 jquery-1.12.4.min.js

 

감사합니다~

추천
58

댓글 전체

게시판관리 가셔서 썸네일 가로세로 사이즈를 높혀보세요~
보이는 영역보다 생성된 썸네일의 사이즈가 작아서 그런것 같습니다.

답변 감사합니다.
pc에서 사용 할려고 하는데 양쪽 여백을 조절할려면 어찌 해야 하나요?

모바일에서는 가운데에 슬라이더가 보이고 양쪽으로 슬라이더가 조금씩 보이는데 pc에서 양쪽 슬라이더 여백을 많아서 좀 줄이고 싶어서요..

    .swiper-slide:nth-child(1n) {
        width: 25%;

    }
    .swiper-slide:nth-child(2n) {
        width: 25%;

    }
    .swiper-slide:nth-child(3n) {
        width: 25%;

    }

이렇게 하니 PC에서 가운데에 3개 슬라이더가 보이고 양쪽으로 반반씩 슬라이더가 보이는데 양쪽 여백을 없애거나 줄이고 싶어서요.
양쪽여백< 을 이해를 못해서
몇가이 예시로 전달드려봅니다.

박스의 좌, 우측 여백 (박스 사이사이 여백)
spaceBetween : 15 를 수정해주세요. (px단위)

.swiper-slide:nth-child(1n) ,(2n), (3n)
박스의 크기
width:100% 로 변경하면 좌, 우 박스 일부가 보이지 않고 꽉참.

도움이 되셨길 바래봅니다 ^^

한개가 나오고 여러게를 돌리고 있는데 사진이 짤려나와요 조정이 안될까요
확인 http://wolf24.dothome.co.kr/yc5/
사진이 세로로 긴 사이즈가 있는 경우
박스 한개의 사이즈만 길어길 수 있기때문에
사진 가운데를 기준으로 background-size:cover 로 처리해둔것입니다~

수정하시려면
이미지 들어간 부분을 background-image:url(); 이 아닌
<img src=""> 로 바궈주셔야 될것같습니다~
background-image:url(); 이자리에 <img src=""> 이렇게 바꿔주면 되나요
 <div class="sw_img" style="background-image: url('<?php echo $img_content; ?>');"> 이곳이죠
54라인 아래부분을
<div class="sw_img" style="background-image: url('<?php echo $img_content; ?>');">
</div>

아래와같이 바꿔보셔요
<img src="<?php echo $img_content; ?>" style="width:100%; margin-top:20px;">
감사합니다 계속 찾고 있었는데 ㅠㅠ
하나만 여쭤볼께용...ㅜㅜ  이미지가 두개씩 나오게 할 수 있을까요??
페이지버튼이나 좌우버튼 클릭시는 한개씩 움직이고
이미지만 좌우 짤리는 거 없이 두개씩 표현되게 하고 싶습니다 ㅎㅎ
style.css 파일 40라인
width: 80%; 을 100% 로 수정해주시고

style.css 파일 63라인 ~ 74라인
.swiper-slide:nth-child(1n) { ... }
.swiper-slide:nth-child(2n) { ... }
.swiper-slide:nth-child(2n) { ... }
모두 삭제해주시고

latest.skin.php 파일 87라인 스크립트에
slidesPerView: 'auto', 를
slidesPerView: 2, 로 변경해주시면 될것같습니다~

감사합니다~
펄스나인님 스킨이 너무 좋아요.

혹시,
링크 1이 걸렸을때는 링크1로 이동하고 싶고 링크가 없으면
원래 본페이지로 이동하고싶은데.

  <div class="swiper-slide">
          <?php
          if ($list[$i]['wr_link1']) {
                echo "<a href=\"".$list[$i]['wr_link1']."\" target='_self'>";
                } else {
                  echo "<a href=\"".$list[$i]['href']."\">";
                }
                echo  "<div class=\"sw_img\" style=\"background-image: url('\"".$img_content."\"');"></div>";



                        echo "</a>";
                        ?>

바꿨더니 , 이미지가 안나오더라고요  ㅜㅜ

어떻게 못할까요 .. ㅜㅜ
음 다른건 안건드셔도 될거같고 원본에서 아래부분만 바꿔보세요
34라인의 아래 부분을

<div class="swiper-slide" onclick="location.href='<?php echo $list[$i]['href'] ?>';" style="cursor: pointer;">

아래와 같이 수정해보세요

<?php if ($list[$i]['wr_link1']) { ?>
<div class="swiper-slide" onclick="location.href='<?php echo $list[$i]['wr_link1'] ?>';" style="cursor: pointer;">
<?php } else { ?>
<div class="swiper-slide" onclick="location.href='<?php echo $list[$i]['href'] ?>';" style="cursor: pointer;">
<?php } ?>

참 쉽죠!?
선생님 글게시판1/갤러리게시판2 인데 만들어주신 부분에서 공지사항 글 게시판만 리스트형식으로 만들고 싶습니다만 가능할까요?
공지사항으로 등록된 게시글만 추출하고자 하시면 lib/latest.lib.php 파일의 수정이 필요할것 같습니다.

일반적인 최신글 추출 코드로는 불가능하고
쿼리문 수정을 통해서 함수를 만들어야 되세요.

스킨자료실이나 팁자료실에서 검색하시면 원하시는 내용을 찾을 수 있을것 같습니다!
ㅎㅎ 여기서뵙네요!

그룹 최신글을 출력해주는 코드에 스킨만 입혀주면 될것 같습니다.
최신글 스킨을 약간 변형해야될것 같네요 ㅠ

그룹 최신글 추출방법은
https://sir.kr/bbs/search.php?q=%EA%B7%B8%EB%A3%B9%EC%B5%9C%EC%8B%A0%EA%B8%80

검색결과를 참고해보세요~!
감사합니다!
썸네일이 사진중앙으로 표현되어짤리게되는데요~
일반게시판 썸네일처럼 전체적으로 나오려면
어떻게하면 좋을까요!
질문드립니다.
.swiper-wrapper의 element.style로 등록된 transform :translate3d(-368.5px, 0px, 0px); 속성을 해제하거나 변경하고 싶습니다. 어디서 하면 될까요?
이 속성 때문에 최신글의 첫번째 글은 보여지지 않고, 두번째 글은 반 잘려서 출력됩니다. 해결방법을 알려주실 수 있나요?
slidesPerView: 'auto' 를
slidesPerView: 1, 또는 보여줄 갯수로 변경하시고

centeredSlides: true 를
centeredSlides: false 로 변경해주세요.

css에서
.swiper-slide:nth-child(1n) {width: 80%;}
.swiper-slide:nth-child(2n) {width: 80%;}
.swiper-slide:nth-child(3n) {width: 80%;}
위 스타일을 삭제하시고

.swiper-slide {width:80%} 를
.swiper-slide {width:100%} 로 변경해보세요.

좌우로 가려지는 div 를 반쯤 걸쳐서 보이게 해놨는데
위 내용대로 하시면 좌우에 보이는거는 없어지실것 같습니다.

--------

var swiper1 = new Swiper('.swiper1', {
안에 옵션을 추가 또는 삭제 해서 해결을 하는것이 좋습니다.

transform :translate3d 는 스크립트로 옵션에 따른 슬라이더가 좌우로 이동될때 유동적으로 변경되는 부분 이라 제거하시면 슬라이더가 작동하지 않습니다.
전체 2,423 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT