2
Jquery 모바일을 사용할 때 Nivoslider 이미지 애니메이션에 문제가 있습니다.Nivo 슬라이더 및 JQuery 모바일 - 페이지간에 전환 할 때 이미지가 표시되지 않습니다.
슬라이드 쇼를 여러 페이지에 표시하고 싶습니다. 페이지 1과 페이지 2 사이를 앞뒤로 클릭하면 이미지가 숨겨진 것처럼 보이고 아래로 미끄러 져 나타나야합니다. 문제는 가끔 발생하며 슬라이드 사이의 일시 중지와 관련이있는 것으로 보입니다.
NivoSlider 옵션 "manualAdvance : true"를 설정하면 문제가 해결됩니다. 이상적으로 나는 슬라이드 쇼가 자동이되도록 false로 설정하고 싶습니다.
CSS 문제인지 또는 JS 문제인지 확실하지 않습니까? 나는 모든 페이지에 슬라이드 쇼를 다시 시도 JQM의 pagechange 기능을 사용했습니다
Demo here: http://www.fando.com.au/jqm/demo_jqm.html
은 :
이 버그에 너무 오래 지출$(document).on("pagechange", function() {
$('[data-role="page"] #slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 500, // Slide transition speed
pauseTime: 4000, // How long each slide will show
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
startSlide: 0,
});
});
, 어떤 도움이 많이 감사합니다. 아래의 전체 코드는 nivo 슬라이더 데모 코드와 밀접하게 관련되어 있습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="/jqm/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" data-title="Title" id="page1">
<ul>
<li><a href="/jqm/demo_jqm.html#page1" >page 1</a></li>
<li><a href="/jqm/demo_jqm.html#page2" >page 2</a></li>
</ul>
<div class="theme-default">
<div id="slider"> <img src="/jqm/black_rock_property.jpg" alt="" /> <img src="/jqm/beaumaris_property.jpg" alt="" /> </div>
</div>
</div>
</div>
<div data-role="page" data-title="Title" id="page2">
<ul>
<li><a href="/jqm/demo_jqm.html#page1" >page 1</a></li>
<li><a href="/jqm/demo_jqm.html#page2" >page 2</a></li>
</ul>
<div class="theme-default">
<div id="slider"> <img src="/jqm/black_rock_property.jpg" alt="" /> <img src="/jqm/beaumaris_property.jpg" alt="" /> </div>
</div>
</div>
</div>
<script type="text/javascript" src="/jqm/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(document).on("pagechange", function() {
$('[data-role="page"] #slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 500, // Slide transition speed
pauseTime: 4000, // How long each slide will show
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
startSlide: 0,
});
});
</script>
</body>
</html>
내가 문제가 * startSlide 생각)
은 도움 여부를 알려줘 – user3123957