[英]Responsive slider is not working as expected
我正在尝试向我的网站添加响应式滑块。
我决定遵循代码http://responsiveslides.com/ 。 但是,当我在浏览器中测试代码-firefox时,图像没有移动,这意味着我只显示了固定的图像。
我希望有人可以根据我所做的事情向我指出我做错了什么。
我的html代码是:
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="img/banner01.jpg" alt="">
<p class="caption">This is a caption</p>
</li>
<li>
<img src="img/banner02.jpg" alt="">
<p class="caption">This is another caption</p>
</li>
<li>
<img src="img/banner03.jpg" alt="">
<p class="caption">The third caption</p>
</li>
</ul>
</div>
我在下面添加了javascript和链接:
<link rel="stylesheet" href="StyleSheet.css" type="text/css" />
<script src="jquery.js"></script>
<script src="responsive.js"></script>
<script>
$(function () {
// Slideshow 4
$("#slider4".rslides).responsive({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<script>
$(function () {
$("#slider4").responsive({
auto: true,
pager: false,
nav: true,
speed: 800,
namespace: "callbacks",
});
});
</script>
我的CSS是:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.callbacks_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks li {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.callbacks img {
display: block;
position: relative;
z-index: 1;
height: auto;
width: 100%;
border: 0;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
background: #000;
background: rgba(0, 0, 0, .8);
left: 0;
right: 0;
bottom: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes/themes.gif") no-repeat left top;
margin-top: -45px;
}
.callbacks_nav:active {
opacity: 1.0;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
对于jquery.js,我已从Jquery网站1.8.1.3复制并进行了相应的附加。
在我的文件中,我已经将其命名为sensitive.js。
我希望有人能告诉我哪里出错了,以使幻灯片按原样移动。
谢谢。
使用此方法,而不要使用包含相同元素的上述脚本。
$(function () {
$("#slider4").responsive({
auto: true,
pager: false,
nav: true,
speed: 800,
namespace: "callbacks"
});
});
尝试这个
您已初始化脚本两次,第一个在此行$("#slider4".rslides).responsive({
只需在脚本标记内添加以下脚本
$(function () {
$("#slider4").responsive({
auto: true,
pager: false,
nav: true,
speed: 800,
namespace: "callbacks"
});
})
也许把jQuery代码放在里面:
$(document).ready(function()
{
// code
});
也许只是不加载文档而已。 我猜不过。
您应调用responsiveSlides
Slides而不是responsive
因为响应是未定义的函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.