jQuery cycle2 пейджер не работает

Я пробовал все возможное, чтобы заставить работать рабочий стол cycle2, но ничего, что я пробовал, не имеет никакого значения. Я скопировал и вставил пример с демонстрационной страницы, и я включил здесь код - он очень маленький. Файл cycle.css является точной копией файла CSS из демонстрации без каких-либо изменений.jQuery cycle2 пейджер не работает

Какой симптом? Пейджер выходит как очень маленькие черные пули, расположенные в левой части страницы. Что я ожидал? Большие цветные пули расположены в центре, как в демо.

Я искал высоко и низко для других сообщений, но не нашел ответа. Может кто-нибудь помочь, пожалуйста. Если вы хотите увидеть, что я вижу, то вот URL: http://school4kids.org/test-cycle2.asp

код ниже:

<!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>

ADDITION ИНФОРМАЦИЯ После более изучения, я понял, что что-то в site.css, что делает некоторые из магия и что без этого файла ничего не получилось. Я раздели его до минимума (я не хотел все это, так как он сообщал о моем собственном стиле) и обнаружил, что части, необходимые для получения пули в нужном месте. Объединяя это с предыдущим решением, а затем все работает. Я теперь не включают в себя какой-либо из стайлинга файлов из демки и создал свой собственный файл 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

Используйте следующие CSS (положить в голову тег в HTML). Он будет работать, как ожидалось.

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. Возможно, это связано с целью настройки. – nik

После изучения, я понял, что есть что-то в site.css, который делал некоторые из магии, и что без этого файла ничего не получилось. Я раздели его до минимума (я не хотел все это, так как он сообщал о моем собственном стиле) и обнаружил, что части, необходимые для получения пули в нужном месте. – Richard

ответ Нихилу не работал для меня, но это заставило меня копать больше в CSS и попробовать больше вещей.

Моя проблема заключалась в том, что пейджер просто не отображался - это было похоже на то, что оно было скрыто под изображениями.

И наконец, я установил overflow: hidden в overflow: visible и работал так, как было объявлено.

источник

2014-03-17 17:59:33 Matt

Я искал решение на века. Ваш «набор переполнения: скрытый до переполнения: видимый» сделал трюк. Большое спасибо за обмен! – Systembolaget

jQuery cycle2 пейджер не работает

ответ

Смежные вопросы