BookBlock 플러그인 사용법 질문

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
BookBlock 플러그인 사용법 질문

QA

BookBlock 플러그인 사용법 질문

본문

다운로드 : https://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/

데모 : https://tympanus.net/Development/BookBlock/index4.html

 

데모 스크린샷 1) 

[설명] 책넘기는 플러그인 데모4 버전입니다. PC에서는 좌우 2장으로 분리되어있습니다.

237506203_1728520519.9071.jpg

 

 

 

 

데모 스크린샷 2)

[설명] 브라우저 사이즈를 모바일크기로 줄였을때도 좌우로 분리되어있습니다.

 

237506203_1728520631.7596.jpg

 

 

 

 

 

질문) PC에서는 책처럼 좌우 각 1장씩 보이되, 모바일에서는 1장씩만 보이게 할수있는 방법은 없을까요.

이 질문에 댓글 쓰기 :

답변 2

※ 책 넘김 플러그인

  > 설정을 조정하여 화면 크기별로 페이지 수를 다르게 설정할 수 있는 옵션이 있습니다.

  > 플러그인 매뉴얼이나 공식 문서를 참고하여 미디어 쿼리 관련 설정을 할 수 있습니다.

 

※ 참고 하여 보실레요? ~~

 

  !. JavaScript를 사용

window.addEventListener('resize', function () {
  const flipbook = document.querySelector('.flipbook');
  if (window.innerWidth <= 768) {
    flipbook.classList.add('single-page');
  } else {
    flipbook.classList.remove('single-page');
  }
});
document.addEventListener('DOMContentLoaded', function () {
  const flipbook = document.querySelector('.flipbook');
  if (window.innerWidth <= 768) {
    flipbook.classList.add('single-page');
  }
});

 

  !. CSS 미디어 쿼리를 사용

.flipbook .page {
  width: 50%; 
  float: left;
}
@media (max-width: 768px) {
  .flipbook .page {
    width: 100%; 
    float: none;
  }
}

>>> 책 넘김 플러그인에서

 

     div 요소나 관련 클래스를 사용하여 페이지를 분리하는 방식으로,

 

       모바일 크기에서는 한 페이지만 표시하도록 설정합니다.

2039255696_1728522616.9982.png

 

PC에서만 작동 스크립트가 적용되도록 하면 될 것 같습니다.

 

단, 모바일에서 CSS 수정은 필요해 보입니다.

도움이 되셨다면 채택 한번 부탁드립니다^^

답변을 작성하시기 전에 로그인 해주세요.
전체 1
QA 내용 검색

회원로그인

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