bxslider with number pagers

1 Views

I have a slider which i want to use numbers instead of bullets. Also I want to numbers to slide.

Code is following , section in wordpress:

Read More
<!-- Begin News Slider -->
        <?php $loop = new WP_Query( array( 'post_type' => 'news', 'posts_per_page' => 25 ) ); ?>
        <div class="news-slider-container">
            <div class="news-slider-content">

                <ul class="bxslider">
                    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?> 
                    <li>
                        <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( '%s', 'foo' ), the_title_attribute( 'echo=0' ) ); ?>">
                            <div class="news-thumb"><?php the_post_thumbnail(''); ?></div>
                            <p><?php the_title(); ?></p>
                        </a>
                    </li>
                    <?php endwhile; ?>
                </ul> 
            </div>
        </div>
        <script type="text/javascript">
            $('.bxslider').bxSlider({
                auto: true,
                pager: 'short'
            });
        </script>

I didnt see any option for numbers as for pager.

how can i do it?

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You can customize the css:

    .bx-wrapper .bx-pager {
    font-size: 12px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    width: 22px;
    height: 21px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    text-indent: 0;
    background-color: #ffffff;
    border: 1px solid #dddddd;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a:focus {
    background-color: #f5f5f5;
    text-decoration: none;
}
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: rgb(255, 173, 198);
}

    if you use Chrome Dev Tool it’s quite easy.