Ways to display the caption div only when the current item is in focus on the Owl Carousel

Is there a way to display the caption div only when the current item is focused? I am currently able to show the caption, but I am facing an issue where in a loop cycle, when the second last image is focused, the last image also shows the caption.

During the first loop, all caption divs are displayed when an image is focused. However, after the first loop, the last image already has the caption displayed. This issue occurs when the carousel option is set to loop: true. When set as false and I navigate using previous and next buttons, the problem does not occur. You can find my code for reference here: http://jsfiddle.net/ROHIT502/1qdurrLz/95/ Here is the jQuery code snippet:

$(document).ready(function () {
$('#slider').on('initialized.owl.carousel change.owl.carousel changed.owl.carousel ', function (e) {
if (!e.namespace || e.type != 'initialized' && e.property.name != 'position') return;
var current = e.relatedTarget.current()
var items = $(this).find('.owl-stage').children()
//alert(current);
var add = e.type == 'changed' || e.type == 'initialized'
items.eq(e.relatedTarget.normalize(current)).toggleClass('current', add)
}).owlCarousel({
items: 3,
margin: 10,
itemsDesktop : [1199,3],
itemsDesktopSmall: [979, 3],
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause: true,
//autoHeight: true,
responsive: true,
center: true,
dots:false,
nav: true,
loop: true
});
})

Answer №1

const boxStyle = document.querySelector(".box").onmouseover.style;

boxStyle.position = "absolute";

boxStyle.bottom = "30px";

By hovering over the box, it will move up by 30px. I apologize for any confusion regarding the caption of the previous image as I am not familiar with owl carousel. However, you have the ability to create a stunning carousel on your own.

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

Encountering unfamiliar characters in Mac OS while converting language in VueJs

When using the get text plugin for language translation in VueJs, everything works perfectly on all browsers in linux-ubuntu OS. However, upon opening it in any browser on MacOS, I am encountering unknown symbols as shown below in the screenshots. Image o ...

"Finding the Perfect Alignment: How to Center Legends in Firefox

The issue at hand An issue has been identified where the code functions as intended in Chrome, Opera, and IE but fails to work in Firefox: fieldset>legend { display: table; float: none; margin: 0 auto; } <fieldset> <legend>Legend ...

Update the URL for Product Details upon Color selection in ASP.NET Core

I'm currently working on an E-commerce platform focusing on Laptops. My goal is to enable users to seamlessly switch between different laptop colors by simply selecting a color from the dropdown menu, which should then redirect them to the product pag ...

React ESLint issue detected at a phantom line

When attempting to build in nextjs using next build, an error occurs with references to line 19 (an empty line) and line 33 (which does not exist). Despite updating the version of eslint-plugin-react in my package-lock.json file to ">=7.29.4", ...

What is the best way to activate the dirty flag of an Angular form using JavaScript?

I need to update the dirty flag of a form using JavaScript by accessing its DOM element. In order to do this, I am using @ViewChild to retrieve the element and then retrieving it in the ngOnInit lifecycle method (there are different ways to achieve this s ...

Utilizing Beautiful Soup in Python to extract specific information from HTML

When I made the decision to extract content from a website, like I aimed to organize the ingredients into a text file. The ingredient list can be found within: < div class="ingredients" style="margin-top: 10px;"> and each individual ingredient ...

Using Jquery to continuously animate elements breaks and repeats the process

I am currently using a jQuery function to animate my text. The issue is that it animates all elements simultaneously instead of separately. I would like each element (h2, h3, and span) to be animated individually. Any suggestions on how I can achieve this ...

Creating Isometric Rooms with X and Y Coordinate Coloring

I am working on creating an isometric room and I aim to color it in a specific style. However, the current code I have been using produces a different result than expected. Can anyone help me understand how this code works and potentially correct any mis ...

Creating dynamic class fields when ngOnInit() is called in Angular

I am trying to dynamically create variables in a class to store values and use them in ngModel and other places. I understand that I can assign values to variables in the ngOnInit() function like this: export class Component implements OnInit{ name: st ...

Tips for handling the !important declaration when creating a customized bootstrap theme

Exploring the Color Dilemma After creating a simple website in Bootstrap 4.1 with a distinct shade of purple, I encountered an issue with specificity when it came to customizing button states. To address this, I introduced a CSS class called .btn-purple ...

The Javascript Keydown event seems to fire twice

When the user presses ctrl + z, I want to trigger an undo action by handling a keydown event on the document. This is how I have set up the event listener in my document: componentWillMount() { window.addEventListener('keydown', throttle(this ...

Document the user's input by recording it in a text file

After experimenting with a simple HTML code like this: <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> ...

Tips for monitoring a JavaScript callback within an Angular 16 application

I'm currently working on integrating my Angular 16 application with a third-party website using an iFrame. My main concern is how to capture the callback response from their site. The recommended approach to integrate with their API from an HTML page ...

What is the best method for applying classes to a collection of DOM elements with jQuery?

I attempted two different methods of iterating through the arrays, but encountered the same error: addClass is not function First attempt using a for loop: function game(){ var cards = $('.card'); function initialize(){ for ...

Function in Typescript used for checking types and catching compilation errors from external sources

Fact: I am currently using TS version 2.3.4. I have developed a function that checks if a variable is defined (it takes the parameter variable and returns 'undefined' !== typeof variable). It's quite simple. export function IsDefined(variab ...

The EJS template in an Express.js (Node.js) application is not updating to show recent modifications

I'm currently developing a node.js application that serves an index.ejs page through a route named index.js. var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res) ...

Is it possible for the Redux state to become unsynchronized?

const SortingFunction = ({ dataState, updateState }) => { const handleClick = () => { const newState = JSON.parse(JSON.stringify(dataState)) // Make necessary updates to the new state based on the current dataState updateState(newStat ...

What is the maximum number of data points that can be used in a Scatter plot created

I am currently facing an issue while trying to populate a Scatter plot in JavaScript with decimal values obtained from a MySQL database using PHP. The database contains around 150,000 entries, resulting in 150,000 pairs of decimal inputs for the graph. How ...

What steps can be taken to ensure that the JavaScript fetch() function is consistently accessing and updating the new data that is being added to the

I'm facing an issue with my JSON data file that I want to display on the screen. I have a function with a fetch() request that executes every time I click a button. Initially, it works perfectly by fetching the data and displaying it correctly. Howeve ...

ReactJS Error: The property 'hubConnection' is not defined on type 'JQueryStatic'

I am currently working with the Signalr library in React, but I keep encountering the following error: Property 'hubConnection' does not exist on type 'JQueryStatic'. Is there a solution to this issue? declare var window : any; import ...