javascript - 带有数字寻呼机的 bxslider

Question

我有一个 slider ，我想使用数字而不是元素符号。我也想滑动数字。

代码如下，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>

对于寻呼机，我没有看到任何数字选项。

我该怎么做？

Answer 1

您可以自定义 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 Dev Tool，那将非常简单。