Coda Slider를 모바일 화면 해상도로 비활성화하려면 어떻게해야합니까?

Question

my website에 반응 형 디자인을 구현하려고 시도 중입니다. 기능이 추가 된 콘텐츠 슬라이더에 조금 붙어 있습니다.

내 기능 슬라이드에 Coda Slider을 사용하고 있습니다. 작은 화면 너비에 대해 어떻게해야할까요? 슬라이더에 대한 jQuery 기능을 중단하고 슬라이드 기능에 대한 인라인 스타일을 제거하는 것입니다. 단순히 디스플레이의 블록.

이전에 예제를 본 적이 있었지만 여기에 게시 할 예제가있는 북마크를 찾아 보았을 때 실제로 이런 식으로 작동하는 것으로는 보이지 않았습니다. 아마도 JS의 한계로 인해 이것이 실현 될 수 없기 때문일까?

다음은 슬라이더를 구현하는 데 사용하는 jQuery입니다. 특정 크기 이하의 화면 너비에 대해 정상적으로 돌아가고 중단하도록 지시하는 항목을 간단하게 추가 할 수 있습니까? 지금은 단순히 머리에 다음과 같이 미디어 쿼리 구현이 스타일 시트를 사용하고 있습니다

// Coda slider via http://www.ndoherty.biz/demos/coda-slider/2.0/ 

    $('#coda-slider-1').codaSlider({ 
     dynamicArrows: false, 
     dynamicTabs: false, 
     autoSlide: true, 
     autoSlideInterval: 4000, 
     slideEaseDuration: 500, 
     autoSlideStopWhenClicked: true, 
    }); 

:

<link rel="stylesheet" href="/css/2011/fullwidth-responsive.css" media="only screen and (min-width : 480px)" /> 
<link rel="stylesheet" href="/css/2011/mobile.css" media="only screen and (min-width : 320px) and (max-width : 480px)" /> 

그래서 내가 JS 싶습니다 모바일 스타일 시트에서 발로에 해당하는 취소 , 본질적으로 나는 CSS만으로 콘텐츠를 제시 할 것이고, 슬라이더가 전체 사이트를 위해하는 것처럼 JS 프리젠 테이션 애니메이션을 사용하지 않을 것이다.

Answer 1

라이브 창 변경에 응답하는 고급 검색 설정을 구현하지 않는 한 몇 가지 방법이 있습니다. 미디어 쿼리는 언제든지 모든 크기 변경에 응답하며 코드는 한 번만 실행됩니다 (코다 슬라이더를 초기화하기 직전).

1. 너비가 작은 화면에서 사용 가능한 너비를 감지하여 너비 감지 : 예를 들어

이 #header이 mobile.css에 50px의 높이를 가져옵니다 말 :

if (screen.availWidth > 480) { 
    // .. initialize Coda here .. 
} 

2.은 모바일 스타일 시트 적용 특정 스타일을 감지합니다. 당신은 그 시트는 그 높이를 확인하여 활성화 된 경우 감지 할 수 있습니다 :

if ($("#header").width() != 50) { 
    // .. initialize Coda here .. 
} 

이 (더미 미디어 쿼리 등을 만드는처럼) 다른 방법이 있지만이 중 하나가 당신이 원하는해야한다.

참고 : 모바일 레이아웃에 필요할 수있는 클래스를 제거/추가하는 "else"문이 필요할 수도 있습니다.