How to change the navigation control numbers to bullets in Anything Slider

[neovantage]

Hi,
I am using anything slider in my client website. What i am facing that i have numbers in navigation control. I want to change the navigation numbers to bullets. Can some one guide me how can i do that.

Here is the URL of my work.

Kindly help me out to sort the problem. I will be very grateful.

Thanks in Advance

That's not a hard coded thing.
Please have a look on my code. May be then you will get the idea of how to do....

<script type="text/javascript">
        $(function(){
            $('#slider').anythingSlider({
                height: '573',
                expand: true,
                startStopped: false,
                resizeContents: true,
                pauseOnHover: true,
                buildArrows: false,
                autoPlayLocked: false,
                enableKeyboard: true,
                hashTags: false,
                navigationFormatter:function(i,panel){
                    return'<img src="images/slider/slider-item-'+['1','2','3','4','4'][i-1]+'-thumb.jpg" alt="" />';
                }
            })
            .anythingSliderFx({
                '.slider-caption-top':['caption-Top','300px','400','easeOutExpo'],
                '.slider-caption-left':['caption-Left','300px','400','easeInQuad'],
                '.slider-caption-right':['caption-Right','300px','400','easeInQuad'],
                '.slider-caption-bottom':['caption-Bottom','300px','400','easeOutExpo']});
                $(".thumbNav").hide();
                $('#slider-wrapper').hover(function(){
                    //$(".slideforward").stop(true,true).fadeIn();
                    //$(".slidebackward").stop(true,true).fadeIn();
                    $(".thumbNav").stop(true,true).fadeIn();
                },function(){
                    //$(".slideforward").fadeOut();
                    //$(".slidebackward").fadeOut();
                    $(".thumbNav").fadeOut();
                });
                //$(".slideforward").click(function(){$('#slider').data('AnythingSlider').goForward();});
                //$(".slidebackward").click(function(){$('#slider').data('AnythingSlider').goBack();});
        });
        </script>
 
 

HTML Code

<div id="slider-wrapper" class="fluid">
            <!--start slider images-->
            <ul id="slider">                                           
                <li>
                    <div class="slider-item item_1">
                    <!--start slider 1 caption -->
                    <div class="slider-caption-left">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure.</p>
                        <a href="javascript:void(0);">More</a>
                    </div>
                    <!--end slider 1 caption -->
                    </div>
                </li>                 
                <li>
                    <div class="slider-item item_2">
                        <!--start slider 2 caption -->
                        <div class="slider-caption-bottom caption-content">
                            <p>
                                <span>the perfect</span>
                            </p>
                            <p class="pictured">
                                <strong>photography slider</strong>
                            </p>
                        </div>
                        <!--end slider 2 caption -->
                    </div>
                </li>
                <li>
                    <div class="slider-item item_3">
                        <!--start slider 3 caption -->
                        <div class="slider-caption-top caption-content">
                            <p>
                                <span>Boost Your Creativity</span>
                            </p>
                            <p class="pictured">
                                <strong>We blow your Mind</strong>
                            </p>
                        </div>
                        <!--end slider 3 caption -->
                    </div>
                </li>
                <li>
                    <div class="slider-item item_4">
                    <!--start slider 4 caption -->
                        <div class="slider-caption-right caption-content">
                            <p>
                                <span>Colors of Life</span>
                            </p>
                        </div>
                    <!--end slider 4 caption -->
                    </div>
                </li>
                <li>
                    <div class="slider-item item_5">
                    <!--start slider 4 caption -->
                        <div class="slider-caption-right caption-content">
                            <p>
                                <span>Colors of Life</span>
                            </p>
                        </div>
                    <!--end slider 4 caption -->
                    </div>
                </li>
            </ul>
            <!--end slider images-->
            <!--slider navigation-->
            <div class="pauseButton"></div>
            <!--end slider navigation-->                
        </div>
 

CSS Code

