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
감사합니다~
좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
아미나 Basic테마 수정내용 1. /thema/Basic/head.php / shop.head.php : 1 ~ 5Line add_stylesheet() 코드 추가 기존 : [...
[code] 그누 5.3 적용방법 @smt4u 님께서 공유해주셨습니다. 감사합니다. // ./extend/user.config.php 파일 아래내용 추가 function get...
2020.10.01 수정 list.skin.php 199라인 : wr_content 개행문자 제거 코드추가 style.css 573라인 : view 페이지 하단 버튼 간격조정 ....
숙향님과 테루님이 말씀하셔서 그누보드용 5.3과 5.4버전 두가지 스킨 올려드립니다. 출력유무는 /skin/connect/basic_country/current_connect....
Swiper 플러그인(3.4.2 버전) 을 활용한 슬라이드 카드형 최신글 스킨 입니다. 모바일용으로 작업되어 있으며, 일부 수정을 통해 PC에서도 무난하게 사용할 수 있을것 같...
https://sir.kr/qa/371812 댓글작성하는곳 옆에 등록순/최신순 이렇게 해놓고 등록순누르면 기존 순서대로 댓글 보여주고 최신순 누르면 가장 마지막에 작성한 댓글을 ...
아미나용 GeoIP을 사용한 접속자 스킨입니다. 업로드 위치 : /skin/connect 설정 : 관리자 - 환경설정 - 접속자스킨[basic_country선택] ...
첫번째 첨부파일의 글자가 깨져서 보이는 분은 두번째 첨부파일로 대체하시기 바랍니다. (첫번째파일 utf-8, 두번째파일 euc-kr 각각 인코딩입니다.) 플레이어와 리스트의 크...
세부적인 사항은 https://sir.kr/g5_skin/38807 자료를 참고해 주세요 첫번째 첨부파일의 글자가 깨져서 보이는 분은 두번째 첨부파일로 대체하시기 바랍니다. (첫번...
안녕하세요 두리삼촌입니다. 오랜만에 여러분께 인사드립니다. 이번에는 유튜브 플레이어를 모바일 환경에서 사용할수 있도록 반응형으로 수정하여 재배포 합니다. 파일은 모두 두가지 입...
안녕하세요 두리삼촌입니다. 오랜만에 여러분께 인사드립니다. 이번에는 유튜브 플레이어를 모바일 환경에서 사용할수 있도록 반응형으로 수정하여 재배포 합니다. 파일은 모두 두가지 입...
댓글 155개
아쉽게도 하루에 추천이 10번 뿐이라서 내일 추천예약하고 가겠습니다
항상 좋은말씀 감사합니다~
비피해 없으시길 !
잘 쓰겠습니다.
잘 써주십시요!
추천 감사합니다 ㅎ
강력히 추천!!
너무 덥네요... 건강 유의하세요!
소스보니 없어서요..
보이는 영역보다 생성된 썸네일의 사이즈가 작아서 그런것 같습니다.
[http://sir.kr/data/editor/2008/a548061b47ec236849b45d12258b8346_1597804031_7516.PNG]
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=""> 로 바궈주셔야 될것같습니다~
<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라인의 아래 부분을
[code]
<div class="swiper-slide" onclick="location.href='<?php echo $list[$i]['href'] ?>';" style="cursor: pointer;">
[/code]
아래와 같이 수정해보세요
[code]
<?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 } ?>
[/code]
참 쉽죠!?
바쁘실텐데 늘 진심으로 감사드립니다.
일반적인 최신글 추출 코드로는 불가능하고
쿼리문 수정을 통해서 함수를 만들어야 되세요.
스킨자료실이나 팁자료실에서 검색하시면 원하시는 내용을 찾을 수 있을것 같습니다!
잘쓰세요 ^^
덕분에 살았습니다 감사합니다!
잘써주십시요~~!
쪽지주세요 ^^
댓글 감사합니다~
댓글 감사드려요~
혹시 특정 게시판그룹 호출하고싶을때는
어떻게해야 할까요~?
그룹 최신글을 출력해주는 코드에 스킨만 입혀주면 될것 같습니다.
최신글 스킨을 약간 변형해야될것 같네요 ㅠ
그룹 최신글 추출방법은
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); 속성을 해제하거나 변경하고 싶습니다. 어디서 하면 될까요?
이 속성 때문에 최신글의 첫번째 글은 보여지지 않고, 두번째 글은 반 잘려서 출력됩니다. 해결방법을 알려주실 수 있나요?
[http://sir.kr/data/editor/2209/3f93f711b574658184ec58c4aacdf4dd_1663308411_9037.JPG]
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 는 스크립트로 옵션에 따른 슬라이더가 좌우로 이동될때 유동적으로 변경되는 부분 이라 제거하시면 슬라이더가 작동하지 않습니다.
최신글은 어느정도 기간인가요?
이 기간 설정은 어디에서 하나요?