execute numerous Jssor Caption instances simultaneously

I have a Jssor slider and I want to create an animation for the first slide. My goal is to make two images come from the sides and merge in the center.

I tried using a div for each image with a caption, and it works well. However, the second image starts moving only after the first one has reached the center. I would like them to move simultaneously. How can I achieve that?

Here is the option in my JavaScript file:

var options = {
        $FillMode: 2,
        $AutoPlay: false,
        $AutoPlayInterval: 4000,
        $PauseOnHover: 1,
        $ArrowKeyNavigation: true,
        $SlideEasing: $JssorEasing$.$EaseOutQuint,
        $SlideDuration: 800,
        $MinDragOffsetToSlide: 20,
        $SlideSpacing: 0,
        $DisplayPieces: 1,
        $ParkingPosition: 0,
        $UISearchMode: 1,
        $PlayOrientation: 1,
        $DragOrientation: 1,
        $CaptionSliderOptions: {
            $Class: $JssorCaptionSlider$,
            $CaptionTransitions: _CaptionTransitions,
            $PlayInMode: 1,
            $PlayOutMode: 3
        },
        $BulletNavigatorOptions: {
            $Class: $JssorBulletNavigator$,
            $ChanceToShow: 2,
            $AutoCenter: 0,
            $Steps: 1,
            $Lanes: 1,
            $SpacingX: 8,
            $SpacingY: 8,
            $Orientation: 1
        },
        $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$,
            $ChanceToShow: 2,
            $AutoCenter: 2,
            $Steps: 1
        }
    };

Answer №1

Have you been attempting to define and assign a value to the attribute d using a negative number to represent the duration of your first image? This value indicates the delay, in milliseconds, for displaying the caption on the UI element. Here's an example:

<img u="caption" t="T" du="1000" t2="NO" src="IMAGE_FILE_URI_1" style="position: absolute; width: 100px; height: 100px; top: 50px; left: 100px;" />
<img u="caption" t="T" d="-1000" du="1000" t2="NO" src="IMAGE_FILE_URI_2" style="position: absolute; width: 100px; height: 100px; top: 100px; left: 100px;" />

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

Multi-tier Dropdown with Dynamic Size Adjustment

I am attempting to adjust the size of a div container within a dropdown menu so that it properly accommodates the text inside. <div class='dropdown'> <button class ="dropbtn"><b>Hover!</b></button> <div c ...

jQuery slideToggle effect causes neighboring elements to move

After clicking on the element I've set as the trigger for slideToggle, it moves a few pixels to the right without any apparent cause. It seems like there might be an issue with the CSS, but I'm having trouble pinpointing the exact problem. You c ...

The content of a Puppeteer page mysteriously disappears when transferred to another function

My current project involves using Puppeteer for web scraping on my website. I encountered a strange issue where the await page.content() works fine when I console log the content, but turns out to be null when passed as an argument to another JavaScript ...

What is the proper way to mention JavaScript packages when including them as parameters in Angular elements within HTML?

I was looking to enhance the command to be more authoritative. <div (click)="lastCall(999)">click me</div> My attempt to utilize Number.MAX_SAFE_INTEGER resulted in an error from my computer stating that it wasn't recognized. As a result ...

encase the text within a div to create a visual flow

Is there a way to make div 2 encircle div 1? Both divs have text inside. +---++------------------+ | || | | 1 || | | || 2 | +---+| | +---- | | | ...

Users using an iPhone are unable to adjust the scale or scroll on this website

I find myself wondering what I might be overlooking in this situation Here is the HTML code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="../../nImg/favicon.ico" ...

Combine less files in webpack to generate a single minified CSS output file

Can webpack be used to combine multiple less files into one minified CSS file? I'm having trouble setting different output paths for my files. How can I make my CSS file output to './assets/stylesheets/bundle/' instead of './assets/ja ...

AngularJS UI router regular expressions allows for dynamic and flexible routing

I'm attempting to find a parameter with two possible values: 'current' or a number with at least 10 digits. Here's what I've tried: url: '/history/{code:^current$|^[0-9]{10,}$}' Although this regular expression suc ...

Dilemma: Overlapping Dropdowns on a Bootstrap Navbar Floated right

When using Bootstrap 3.2 and applying navbar-right to two different dropdown menus, they tend to overlap slightly. The code snippet below is taken directly from the Dropdown examples on the official Bootstrap website, but with the modification of having tw ...

Can I Select a Specific Node in React Component with Unique Behavior Upon Reuse?

Seeking advice on how to uniquely target a specific node within my react reusable component in order to perform operations on it multiple times independently. I will be rendering this reusable component several times on the same page in my App.js. Here is ...

JavaScript-Based Header Features Similar to Excel

Currently, I am in the process of developing a function that generates a sequence of strings similar to Excel headers. For those who may not be familiar with Excel, the sequence goes like this: A,B,...,Z,AA,...,AZ,BA,...,ZZ,AAA,...,etc. Here is the code ...

PHP: How to send checkbox value in conjunction with textbox values

I have implemented a contact form on my website using ajax/php/jquery. The form includes checkboxes named 'selection[]' that I am struggling to get the values of and include in the email text. Currently, when I use an implode statement, the che ...

Is it possible to use the .focus() event on an entire form in JQuery? If so, how

Take a look at this HTML snippet: <form ....> <textarea>....</textarea <input .... /> </form> I'm trying to set up a help section that appears when the user focuses on any form element, and disappears when they lose ...

Ensuring that links are functional across all directory levels: a comprehensive guide

Looking at the image included here, you can see a preview of the website I'm currently building. The plan is to have individual pages for each machine in the company's lineup. Since the navigation bar and menu will be consistent across the entire ...

Employing the getJSON method for sending a JSON object to a PHP page while simultaneously fetching a JSON object

Currently, I am working on developing an HTML5 application that heavily utilizes JSON for data access. Several times, I need to utilize the getJSON object (with JavaScript and JQuery) to send a JSON object to a PHP page. The PHP page will then process the ...

Automating the process of submitting a checkbox

Displayed below is a mix of HTML and JavaScript: <form method = "post" style="display: inline;" name="thisform<?php echo $employee->id; ?>"> <input type="hidden" name="user" value="<?php echo $employee->id; ?&g ...

Alteration in relational shift of division placement

My webpage is divided into three sections with the following proportions: 15% - 65% - 20% In the right section, there is a div with the ID alchemy. I want to set the height of this div using <div style="height:150px;">. However, when I set the heig ...

Can you provide guidance on achieving a gradient effect throughout the mesh, similar to the one shown in the example?

Check out my code snippet on JSFiddle: https://jsfiddle.net/gentleman_goat66/o5wn3bpf/215/ https://i.sstatic.net/r8Vxh.png I'm trying to achieve the appearance of the red/green box with the border style of the purple box. The purple box was created ...

Tips for adding data to a database when a button is clicked

I am trying to create a modal that captures values such as those in the code snippet below. Is there a way to insert these values, like $row3['first_name'], into a database when the submit button is clicked within the modal? I have looked for inf ...

How can I apply concatMap in Angular?

Can you please guide me on how to effectively utilize concatMap with getPrices() and getDetails()? export class HistoricalPricesComponent implements OnInit, OnDestroy { private unsubscribe$ = new Subject < void > (); infoTitle ...