Nivo 슬라이더 썸

Question

저는 nivo-slider를 사용하고 있습니다. 축소판을 만들려고 노력하고 있지만 제대로 작동하지 않습니다.

Nino Slider Demo

Here is the tutorial on how to,하지만 난 일하러 어차피 : 여기

내가 가진 것입니다.

Nive Slider Website

나는 어떤 사람이 내가 무엇을 볼 수 있기를 바랍니다 잘못된

Answer 1

NIVO 사이트 썸네일이 작동하는 방법을 보여줍니다 새로운 데모가 있습니다 http://nivo.dev7studios.com/demos/

관련 예는 다음과 CSS 스타일을 가지고를 :

#slider3 { 
    margin-bottom:110px; 
} 
#slider3 .nivo-controlNav { 
    position:absolute; 
    left:185px; 
    bottom:-70px; 
} 
#slider3 .nivo-controlNav a { 
    display:inline; 
} 
#slider3 .nivo-controlNav img { 
    display:inline; 
    position:relative; 
    margin-right:10px; 
    -moz-box-shadow:0px 0px 5px #333; 
    -webkit-box-shadow:0px 0px 5px #333; 
    box-shadow:0px 0px 5px #333; 
} 
#slider3 .nivo-controlNav a.active img { 
    border:1px solid #000; 
} 

참고 방법 모두 a와 img 태그는 .nivo-controlNav 클래스에서 display: inline을 사용합니다. 이것이 작동하도록 만드는 열쇠입니다.

다른 속성은 탐색 모음을 배치하고 그림자를 추가하는 것입니다.

Answer 2

이미지 축소판을 올바르게 작동시키는 데 많은 어려움을 겪었습니다. 이것은 나를 위해 일했다. my blog entry의 전체 세부 정보

는

.nivo-controlNav a { 
display:inline; /* Display the thumbnail link element */ 
} 

#slider .nivo-controlNav img { 
display:inline; /* Un-hide the thumbnail image element */ 
position:relative; 
margin: 10px 10px 0 0; /* Provide some white space around the thumbs */ 
} 

#slider .nivo-controlNav { 
position: absolute; 
top: 600px; /* 600px is the height of our images in the slider */ 
} 

(다른 핵심 NIVO CSS의 시트 아래 링크에 포함)로드 마지막으로이 CSS 스타일을 추가하고 NIVO를 호출 할 때이 매개 변수를 설정하는 것을 잊지 마세요 :

$('#slider').nivoSlider({ 
controlNav:true, /* Display the control navigation */ 
controlNavThumbs:true, /* Display thumbnails */ 
controlNavThumbsFromRel:true, /* Source thumbnails from rel attribute */ 
}); 

Answer 3

테마 'default.css'가 img 스타일과 충돌한다는 것을 발견했습니다 (자습서에 명시된 바와 같이). 다음과 같은 클래스 default.css에서 CSS 스타일을 주석 처리해야합니다

#slider .nivo-controlNav { 
    position:absolute; 
    bottom:-70px; /* Put the nav below the slider */ 
} 
#slider .nivo-controlNav img { 
    display:inline; /* Unhide the thumbnails */ 
    position:relative; 
    margin-right:10px; 
} 

내가 너무 문제가 있었다 : 자신의 tutorial에서 언급 한 바와 같이,

.theme-default .nivoSlider img 
.theme-default .nivoSlider a 
.theme-default .nivo-controlNav 
.theme-default .nivo-controlNav a 
.theme-default .nivo-controlNav a.active 

을, 당신은이 스타일을 추가 할 필요가 이걸로 누군가가 도움이되기를 바랍니다.

Answer 4

내 미리보기 이미지가 어디에 있는지 찾는 데 많은 어려움을 겪었습니다. 마침내 그들에게 "절대적인"자세를 부여함으로써 그들을 발견했고 결국 슬라이드 쇼의 중간에 나타났습니다. :)

그러나 나는 그들이 표시되는 방식을 정말 좋아하지 않기 때문에 필요한 빠른 수정을했습니다. 스크립트를 약간 편집하십시오.

jquery.nivo.slider.

var thumbnails = $("#thumbnails"); // this is where your thumbnails will be 

다음이 찾을 : JS 파일의 시작 부분이 추가 찾기

//Add Control nav 
if(settings.controlNav){ 
    var nivoControl = $('<div class="nivo-controlNav"></div>'); 
    slider.append(nivoControl); 

을 그리고

//Add Control nav 
if(settings.controlNav){ 
    var nivoControl = $('<div class="nivo-controlNav"></div>'); 
    thumbnails.append(nivoControl); 

로 대체이 :

$('.nivo-controlNav a', slider).live('click', function(){ 

것은 교체 다음을 포함합니다 :

$('.nivo-controlNav a', thumbnails).live('click', function(){ 

은 다음 페이지에 somewhre을 배치, 당신은 물론

이 개선 많이 수행 할 수 있습니다 :) 완료,하지만 내가 말한대로 빠른 수정합니다. Nivo 슬라이더의 다음 버전에서 축소판을 다른 위치에 배치 할 수 있다면 좋을 것입니다. 이 도움이

희망)