Slider2

Question

davy_yg 2 Posting Whiz

9 Years Ago

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
228 Views
1 Day Discussion Span
Latest Post 9 Years Ago Latest Post by gentlemedia

hericles 289 Master Poster

9 Years Ago

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

gentlemedia 803 Master Poster

9 Years Ago

Or set 'pager' to 'false'.

$('.bxslider').bxSlider({
  pager: false
});

http://bxslider.com/options#pager

gentlemedia 803 Master Poster

9 Years Ago

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 9 Years Ago by gentlemedia because: doctype

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

davy_yg 2 Posting Whiz · Answer 1 · 2015-10-02T08:42:42+00:00

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.

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 2 · 2015-10-02T08:59:01+00:00

Check what gentlemedia showed you, because your version is not identical.

davy_yg 2 Posting Whiz · Answer 3 · 2015-10-03T06:18:56+00:00

I almost forget which version did I use. I thought this one: http://flickity.metafizzy.co/

gentlemedia 803 Master Poster · Answer 4 · 2015-10-03T09:20:45+00:00

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.

davy_yg 2 Posting Whiz · Answer 5 · 2015-10-03T11:41:00+00:00

Anyway, any clue how to erase the 4 bullets or numbers?

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 6 · 2015-10-03T12:11:49+00:00

pritaeas 2,194 ¯\_(ツ)_/¯

9 Years Ago

Copy the code as it was showed to you.

davy_yg 2 Posting Whiz · Answer 7 · 2015-10-03T13:42:46+00:00

davy_yg 2 Posting Whiz

9 Years Ago

I did. I don't think it works correctly.