当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How to remove pagination from slider in jquery?

问题描述:

Here is the script for slider:

<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>

above script added in head section and also these

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="js/slides.min.jquery.js"></script>

included in head tag.

Here is the jsfiddle link: http://jsfiddle.net/j88u02o2/

In the above i have added html and slides.min.jquery.js file.

When i run above all codes, pagination displayed. but i don't need .. so i tried to remove it.. but i can't. still it shows like numbers..

my page look like this: http://s28.postimg.org/rs8wlvmwt/Untitled_1.png

And i need, working of slideshow like this link http://securedcommunications.com/

Can anybody help me to achieve this one.

Thanks in advance.

网友答案:

I tried pagination setting and set to false

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

but it didnt work , so better solution is use display none to its wrapper .

Demo

.pagination{
    display:none;
}

Update

As per new Update and new JS slider , Here is DEMO

What I did is ->

$(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>

And add 2 JS files in

  1. http://securedcommunications.com/Include/js/cross-slide.js
  2. http://securedcommunications.com/Include/js/jquery-easing.js
分享给朋友:
您可能感兴趣的文章:
随机阅读: