jQuery cycle2 호출기가 작동하지 않습니다.

cycle2 호출기를 작동시키기 위해 모든 것을 시도했지만 아무 것도 시도하지 않았습니다. 데모 페이지에서 예제를 복사하여 붙여 넣었습니다. 코드를 여기에 포함 시켰습니다. 아주 작습니다. cycle.css 파일은 수정되지 않은 데모에서 나온 CSS 파일의 정확한 사본입니다.jQuery cycle2 호출기가 작동하지 않습니다.

증상은 무엇입니까? 호출기는 페이지의 왼쪽에 위치한 매우 작은 검은 색 탄환으로 나옵니다. 나는 무엇을 기대 했는가? 데모처럼 중앙에 배치 된 더 큰 색상의 글 머리 기호입니다.

다른 게시물을 찾기 위해 높거나 낮았지만 답변을 찾지 못했습니다. 누구든지 도와주세요. 그 중 일부를하고 있었다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<!-- Stylesheets --> 
<link rel=stylesheet href="http://fonts.googleapis.com/css?family=Acme"> 
<link rel=stylesheet href="http://www.malsup.com/jquery/cycle2/site.css"> 
<link rel=stylesheet href="http://www.malsup.com/jquery/cycle2/demo/demo-slideshow.css"> 

<!-- Javascripts --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://malsup.github.com/jquery.cycle2.js"></script> 


</head> 

<body> 


<br><br> 

<div class="example-pager"></div> 
<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz 
    data-cycle-timeout=2000 
    data-cycle-pager=".example-pager" 
    > 
    <!-- empty element for pager links --> 
    <div class="cycle-pager"></div> 
    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg"> 
    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg"> 
    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg"> 
    <img src="http://jquery.malsup.com/cycle2/images/p4.jpg"> 
</div> 
<div class="example-pager"></div> 

<br><br> 


</body> 

</html>

추가 정보 더, 나는 site.css에 뭔가가 깨달았다 탐험 후 : 아래 http://school4kids.org/test-cycle2.asp

코드 : 당신은 내가 무엇을보고보고 싶은 경우 여기에 URL을 그 파일 없이는 마법이 작동하지 않습니다. 나는 그것을 최소한으로 내 렸습니다. (제 자신의 스타일을 메시지로 전하지 않기를 바랬습니다) 그리고 적절한 위치에 총알을 가져 오는 데 필요한 부분을 발견했습니다. 이것을 이전 솔루션과 결합하면 모든 것이 작동합니다. 지금 데모에서 스타일 파일 중 하나를 포함하지 않으며, 단지 다음이 포함됩니다 내 자신의 CSS 파일을 만든 : (당신의 HTML의 head 태그에 넣어) CSS는 다음

.cycle-pager { display: block; } 

.example-pager { text-align: center; width: 100%; z-index: 500; top: 10px; overflow: hidden; font-family: Arial; font-size: 14px; line-height: 18px; color: #333; } 
.example-pager span { font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ddd; } 
.example-pager span.cycle-pager-active { color: #D69746;} 
.exmaple-pager > * { cursor: pointer;}

출처

2013-11-21 Richard

나는 이것을 가지고 놀았습니다. 이제 실제 데모 CSS와 연결되는 것을 볼 수 있습니다. 원하는 경우 코드의 링크를 따라 CSS 파일을 검색 할 수 있습니다. 내가 말했듯이, 이것은 공식적인 CSS 파일입니다. – Richard

사용. 예상대로 작동합니다.

Demo

CSS :

.external { position: static } 
.external > * { margin: 0 5px } 
.cycle-pager { display: block; } 

.example-pager { text-align: center; width: 100%; z-index: 500; top: 10px; overflow: hidden; } 
.example-pager span { font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ddd; } 
.example-pager span.cycle-pager-active { color: #D69746;} 
.example-pager > * { cursor: pointer;}

출처

2013-11-21 10:45:05 nik

감사합니다. 고맙습니다. 어떤 마술이 그 마술을 했습니까? 데모 CSS가 작동하지 않는 이유에 대해 혼란 스럽습니다. – Richard

이 스타일은 데모 css에는 없지만 대신 데모 페이지 html의 head 태그에 있습니다. 사용자 정의 목적 때문일 수 있습니다. – nik

더 탐험 한 후에 site.css에 마법의 일부를 수행한다는 것을 알았습니다. 그 파일이 없으면 제대로 작동하지 않았습니다. 나는 그것을 최소한으로 내 렸습니다. (제 자신의 스타일을 메시지로 전하지 않기를 바랬습니다) 그리고 적절한 위치에 총알을 가져 오는 데 필요한 부분을 발견했습니다. – Richard

Nikhil의 대답은 나를 위해 작동하지 않았다, 그러나 나를 CSS로 더 파고 더 많은 것을 시도되었다.

내 문제는 호출기가 단순히 나타나지 않았다는 것입니다. 이미지 아래에 숨겨진 것처럼 보였습니다.

마지막으로 나는 overflow: hidden에서 으로 설정하고 광고 한대로 작동합니다.

출처

2014-03-17 17:59:33 Matt

나는 여러 해 동안 해결책을 찾고있었습니다. "오버플로 설정 : 오버플로 숨김 : 표시"가 트릭을 수행했습니다. 공유해 주셔서 감사합니다. – Systembolaget

jQuery cycle2 호출기가 작동하지 않습니다.

답변

관련 문제