javascript - 带号码寻呼机的bxslider

我有一个滑块，我想使用数字而不是项目符号。我也想滑动数字。

代码如下，在WordPress中：

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

我没有看到寻呼机的任何数字选项。

我该怎么做？

最佳答案

您可以自定义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);
}

如果您使用Chrome开发工具，则非常简单。

关于javascript - 带号码寻呼机的bxslider，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15226538/