KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

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

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
신용카드 2.9%

그누보드5 스킨

스킨 다운로드시 좋아요 클릭과 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

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

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

첨부파일

첨부파일 swiper_card.zip (395.6K) 95회 다운로드 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

 

감사합니다~

추천42

댓글 전체

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

답변 감사합니다.
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% 로 변경하면 좌, 우 박스 일부가 보이지 않고 꽉참.

도움이 되셨길 바래봅니다 ^^
전체 1,846 |RSS
그누보드5 스킨 내용 검색

회원로그인

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

© SIRSOFT