Tips for converting numerical values to visual elements in a JQUERY slider for images

I am looking to incorporate a similar image slider on my website, like the one showcased here: . However, I want the bottom content numbers to be replaced with smaller versions of the images in the slider instead.

Does anyone have any suggestions on how I can achieve this customization?

Answer №1

If you happen to extract their JS file and locate line #472, you will find that when the 'btn_numbers' property is true, numeric numbers are used; however, if it's false, they get converted to '●', resembling a small black circle. To utilize images for numbers instead, generate an image for every number and insert an

img_name = parseInt(i+1)+".jpg";
<img src=img_name+".jpg">

in place of the numerical counter. Although the code snippet above may not work immediately, it serves as a foundation. Given that the entire code operates within a loop, it will fetch an image corresponding to each created number.

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

Having trouble transferring information from the view (Razor) to the controller using an AJAX post request

Take a look at the controller method below: public ViewResult AddNewRow(ProjectBudgetModel model) { //Additional operations on the passed model before returning to the same view return View("AddNewProjectBudget", model); } Now, let's examine ...

What are the specific files I should modify for HTML/CSS in my Ruby application?

My application was initially created with an introduction from: http://guides.rubyonrails.org/getting_started.html I am now looking to add some color and style through CSS. I have located the JavaScript and CSS files, but I am unsure which file is respons ...

Using *ngFor with a condition in Angular 4 to assign different values to ngModel

I am new to Angular 4 and encountering an issue with using *ngFor in conjunction with HTML drop-down select and option elements. My categories array-object looks like this - categories = [ { id:1, title: 'c/c++'}, { id:2, title: 'JavaScri ...

Selector matching a descendant element in React styling

I am facing a challenge with using the direct descendant CSS selector within a React inline style element: <style>{` .something>div{ color: blue; } `}</style> While this works fine in development, in production React replaces > ...

Utilizing Backward and Forward Navigation with AJAX, JavaScript, and Window.History

TARGET Implement Ajax for fetching pages Utilize JavaScript to update the window URL Leverage Window History to preserve Ajax page for seamless forward-backward navigation without reloading the page Modify the Navigation bar's attributes (such as co ...

Problem with sending variable via AJAX

Hey everyone, I'm attempting to send form data along with an extra variable using AJAX. Here's the code snippet: function tempFunction(obj) { var data = $('form').serializeArray(); data.push( { no: $(obj).at ...

How to utilize the reduce method with an array of objects in JavaScript

Every week, a number of objects are delivered to me. Each object contains information such as date, hours, and other fields. I need to arrange these objects in an array based on the total hours for each day. Here is an example of the objects: var anArray ...

Extracting JSON data in PHP and presenting it in a tabular format

Below is a snippet of my HTML code, <html> <head> <script src="js/jquery.js"></script> </head> <body> <input type="text" name="query" id="queryBox"> <button id="load_basic" value = "button">search</but ...

How to position a jquery ui-icon at the center of a table cell

I encountered a similar issue while using gQGrid: <td role="gridcell" style="text-align:center;" title="" aria-describedby="BaseBetsGrid1_approved"> <span class="ui-icon ui-icon-closethick"/> </td> Is there a way to center it horizontal ...

Removing HTML elements from jQuery load() response

This is a follow-up to tackling the issue addressed in this specific inquiry. In my web development project, I'm utilizing jQuery's load() function to extract a headline enclosed within a div tag from one webpage and inserting it into another pa ...

Are you searching for a stylish tabbed navigation menu design?

I am searching for a tabbed navigation menu specifically designed to showcase images as the tab items. Here is an example of what I have in mind: <div class="menu"> <a href="#"> <img src="images/Chrysanth ...

Error encountered when calling the function .jstree() on a tree structure

While working on MVC4, I attempted to implement a jstree but encountered an issue where the tree view was not displayed when running my application. Upon investigating with Firebug, I came across the following error message: "TypeError: $(...).jstree is ...

Converting a data type into a CSS format

Currently, I am in the process of creating a table and would like to implement a 4-color scheme randomly selected from a pool of 10 schemes. Below is my CSS/PHP code: <?php header('Content-type: text/css'); // 0 grey $color00 = '#95 ...

Using regex for 'OR' conditions in regular expressions

I have been grappling with this issue for quite some time now. Can you offer any helpful hints or suggestions? When it comes to Outlook emails, we often see forwarded emails containing information within the email body like so: From: Jackson, Peter Sent: ...

Python struggles to find HTML elements when gathering information from a website through

I attempted to extract data from a website by utilizing the following code snippet: import requests requests.get("myurl.com").content Unfortunately, certain crucial components of the website were not retrieved. Is there a way for me to access th ...

div is consistently correct across all web browsers

After creating the following CSS code for a div to always be positioned on the right: #button > .right { background-position: -268px 1415px; height: 180px; position: fixed; right: -90px; top: 40%; width: 263px; -webkit-transform ...

Next.js encountering page not found error due to broken link URL

Currently, I am working on implementing a login system in next.js. In the login page, I have included a Link to the Register page using the Link href attribute. However, every time I click on that link, it displays a message saying "404 page not found." Al ...

How to place an absolutely positioned div inside a scrollable div with overflow-y: scroll

Here is the HTML code: <div class="container"> <div class="scrollable-block"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, whe ...

Having trouble with your contact form sending messages?

Looking for some assistance with the Contact form on this Codepen page: https://codepen.io/ssbalakumar/pen/uzDIA The form is displaying correctly on my website, but when I try to submit it, the page reloads and I'm unsure where the message is being ...

Detecting User Interaction with Email Link

On my webpage, there is a link that when clicked, opens the default Email client. I also want to track in my database if the user has clicked on this link or not. Since this interaction occurs at the client-side, I am wondering if there is a way to check ...