AnythingSlider 썸네일 캐 러셀

Question

슬라이더와 컨베이어를 축소판 (navigationFormatter 또는 외부에서 생성)과 연결하여 슬라이더의 컨트롤을 사용하여 다음 슬라이드로 이동할 때이 슬라이드의 축소판이 컨베이어의 현재 페이지에 있지 않도록 할 수 있습니까? 회전식 슬라이드가 다음 페이지로 이동합니까? 슬라이더를 수평으로 확장 할뿐만 아니라 수평 및 수직으로 비율을 유지하는 방법이 있습니까?

Answer 1

navigationSize option에 대한 설명서를 확인하십시오. 캐 러셀을 이동할시기를 선택할 수있는 두 개의 코드 예제가 있습니다. 슬라이드가 변경되기 전이나 후에

슬라이더에서 크기를 가로 및 세로로 변경하려면 CSS에서 패널의 크기 (너비와 높이 모두)를 정의하고 resizeContents 옵션을 false으로 설정하십시오.

$('#slider').anythingSlider({ 
    // fade mode 
    mode: 'f', 
    // If true, solitary images/objects in the panel will expand to fit the viewport 
    resizeContents: false, 
    // Set this to the maximum number of visible navigation tabs; false to disable 
    navigationSize: 3, 
    // Format navigation labels with text 
    navigationFormatter: function (index, panel) { 
     return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2'][index - 1]; 
    }, 
    onSlideBegin: function (e, slider) { 
     // keep the current navigation tab in view 
     slider.navWindow(slider.targetPage); 
    } 
}); 

스크립트

CSS

/* starting slider dimensions; it gets changed to match the panels */ 
#slider { width: 800px; height: 390px; list-style: none; } 
#slider .panel1 { width: 500px; height: 350px; } 
#slider .panel2 { width: 450px; height: 420px; } 
#slider .panel3 { width: 680px; height: 317px; } 
/* With no specific size, the slide defaults to wrapper size; except in IE7, 
it needs a width defined, so set to 100% */ 
#slider .panel4 { width: 100%; } 
#slider .panel5 { width: 680px; height: 317px; } 
#slider .panel6 { width: 450px; height: 300px; } 

: 여기

이 코드를 사용하여 데모 jsFiddle으로 밖으로 추출 main demo page에서 제 데모이며