如何从 jquery 中的滑块中删除分页?
How to remove pagination from slider in jquery?
这是滑块的脚本:
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
上面的脚本添加到 head 部分,还有这些
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
包含在 head 标签中。
这是 jsfiddle link:http://jsfiddle.net/j88u02o2/
在上面我添加了 html 和 slides.min.jquery.js 文件。
当我运行以上所有代码时,分页显示。但我不需要..所以我试图删除它..但我不能。仍然显示数字..
我的页面是这样的:http://s28.postimg.org/rs8wlvmwt/Untitled_1.png
我需要像这样处理幻灯片 link http://securedcommunications.com/
谁能帮我实现这个。
提前致谢。
我尝试了分页设置并设置为 false
pagination: {
active: false
// [string] Can be either "slide" or "fade".
},
.......................
但它没有用,所以更好的解决方案是使用显示 none 到它的包装器。
.pagination{
display:none;
}
更新
根据新的更新和新的 JS 滑块,Here is DEMO
我所做的是 ->
$(function() {
$('#slides').crossSlide({
speed: 40,
fade: 1
}, [
{ src: 'http://securedcommunications.com/Include/Images/home/photo-2.jpg', dir: 'up', alt: 'Our Business is to Encrypt and Secure Your Communications', href: '#' },
{ src: 'http://securedcommunications.com/Include/Images/home/photo-2.jpg', dir: 'down', alt: 'The Solution for Secured Communications and Privacy.', href: '#' }
/* */
], function(idx, img, idxOut, imgOut) {
if (idxOut == undefined) {
if(idx == 0 || idx == 3 || idx == 6 || idx == 9){
document.getElementById('crossSlideCaption').style.marginTop = '-430px';
document.getElementById('crossSlideCaption').style.marginLeft = '-485px';
}else if(idx == 1 || idx == 4 || idx == 7 || idx == 10 || idx == 12){
document.getElementById('crossSlideCaption').style.marginTop = '-280px';
document.getElementById('crossSlideCaption').style.marginLeft = '-100px';
}else{
document.getElementById('crossSlideCaption').style.marginTop = '-52px';
document.getElementById('crossSlideCaption').style.marginLeft = '-485px';
};
$('div.caption').text(img.alt).animate({ opacity: 1.0 })
} else {
$('div.caption').animate({ opacity: 0 })
}});
$('div.caption').show().css({ opacity: 0 })
});
HTML
<div id="container">
<div id="example">
<div id="slides" style="width:970px;height:430px;"></div>
<div id="" class="" style="position:relative; width:970px; margin:auto;" align="">
<div id="crossSlideCaption" class="caption">
</div>
</div>
</div>
并在
中添加2个JS文件
这是滑块的脚本:
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
上面的脚本添加到 head 部分,还有这些
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
包含在 head 标签中。
这是 jsfiddle link:http://jsfiddle.net/j88u02o2/
在上面我添加了 html 和 slides.min.jquery.js 文件。
当我运行以上所有代码时,分页显示。但我不需要..所以我试图删除它..但我不能。仍然显示数字..
我的页面是这样的:http://s28.postimg.org/rs8wlvmwt/Untitled_1.png
我需要像这样处理幻灯片 link http://securedcommunications.com/
谁能帮我实现这个。
提前致谢。
我尝试了分页设置并设置为 false
pagination: {
active: false
// [string] Can be either "slide" or "fade".
},
.......................
但它没有用,所以更好的解决方案是使用显示 none 到它的包装器。
.pagination{
display:none;
}
更新
根据新的更新和新的 JS 滑块,Here is DEMO
我所做的是 ->
$(function() {
$('#slides').crossSlide({
speed: 40,
fade: 1
}, [
{ src: 'http://securedcommunications.com/Include/Images/home/photo-2.jpg', dir: 'up', alt: 'Our Business is to Encrypt and Secure Your Communications', href: '#' },
{ src: 'http://securedcommunications.com/Include/Images/home/photo-2.jpg', dir: 'down', alt: 'The Solution for Secured Communications and Privacy.', href: '#' }
/* */
], function(idx, img, idxOut, imgOut) {
if (idxOut == undefined) {
if(idx == 0 || idx == 3 || idx == 6 || idx == 9){
document.getElementById('crossSlideCaption').style.marginTop = '-430px';
document.getElementById('crossSlideCaption').style.marginLeft = '-485px';
}else if(idx == 1 || idx == 4 || idx == 7 || idx == 10 || idx == 12){
document.getElementById('crossSlideCaption').style.marginTop = '-280px';
document.getElementById('crossSlideCaption').style.marginLeft = '-100px';
}else{
document.getElementById('crossSlideCaption').style.marginTop = '-52px';
document.getElementById('crossSlideCaption').style.marginLeft = '-485px';
};
$('div.caption').text(img.alt).animate({ opacity: 1.0 })
} else {
$('div.caption').animate({ opacity: 0 })
}});
$('div.caption').show().css({ opacity: 0 })
});
HTML
<div id="container">
<div id="example">
<div id="slides" style="width:970px;height:430px;"></div>
<div id="" class="" style="position:relative; width:970px; margin:auto;" align="">
<div id="crossSlideCaption" class="caption">
</div>
</div>
</div>
并在
中添加2个JS文件