사이트 활용팁
2024.11.04 18:14
갤러리 게시판 게시물 사이 간격 수정
Swiper 슬라이드 기능 강화 업데이트
모바일 및 다양한 환경에 최적화된 Swiper 슬라이드 기능이 업데이트되었습니다. 이제 더욱 유연하고 직관적인 콘텐츠 경험을 제공합니다.
1) 반응형 레이아웃: 1024px, 768px, 450px, 10px 등 다양한 화면 크기에 맞춰 가로 및 세로 슬라이드 개수가 자동으로 조절되어 어떤 기기에서든 최적의 뷰를 제공합니다.
2) 세로형 콘텐츠 배열: slidesPerColumnFill: \\\'row\\\' 옵션을 통해 콘텐츠가 세로 방향으로 먼저 채워져 가독성이 향상됩니다.
3) 터치 및 드래그 제어: touchRatio: 0과 simulateTouch: false 설정을 통해 사용자의 의도치 않은 터치나 드래그를 방지하여 안정적인 콘텐츠 탐색이 가능합니다.
4) 실시간 반영 (Observer): observer: true와 observeParents: true를 통해 콘텐츠나 레이아웃 변경 시 슬라이더가 자동으로 리셋되어 항상 최신 상태를 유지합니다.
이번 업데이트로 콘텐츠의 시각적 품질과 사용자 편의성을 한층 더 높였습니다.
모바일 및 다양한 환경에 최적화된 Swiper 슬라이드 기능이 업데이트되었습니다. 이제 더욱 유연하고 직관적인 콘텐츠 경험을 제공합니다.
1) 반응형 레이아웃: 1024px, 768px, 450px, 10px 등 다양한 화면 크기에 맞춰 가로 및 세로 슬라이드 개수가 자동으로 조절되어 어떤 기기에서든 최적의 뷰를 제공합니다.
2) 세로형 콘텐츠 배열: slidesPerColumnFill: \\\'row\\\' 옵션을 통해 콘텐츠가 세로 방향으로 먼저 채워져 가독성이 향상됩니다.
3) 터치 및 드래그 제어: touchRatio: 0과 simulateTouch: false 설정을 통해 사용자의 의도치 않은 터치나 드래그를 방지하여 안정적인 콘텐츠 탐색이 가능합니다.
4) 실시간 반영 (Observer): observer: true와 observeParents: true를 통해 콘텐츠나 레이아웃 변경 시 슬라이더가 자동으로 리셋되어 항상 최신 상태를 유지합니다.
이번 업데이트로 콘텐츠의 시각적 품질과 사용자 편의성을 한층 더 높였습니다.
<script>
var swiper = new Swiper('.swiper-container-<?php echo $bo_table ?>', {
slidesPerView: <?php echo isset($bo_gallery_cols) ? $bo_gallery_cols : '3'; ?>, //가로갯수
spaceBetween: 30, // 간격
slidesPerColumnFill: 'row', //세로형
slidesPerColumn: 4, // 세로갯수
observer: true, //리셋
observeParents: true, //리셋
touchRatio: 0, // 드래그 가능여부
simulateTouch: false, //마우스 클릭드래그를 허용함.
breakpoints: { // 반응형
1024: {
slidesPerView: <?php echo isset($bo_gallery_cols) ? $bo_gallery_cols : '3'; ?>, //가로갯수
spaceBetween: 15, // 간격
slidesPerColumnFill: 'row', //세로형
slidesPerColumn: 9999, // 세로갯수
},
768: {
slidesPerView: <?php echo isset($bo_gallery_cols) ? $bo_gallery_cols : '3'; ?>, //가로갯수
spaceBetween: 15, // 간격
slidesPerColumnFill: 'row', //세로형
slidesPerColumn: 9999, // 세로갯수
},
450: {
slidesPerView: 2, //가로갯수
spaceBetween: 15, // 간격
slidesPerColumnFill: 'row', //세로형
slidesPerColumn: 9999, // 세로갯수
},
10: {
slidesPerView: 1, //가로갯수
spaceBetween: 15, // 간격
slidesPerColumnFill: 'row', //세로형
slidesPerColumn: 9999, // 세로갯수
}
}
});
</script>- 이전글리빌더, 헤더 부분의 메뉴 아래 그림자 효과 설정값 변경 방법2024.11.04
0
0
공유하고, 소통하다
빌런은 디스코드, 인스타그램, 페이스북, 카카오톡, 텔레그램 등 다양한 메신저에서 발생하는 범죄, 사기, 보이스피싱, 스캠과 함께 중고 거래, 데이트 폭력, 학교 폭력, 술집 진상, 게임 사기꾼, 나쁜 회사 상사, 일상 속 매너 없는 사람들에 대한 정보를 공유하는 플랫폼입니다.
또한, 한국 아이돌, 배우, 해외 유명인, 스포츠 스타, 인플루언서에 대한 팬클럽 게시판도 운영하여, 좋아하는 스타와 소통할 수 있는 공간을 제공합니다. 안전한 커뮤니티에서 우리의 경험을 나누고, 더 나은 사회를 만들어 갑시다. ... 접기
주의사항.
본 사이트의 모든 게시물과 그에 포함된 텍스트, 이미지, 동영상 등 모든 콘텐츠는 본 사이트에서 독자적으로 편집 및 표현 방식을 수정하여 완성된 창작물입니다. 저작권법 및 관련 법령에 따라 보호를 받습니다. 따라서, 본 정보는 사이트 운영자의 명시적인 서면 동의 없이 무단으로 전재, 복사, 배포, 재가공, 또는 어떠한 형태로든 상업적/비상업적으로 활용될 수 없습니다.
또한, 게재된 정보는 개인적인 열람 및 참고 이외의 어떠한 용도로도 사용할 수 없습니다. 이를 위반할 경우 관련 법률에 의거하여 민·형사상의 책임을 질 수 있습니다.
본 사이트는 등록자가 게재한 자료의 내용에 대한 정확성, 완전성, 신뢰성을 보증하지 않으며, 해당 정보의 오류나 누락에 대해 어떠한 책임도 지지 않습니다. 또한, 사용자가 본 정보를 신뢰하여 취한 직간접적인 모든 조치나 결과에 대해서도 책임을 부담하지 않습니다. 정보 사용에 따른 모든 위험은 사용자 본인에게 있습니다. ... 접기
댓글목록
게시물에서 제공하신 스크립트가 갤러리 게시판의 이미지 간격을 조정하는 데 도움이 될 것 같습니다. 간격을 30픽셀로 설정해 이미지 사이에 충분한 여...
게시물에서 제공하신 스크립트가 갤러리 게시판의 이미지 간격을 조정하는 데 도움이 될 것 같습니다. 간격을 30픽셀로 설정해 이미지 사이에 충분한 여백을 확보하는 것이 좋습니다. 또한 반응형 브레이크포인트를 설정해 다양한 기기에서 최적의 보기를 제공할 수 있습니다. 이 스크립트를 시도해 보고 그 결과를 공유해 주시면 감사하겠습니다.