Using bxslider along with numerical pagination controls

I need help with implementing numbers instead of bullets in my slider. I also want the numbers to slide along with the content.

Here is the code snippet for the slider section in 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>

I have tried looking for an option to add numbers as the pager, but couldn't find any. Can someone guide me on how to achieve this?

Answer №1

To personalize the appearance of your website, you have the option to adjust 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);
}

When using Chrome Dev Tool, adjusting these styles is straightforward.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a code for divs into CSS caused the navigation bar to be completely obliterated

Initially, my menu was perfectly styled with the following CSS code in my css file: ul.Menu { list-style-type: none; margin: 10px; overflow: hidden; background-color: #ffffff; border-style: solid; border-color: #e9055c; border-width: 2px; font-weight: bol ...

The Mystery of Bootstrap 4 Column Sequence

I was able to achieve this layout using Bootstrap 3, but I am not sure how to implement the same setup with Bootstrap 4 (4.1). My goal is to have a column displaying C beneath A, and another column displaying B. However, on mobile devices, I want all thre ...

Top method for filling an array with strings

Imagine having an array called 'newArray'. var newArray = []; You can add strings to it like this: var thisString = 'watch'; newArray.push(thisString); Now, if you want to have 50 instances of the 'thisString' in the newAr ...

Remove all styling applied through Javascript

If we consider the following scenario: var e = document.getElementById("someElement"); e.style.borderColor = "gold"; e.style.background = "yellow"; e.style.padding = "5px"; // more style changes made through javascript It's possible that additional ...

Resolving problems with jQuery auto-populating select dropdowns through JSON data

I am facing an issue with auto-populating a select dropdown using jQuery/JSON data retrieved from a ColdFusion CFC. Below is the code snippet: $(function(){ $("#licences-add").dialog({autoOpen:false,modal:true,title:'Add Licences',height:250,wid ...

Contrasting runtime.sendMessage and port.postMessage operations

Currently, I am in the process of developing a Chrome extension and planning to incorporate message passing between my background page and content script. This will involve three messages exchanged in a synchronized order (content -> background -> co ...

Guide: Extracting text content from HTML using Selenium WebDriver in Python utilizing CSS selectors

Seeking assistance in extracting text from the following HTML code. Specifically looking to retrieve '383' as a text using a CSS selector within this HTML snippet. <td align="right" style="background-color: rgb(147, 191, 179); c ...

Error: Trying to call an undefined function

Having trouble with an error on this line: $("#register-form").validate. Can anyone offer assistance? Furthermore, if I write this script, how should I incorporate it into the form? Will it function without being called? <script type="text/javascript ...

Guide to obtaining specific top elements from an array using JavaScript

I'm seeking assistance with sorting arrays in JavaScript. Here is an example of a sorted array: mainArray : [25 20 20 20 18 17 17 15 12 12 10 5 5 ] The mainArray may contain duplicate values. A. Dealing with duplicates Based on user input, I need ...

next.js will display a "not-found.tsx" page if the image path is invalid

Can anyone help me with this issue I'm facing in my Next.js project? I have a page where an image from the public folder is displayed using app router. But if I go directly to the URL of the image and purposely mess up the path, Next.js shows the not- ...

What is the best way to handle CSS and JavaScript for sub-templates when utilizing only a templating system?

When working with various templating systems in different languages, I often find myself facing the same question. First and foremost, The crux of the matter I am looking to implement a sub-template that includes a specific UI component which may be disp ...

Use the Nodejs HTTP.get() function to include a custom user agent

I am currently developing an API that involves making GET requests to the musicBrainz API using node.js and express. Unfortunately, my requests are being denied due to the absence of a User-Agent header, as stated in their guidelines: This is the code sn ...

Create a visually engaging book reader with the power of jQuery and images

For hours, I've been attempting to develop an online Comic Book reader to load my images. Everything is functioning correctly, except for a counter using an increment method that just won't work - reducing the increments breaks the function. Is ...

Using regular expressions in JavaScript, we can separate a paragraph into individual sentences

Hey there! I'm currently working on a project that requires extracting sentences from a paragraph using regex in JavaScript. Unfortunately, my attempts to achieve this have resulted in syntax errors as I have tried methods used in other programming la ...

Unable to retrieve value - angularJS

An AngularJS application has been developed to dynamically display specific values in an HTML table. The table consists of six columns, where three (Work Name, Team Name, Place Name) are fixed statically, and the remaining three columns (Service One, Servi ...

The challenge of aligning widgets in bootstrap panels across different browsers

Incorporating angularjs and bootstrap3, I'm in search of the best way to center widgets within a panel and achieve responsive behavior. Interestingly, the results vary across browsers, particularly in Firefox. Within my code, I have 4 column divs str ...

Filtering objects in JavaScript using a technique similar to list comprehension

I'm dealing with a basic array structure that resembles: obj = {1:false, 2:true, 3:true} My goal is to extract an array containing all the keys in the object that have a value of true. In Python, you can achieve this easily using: >>> [ke ...

Unable to modify SVG color to a white hue

I am currently working on an Angular project where I am utilizing SVG to display some icons. These icons originally have a default grey color, but I want them to change to white when hovered over. Interestingly, while changing the color to red, green, or y ...

"Learn how to seamlessly submit a form without reloading the page and send data back to the same page using Node and Express

I've already reviewed a few questions on this platform. They all focus on submitting post requests, but I believe the process should be similar for get requests as well. Therefore, I made modifications to my code to accommodate get requests. However, ...

Activate current event on newly added elements

Is it possible to have both blur and keypress(13) trigger the same action on an appended element? I thought using trigger() would work, but it's not. Hopefully, I'm just missing something obvious. $(document).ready (function() { $("#btn").cli ...