我正在使用AnythingSlider并完成与示例页面完成相同的操作,除了示例页面正在工作,而我的不是。
我知道脚本至少在运行,因为它会创建一些带有“克隆”类的额外<li>
标签,但没有任何动作。
文档HEAD中的JavaScript:
$(function () {
$('#slider').anythingSlider({
easing: "swing", // Anything other than "linear" or "swing"
// requires the easing plugin
autoPlay: true, // turns off the entire FUNCTIONALitY
startStopped: false, // force it to start stopped if autoplay is on
delay: 3000, // time between slide transitions in AutoPlay
animationTime: 600, // time the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: false, // if true builds and
// list of anchor links to link to each slide
pauseOnHover: false, // pause on hover if true and autoPlay enabled
startText: "Start", // Start text
stopText: "Stop", // Stop text
navigationFormatter: null // Details at the top of the file on this use
});
});
(jQuery and the plugin are externally called)
HTML
<div class="container_16 slider" id="slider">
<div class="wrapper">
<ul>
<li>
<?php echo html::image('resources/images/featuredweb.gif', array('alt' => ' ', 'class' => 'slider-icon')); ?>
<?php echo html::image('resources/images/website.gif', array('alt' => ' ', 'class' => 'imgborder')); ?>
<div class="content">
<h3>D'Portfolio Theme</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque massa tortor, fermentum ut pellentesque eu, mollis vitae lectus. </p>
<strong>Client Name : john doe</strong><br />
<strong>Requirement : php / Mysql / Adobe / CSS</strong><br />
</div>
</li>
<li>
<?php echo html::image('resources/images/featuredweb.gif', array('alt' => ' ', 'class' => 'slider-icon')); ?>
<?php echo html::image('resources/images/website.gif', array('alt' => ' ', 'class' => 'imgborder')); ?>
<div class="content">
<h3>D'Portfolio Theme</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque massa tortor, fermentum ut pellentesque eu, mollis vitae lectus. </p>
<strong>Client Name : john doe</strong><br />
<strong>Requirement : php / Mysql / Adobe / CSS</strong><br />
</div>
</li>
<li>
<?php echo html::image('resources/images/featuredweb.gif', array('alt' => ' ', 'class' => 'slider-icon')); ?>
<?php echo html::image('resources/images/website.gif', array('alt' => ' ', 'class' => 'imgborder')); ?>
<div class="content">
<h3>D'Portfolio Theme</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque massa tortor, fermentum ut pellentesque eu, mollis vitae lectus. </p>
<strong>Client Name : john doe</strong><br />
<strong>Requirement : php / Mysql / Adobe / CSS</strong><br />
</div>
</li>
</ul>
</div>
</div>
插件示例页面位于:http://css-tricks.com/examples/AnythingSlider/
我在这里撕扯我的头发。
答案 0 :(得分:1)
我自己没有使用过AnythingSlider插件,但我注意到你的类属性与他们的属性不同。
你有: <div class="container_16 slider" id="slider">
他们有
<div class="anythingSlider">
尝试将您的(以及相关的CSS)更改为
<div class="container_16 anythingSlider" id="slider">
或
<div class="container_16 slider anythingSlider" id="slider">
我用他们的css(而不是你的)测试了你的html,它正在运行。内容正在按预期移动。
我建议使用他们的示例css并将其修改为您想要的样式,因为插件似乎依赖于它。