CODEWITHSUNDEEP
jqueryhtmlcssslideshow
user3273401
user3273401

Reputation: 45

jQuery Slide round button(pre-next) custom

http://wex.im/javascript/jquery-slider2

I used this source. This slide show Pre-Next button like this -> ●●... And I want to show button like this -> ①②...(Numbering + BG color)

Is this possible? If this is possible, should I fix what language(code?)? For example CSS, Jquery, HTML...

Button CSS code 

.jquery-slider-pages {
    overflow: visible;
    position: absolute;
    left: 5px;
    bottom: 5px;
    height: 20px;
    right: 5px;
}
.jquery-slider-page {
    overflow: hidden;
    position: relative;
    display: block;
    float: right;
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0;
    background: #999;
    cursor: pointer;
    opacity: 0.33;
    margin: 3px;
    behavior:url("https://dwp.konami/j-com/PIE.htc");
    border-radius: 6px;
    box-shadow: #333 0 0 2px;
}
.jquery-slider-page:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
}
.jquery-slider-page-current {
    opacity: 0.8;
    background: #1C1C1C;
}

button jQuery code

var _draw=function()
{
    $this.addClass('jquery-slider-sliding');
    if(settings.showProgress)
    {
        $this.find('.jquery-slider-page').removeClass('jquery-slider-page-current');
        $this.find('.jquery-slider-page:eq('+(_this.nextAll('.jquery-slider-element').length)+')').addClass('jquery-slider-page-current');
    }
    settings.slidebefore(_this,
    $this);

    if(settings.direction=='right')
    {
        _this.show().css('left',
        -settings.width);
    }
    else
    {   
        _this.show().css('left',
        settings.width);
    }

    _this.stop(true,true).animate(
    {'left':(settings.direction=='right'?'+=':'-=')+settings.width+'px'},
        {
            'duration':settings.fade,
            'complete':function()
            {
                settings.slideafter(_this,
                $this);
                $this.removeClass('jquery-slider-sliding');
            }
        }
    );

    if(_last)
    {
        _last.stop(true,true).animate({'left':(settings.direction=='right'?'+=':'-=')+settings.width+'px'},{'duration':settings.fade});
    }
};

HTML code

<div id='slider'>
<div id ='link'>
<a href='test.html'target ='_blank'>
TEST</a>
</div>
<div id ='link'>
<a href='test2.html'target ='_blank'>
TEST2</a>
</div>
</div>

Upvotes: 0

Views: 690

Answers (2)

nsthethunderbolt
nsthethunderbolt

Reputation: 2097

You can use some better slider than that, which does have better api and provides you more functionality.. This one will surely fulfill your need.. check it out.

Cycle plugin

and a demo on this which suits your needs..

http://jquery.malsup.com/cycle/int2.html

Upvotes: 1

himanshu
himanshu

Reputation: 1797

yes it can be done by the help of jquery here is a link of free slider download it and study JSSOR SLIDER

i think it will be of help

Upvotes: 1

Related Questions