[펄스나인] 슬라이드 카드형 최신글 정보
최신글 [펄스나인] 슬라이드 카드형 최신글관련링크
첨부파일
본문
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
댓글 전체
아쉽게도 하루에 추천이 10번 뿐이라서 내일 추천예약하고 가겠습니다
항상 좋은말씀 감사합니다~
비피해 없으시길 !
잘 쓰겠습니다.
잘 써주십시요!
추천 감사합니다 ㅎ
강력히 추천!!
너무 덥네요... 건강 유의하세요!
소스보니 없어서요..
보이는 영역보다 생성된 썸네일의 사이즈가 작아서 그런것 같습니다.
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% 로 변경하면 좌, 우 박스 일부가 보이지 않고 꽉참.
도움이 되셨길 바래봅니다 ^^
사랑합니다~
박스 한개의 사이즈만 길어길 수 있기때문에
사진 가운데를 기준으로 background-size:cover 로 처리해둔것입니다~
수정하시려면
이미지 들어간 부분을 background-image:url(); 이 아닌
<img src=""> 로 바궈주셔야 될것같습니다~
<div class="sw_img" style="background-image: url('<?php echo $img_content; ?>');"> 이곳이죠
<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;">
고맙습니다. ^^
잘 써주십시요~~
하나만 여쭤볼께용...ㅜㅜ 이미지가 두개씩 나오게 할 수 있을까요??
페이지버튼이나 좌우버튼 클릭시는 한개씩 움직이고
이미지만 좌우 짤리는 거 없이 두개씩 표현되게 하고 싶습니다 ㅎㅎ
2개씩 안짤리고 나오는 방법은 없을까요?
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, 로 변경해주시면 될것같습니다~
감사합니다~
쪽지로 Url, FTP정보, 관리자 로그인정보 보내주세요 ^^
혹시,
링크 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 } ?>
참 쉽죠!?
바쁘실텐데 늘 진심으로 감사드립니다.
일반적인 최신글 추출 코드로는 불가능하고
쿼리문 수정을 통해서 함수를 만들어야 되세요.
스킨자료실이나 팁자료실에서 검색하시면 원하시는 내용을 찾을 수 있을것 같습니다!
잘쓰세요 ^^
덕분에 살았습니다 감사합니다!
잘써주십시요~~!
쪽지주세요 ^^
댓글 감사합니다~
댓글 감사드려요~
혹시 특정 게시판그룹 호출하고싶을때는
어떻게해야 할까요~?
그룹 최신글을 출력해주는 코드에 스킨만 입혀주면 될것 같습니다.
최신글 스킨을 약간 변형해야될것 같네요 ㅠ
그룹 최신글 추출방법은
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: 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 는 스크립트로 옵션에 따른 슬라이더가 좌우로 이동될때 유동적으로 변경되는 부분 이라 제거하시면 슬라이더가 작동하지 않습니다.
최신글은 어느정도 기간인가요?
이 기간 설정은 어디에서 하나요?