Retrieving the source of the currently displayed image within a carousel of images

Looking to retrieve the src of the active image in a carousel of images. Currently, my code is as follows:

$(document).ready(function () {
        $("#myCarousel1").on('slide.bs.carousel', function () {
            var ele = $('.carousel-inner .item .active').val('.carousel - inner.item.active').toString();
            var totalItems = $('.item').text().length;
    
            console.log('target: ' + totalItems);
            alert(totalItems);
    
            $.ajax({
                url: '@Url.Action("Description", "Experience")',
                data: { 'Activite': totalItems },
                type: 'post',
                success: function (data) {
                    $("#loadpartial").html(data);
                }
            });
        });
    });
    

Answer №1

Implement the following code snippet within your function:

let mainImageUrl = $('.current').find('img').attr('src');
console.log(mainImageUrl);

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

Output the JSON array containing [object Object] and [object Object]

Is there a way to transform [object Object],[object Object] into something like "[[{ 'x': '1', 'y': '0' }, { 'x': '2', 'y': '1' }]]"; using javascript? ...

Converting a 2D JSON string array into JavaScript objects

Hey there! I'm currently dealing with a JSON string that has the following structure: {"2000":["1", "2", "3"],"2001":["1", "2", "3"],"2002":["1", "2", "3"]} This JSON string is coming from the backend, and my JavaScript function receives it as a par ...

Encountering Issues with NextJS Dynamic SSR: Mobile Devices stuck on loading screen

Issue: The dynamic import feature of Next JS is encountering loading issues specifically on mobile browsers such as Google Chrome and Safari on IOS. Strangely, the functionality works smoothly on desktop browsers like Google Chrome and Mozilla. The projec ...

In the realm of Node.js and Express, an error has been thrown: "Router.use() cannot function without a middleware component, yet received a + gettype(fn)."

While developing an application with Node.js, I encountered the following error: throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn)) ^ TypeError: Router.use() requires a middleware function but got a ...

Observables do not provide any results when used in a pipe with an image src

I recently created a custom pipe for the image src in my application: It is applied to selectors like this: <img [src]="myobject?.URL | secure" /> Here's the code snippet for the pipe: import { Pipe, PipeTransform } from '@angular/c ...

Transferring States among Components in ReactJS

Struggling to transfer states between components in my application as the values always end up being undefined. I have a component named Home that captures user input for email and password during login. My goal is to pass these states to another componen ...

The jquery and operator fails to function

I am encountering an issue with the code snippet below. The functionality involves a button that toggles a div. Within this toggle div, there are several other divs and elements. $(function () { $('#btn').click(function (e) { e.preve ...

JavaScript and MongoDB issue -- TypeError: Unable to access properties of an undefined value (attempting to read 'collection')

Encountered an error in the terminal or command prompt as discussed below: The specific error message is: const taskCollection = db.collection('tasks'); ^ TypeError: Cannot read properties of undefined (reading &ap ...

Learn how to display two different videos in a single HTML5 video player

Seeking a solution to play two different videos in one video element, I have found that only the first source plays. Is jQuery the answer for this problem? HTML Code: <video autoplay loop id="bbgVid"> <source src="style/mpVideos/mpv1.mp4" type ...

Understanding the concept of inertia within the OrbitControls feature of ThreeJS

I have implemented THREE.OrbitControls to rotate my objects in a project. Yet, I am interested in incorporating some inertia for the camera rotation so that it gradually comes to a stop after the user stops moving the mouse. What would be the best approa ...

What is causing the issue with adding a table row using jQuery and ASP.NET?

I'm encountering an issue where clicking my button does not trigger any action. $("#<%=btnAddCategory.ClientID %>").click(function () { $('#tblCategoryTemplate').find('tbody').append('<tr><td>aaa</td> ...

Local working fine but encountering issues on Openshift, specifically with syncing npm package versions across environments (local and global)

As I develop a forum using Angular that connects with Node/Mongo, there are numerous requests required to populate the page with necessary data. While everything functions flawlessly locally, once uploaded to Openshift, the site displays various bugs and f ...

Deactivate collapsing of active element in Bootstrap 5 accordion without using jQuery

Check out this example of a Bootstrap 5 Accordion element: <div id="accordion-1" class="accordion" role="tablist"> <div class="accordion-item"> <h2 class="accordion-header" role=& ...

Ways to identify the active anchor within an li element

Below is the code snippet I am currently working with: <li> <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-call"></a> </li> <li> <a href="<?php echo base_url()?>home/promos/text ...

Encountering difficulties initiating multiple projects in Visual Studio

I'm facing an issue that I can't quite pinpoint. It seems to work fine for a few times, but then this problem pops up: https://i.sstatic.net/JBgAs.png Launching a single project is no problem, but when trying to start multiple projects simultane ...

How to insert an image into a placeholder in an .hbs Ember template file

I'm looking to enhance a .hbs template file in ember by incorporating an image. I am not a developer, but I'm attempting to customize the basic todo list app. <section class='todoapp'> <header id='header'> & ...

What varieties of ajax styles are there?

Although I am still relatively new to utilizing ajax, I have found a lot of success in my endeavors so far. The majority of my ajax calls tend to follow this format: function saveQueryProf(){ var currentDate = new Date(); var date=currentDate. ...

php generate a new file within a specific folder

In the following code snippet, a check is performed for the existence of a directory named 'dat'. If the directory does not exist, it is created. This functionality works correctly; however, the goal is to write a file to this directory that can ...

Is it possible to determine the time format preference of the user's device in Angular? For example, whether they use a 24-hour system or a 12-hour system with AM

In Angular, is there a way to determine whether the user's time format is set to 24-hour or 12-hour system? Any help would be greatly appreciated. Thanks! ...

Is Angular automatically assigned to `window.angular` on a global level when it is loaded as a CommonJS module?

When I import Angular 1.4 in my Webpack build entry point module as a CommonJS module using var angular = require("angular");, it somehow ends up being accessible in the global namespace of the browser (as window.angular). Upon examining the source code o ...