0

Hello,

I would like to erase the numbers list 1-4 in this sliders (Any clue how to ?) :

http://www.innovation.web.id/slider2/

slider2/index.html

<html> <head> <!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="jquery.bxslider.css" rel="stylesheet" /> <script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script> </head> <body> <ul class="bxslider"> <div style="background-color: #96928a; height: 400px;"> <li><center><div style="font-family: arial;"><h2>WHAT THEY SAY ABOUT ME</h2><img src="images/profile.jpg" width="220px"/></center><center><div style="width: 500px;">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</center></div></div></li></div> <div style="background-color: #96928a; height: 400px;"> <li><center><div style="font-family: arial;"><h2>WHAT THEY SAY ABOUT ME</h2><img src="images/pic4.jpg" width="220px"/></center><center><div style="width: 500px;">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</center></div></div></li></div> <div style="background-color: #96928a; height: 400px;"> <li><center><div style="font-family: arial;"><h2>WHAT THEY SAY ABOUT ME</h2><img src="images/pic4.jpg" width="220px"/></center><center><div style="width: 500px;">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</center></div></div></li></div> <div style="background-color: #96928a; height: 400px;"> <li><center><div style="font-family: arial;"><h2>WHAT THEY SAY ABOUT ME</h2><img src="images/pic4.jpg" width="220px"/></center><center><div style="width: 500px;">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</center></div></div></li></div> </div> </ul> </body> </html>

slider2/jquery.bxslider.css

/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
    position: relative;
    margin: 0 auto 60px;
    padding: 0;
    *zoom: 1;
}

.bx-wrapper img {
    max-width: 100%;
    display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    border:  5px solid #fff;
    left: -5px;
    background: #fff;

    /*fix other elements on the page moving (on Chrome)*/
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
        -ms-transform: translatez(0);
        -o-transform: translatez(0);
        transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
    width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url(images/bx_loader.gif) center center no-repeat #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

/* PAGER 

.bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-family: Arial;
    font-weight: bold;
    color: #666;
    padding-top: 20px;
}


.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    *zoom: 1;
    *display: inline;
} 

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #666;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #000;
}  */

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
    left: 10px;
    background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url(images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
    background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
    background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
    text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    background: url(images/controls.png) -86px -11px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
    background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url(images/controls.png) -86px -44px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
    background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #666\9;
    background: rgba(80, 80, 80, 0.75);
    width: 100%;
}

.bx-wrapper .bx-caption span {
    color: #fff;
    font-family: Arial;
    display: block;
    font-size: .85em;
    padding: 10px;
}
4
Contributors
10
Replies
27
Views
1 Year
Discussion Span
Last Post by gentlemedia
Featured Replies
  • Or set 'pager' to 'false'. $('.bxslider').bxSlider({ pager: false }); http://bxslider.com/options#pager Read More

  • Of course it works! And looking at the source code of that slider page of yours, I see you didn't added the option in the function. You have this: <script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> Which should be this: <script> $(document).ready(function(){ $('.bxslider').bxSlider({ pager: false }); }); </script> Oh... and usung a … Read More

0

Do you mean you want to hide the actual numbers themselves?
CSS:
.bx-default-page {display: none;}
If you're after something else I think you'll need to be more specific...

0

Yes, that's what I am trying to do. Hiding the actual number.

jquery.bxslider.css

.bx-default-page {display: none;} 

slider2/index.html

<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
  pager: false
});
</script>

I don't think it has any effect at all.

0

No, Pritaeas meant there is an error in your function. Compare yours with my example and spot the difference!

And your slider is the BXslider by the way hence the name of the function.

Edited by gentlemedia

1

Of course it works! And looking at the source code of that slider page of yours, I see you didn't added the option in the function.
You have this:

<script>
$(document).ready(function(){
    $('.bxslider').bxSlider();
});
</script>

Which should be this:

<script>
$(document).ready(function(){
    $('.bxslider').bxSlider({
        pager: false
    });
});
</script>

Oh... and usung a doctype is also recommended!

Edited by gentlemedia: doctype

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.