如何从 jquery 中的滑块中删除分页？

Question

这是滑块的脚本：

<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 链接：http://jsfiddle.net/j88u02o2/

在上面我添加了 html 和 slides.min.jquery.js 文件。

当我在所有代码之上运行时，会显示分页。但我不需要..所以我试图删除它..但我不能。它仍然显示为数字..

我的页面如下所示：http://s28.postimg.org/rs8wlvmwt/Untitled_1.png

我需要，像这个链接 http://securedcommunications.com/ 那样工作幻灯片

谁能帮我实现这一目标。

提前致谢。

Answer 1

我尝试了分页设置并设置为 false

 pagination: {
  active: false
    // [string] Can be either "slide" or "fade".
 },
 .......................

但它没有用，所以更好的解决方案是在其包装器中使用 display none。

Demo

.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文件

1. http://securedcommunications.com/Include/js/cross-slide.js
2. http://securedcommunications.com/Include/js/jquery-easing.js