div.anythingSlider {
    display: block;
    width: 700px;
    height: 573px;
    margin: 0 auto;
    overflow: hidden; /* needed for Opera and Safari */
}
.nextButton, .prevButton {
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 75px;
    margin:0;
    cursor:pointer;
    display: none;
    background: url(../images/slider_controls.png) no-repeat;
}
.pauseButton, .playButton {
    height:19px;
    width: 24px;
    bottom: 10px;
    position:absolute;
    cursor:pointer;
    overflow: hidden;
    margin:0;
    padding:0;
    display: none;
}
.nextButton {
    right: 0;
    background-position: 0 0;
    width: 30px;
    height: 415px;
}
.nextButton:hover {
    right: 0;
    background-position: 0 -420px;
    width: 30px;
    height: 415px;
}
.prevButton {
    left: 0;
    background-position: 0 -936px;
    width: 30px;
    height: 415px;
}
.prevButton:hover {
    left: 0;
    background-position: 0 -1356px;
    width: 30px;
    height: 415px;
}
.pauseButton {
    left:50%;
    background-position: 0 -840px;
    width: 24px;
    height: 19px;
}
.pauseButton:hover {
    left:50%;
    background-position: 0 -864px;
    width: 24px;
    height: 19px;
}
.playButton {
    left:50%;
    background-position: 0 -888px;
    width: 24px;
    height: 19px;
}
.playButton:hover {
    left:50%;
    background-position: 0 -912px;
    width: 24px;
    height: 19px;
}
div.anythingSlider .start-stop {
    display:none !important;
}
div.anythingSlider .thumbNav {
    padding: 0;
    position: absolute;
    top: 538px;
    margin-right: -80px;
    right: 50%;
    display: none;
}
div.anythingSlider .thumbNav li {
    display: inline;
    margin-left: 10px;
}
div.anythingSlider .thumbNav a{
    display: inline-block;
    text-decoration: none;
    height: 17px;
    width: 17px;
    line-height:17px;
    background-repeat: repeat-x;
    text-align: center;
    outline: 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;    
    padding: 2px;
    font-size: 10px;
}
 
/**** DO NOT CHANGE BELOW THIS LINE ****/
/* anythingSlider viewport window */
div.anythingSlider .anythingWindow {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
div.anythingSlider {
    position: relative;
    padding: 0px;
}
/* anythingSlider base UL */
ul.anythingBase {
    background: transparent;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
ul.anythingBase li.panel {
    background: transparent;
    display: block;
    overflow: hidden;
    float: left;
    padding: 0;
    margin: 0;
}
.slidertip{
    outline: none;
    position: relative;
    text-decoration: none !important;
}
span.slidertip { display:inline-block; /* IE trick */ }
.slidertip:hover .tooltip{
    opacity:1 !important;
    visibility:visible;
}
.tooltip{
    padding-top: 8px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    position:absolute;
    opacity:0;
    text-shadow:1px 1px 0 rgba(255, 255, 255, 0.4);
    visibility:hidden;
    white-space:nowrap;
    width:88px !important;
    white-space:normal !important;
    background: url(../images/slidertip-bg.png) no-repeat;
    z-index:9999;
    height: 106px;
}
.tooltip.center{
    left:-48px;
    margin-left:50%;
    right:auto;
}
.tooltip.top{
    bottom:100%;
    margin-bottom:0px;
    top:auto;
}
#slider-wrapper {
    position:relative !important; /*position must be relative*/
    margin-bottom:0;
    min-height:415px;
    overflow:hidden;
}
.slider-item {
    display:block;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
    min-height: 415px;
    width: 669px;
}
.slide1-content{
    background: url(../images/slide1-effect.png) no-repeat 150px 50px;
    width: 669px;
    height: 514px;
}
/* Caption Directions */
.slider-caption-top {
    top: -275px;
    position: absolute;
    left: 50%;
    margin-left: -480px;
}
.slider-caption-left {
    position: absolute;
    left: -50%;
    margin-left: -150px;
    top: 152px;
    width: 230px;
}
.slider-caption-right {
    position: absolute;
    right: -50%;
    margin-right: -480px;
    top: 125px;
}
.slider-caption-bottom {
    bottom: -275px;
    position: absolute;
    left: 50%;
    margin-left: -480px;
}
.caption-content {
    text-shadow:1px 1px 0px #000;
    letter-spacing:1px;
}
.caption-content span, .caption-content a.primary {
    float: left;
}
.caption-content a.primary {
    clear: both;
    display: block;
    position: relative;
}
.caption-content span {
    clear: both;
    color: #f5f5f5;
}
.caption-content strong {
    float: left;
    clear: left;
    padding: 5px 9px 5px 9px;
}
.caption-content p {
    float: none;
}
.caption-content p.pictured {
    margin-bottom: 0;
}
 

[Dormilich]

this where you have 1 2 3 4 5 ?

change the text in the links.

[Dormilich]

then I’d say it’s coded into the anythingSlider library.

[neovantage]

Yes you were right. In order to change the numbers to bullets we have to use the theme minimalist-round and the relevant css.

Thanks again