Jssor Slider: Captions briefly overlap just as the slideshow begins to play

I am currently working on a slideshow with 3 caption-only slides. Here is the code snippet:

<div id="sliderHeader_container" style="position: relative; width: 965px; height: 85px;">

    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:965px; height:85px; overflow: hidden;">
        <!-- Slide -->
        <div>
            <div u="caption" t="L|EP" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
                <div style="position: absolute; top: 13px; left: 0px; width: 965px; height: 85px; color: Black; font-size: 19px; line-height: 25px; text-align: center;">
                    CAPTION 1
                </div>
            </div>
        </div>
        <!-- Slide -->
        <div>
            <div u="caption" t="R|EP" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
                <div style="position: absolute; top: 0px; left: 220px; width: 965px; height: 85px; color: Black; font-size: 16px; line-height: 17px; text-align: left;">
                    CAPTION 2
                </div>
            </div>
        </div>
        <!-- Slide -->
        <div>
            <div u="caption" t="SPACESHIP|LB" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
                <div style="position: absolute; top: 15px; left: 0px; width: 965px; height: 85px; color: Black; font-size: 18px; line-height: 20px; text-align: center;">
                    CAPTION 3
                </div>
            </div>
        </div>
    </div>
</div>

Occasionally, when the page loads or on slower mobile devices, all three captions may briefly overlap before the slideshow starts to play.

Here is the initialization code:

jQuery(document).ready(function ($) {
        var _CaptionTransitions = [];
        _CaptionTransitions["L|EP"] = {$Duration:1200,$FlyDirection:1,$Easing:{$Left:$JssorEasing$.$EaseInOutExpo},$ScaleHorizontal:0.6,$Opacity:2};
        _CaptionTransitions["R|EP"] = {$Duration:1200,$FlyDirection:2,$Easing:{$Left:$JssorEasing$.$EaseInOutExpo},$ScaleHorizontal:0.6,$Opacity:2};
        _CaptionTransitions["SPACESHIP|LB"] = {$Duration:1200,$Zoom:3,$Rotate:-0.1,$FlyDirection:9,$Easing:{$Left:$JssorEasing$.$EaseInQuint,$Top:$JssorEasing$.$EaseInWave,$Opacity:$JssorEasing$.$EaseInQuint},$ScaleHorizontal:1,$ScaleVertical:0.1,$Opacity:2};

        var options = {
            $AutoPlay: true,
            $DragOrientation: 1,
            $SlideDuration: 0,
            $AutoPlayInterval: 10000,
            $CaptionSliderOptions: {
                $Class: $JssorCaptionSlider$,
                $CaptionTransitions: _CaptionTransitions,
                $PlayInMode: 1,
                $PlayOutMode: 3
            }
        };

        var jssor_slider_header = new $JssorSlider$("sliderHeader_container", options);
    });

Has anyone else encountered this issue? Is there a way to hide all captions until the Jssor slides are fully loaded and ready to play?

Thank you for any assistance.

Answer №1

As the page is loading, consider using a non-jQuery version of the jssor slider to display it immediately without any delay.

Alternatively, you can choose to show only one slide initially and hide the rest by adding style="display: none;" to them.

<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:965px; height:85px; overflow: hidden;">
    <!-- Slide 1 -->
    <div>
        <div u="caption" t="L|EP" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
            <div style="position: absolute; top: 13px; left: 0px; width: 965px; height: 85px; color: Black; font-size: 19px; line-height: 25px; text-align: center;">
                CAPTION 1
            </div>
        </div>
    </div>
    <!-- Slide 2 -->
    <div style="display: none;">
        <div u="caption" t="R|EP" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
            <div style="position: absolute; top: 0px; left: 220px; width: 965px; height: 85px; color: Black; font-size: 16px; line-height: 17px; text-align: left;">
                CAPTION 2
            </div>
        </div>
    </div>
    <!-- Slide 3 -->
    <div style="display: none;">
        <div u="caption" t="SPACESHIP|LB" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
            <div style="position: absolute; top: 15px; left: 0px; width: 965px; height: 85px; color: Black; font-size: 18px; line-height: 20px; text-align: center;">
                CAPTION 3
            </div>
        </div>
    </div>
</div>

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 with looping the CSS background using JavaScript in CodePen

Can someone help me with looping through CSS background images? Why is the background not changing in this code example: http://codepen.io/anon/pen/dGKYaJ const bg = $('.background').css('background-image'); let currentBackground = 0; ...

Adding dynamic HTML to the body in AngularJS based on URL alterations

I am currently developing a single-page application using Angular. I am trying to create a card stack made of divs, similar to this concept. https://i.stack.imgur.com/42M06.png The idea is that the app will have various URL links and a card should be app ...

Reducing the number of DOM manipulations for websites that heavily utilize jquery.append

Here's a snippet of my coding style for the website: !function(){ window.ResultsGrid = Class.extend(function(){ this.constructor = function($container, options){ this.items = []; this.$container = $($container); ...

Refresh is the only way window.load function can be triggered

Here is the jQuery code I am currently using: $(window).load -> $("#introduction h2").slabText viewportBreakpoint: 0 The issue I am facing is that this code only runs when I manually refresh the page. When I navigate to a different page and then ret ...

The curious case of unusual behavior in jQuery's livequery() method

When attempting to use the jQuery plugin "livequery" to highlight certain words within dynamically generated search results, the highlighting does not appear to work! Strangely, adding an alert() function before executing the code causes the highlighting ...

Enhancing the appearance of a hyperlink heading

Seeking guidance on how to customize the title of a hyperlink. For instance, if I have a hyperlink structured like this: <a href="#" title="Hello">Click Here</a> Is there a way to alter the font style and size specifically for the word ' ...

Tips for fetching integer numbers in a string in JavaScript in sequential order starting from the left side

Within an input element, users are required to input the price of a product. <input size=10 type="text" id="prd_price" title="prd_price" name="prd_price"> Users have the ability to enter Currency Symbols along with other characters, and we cannot ...

Enhancing the Appearance of WooCommerce Product Descriptions

Having some trouble with my website . There are two descriptions on the "Product" page - one above the tabs and one inside the tabs. Trying to change the text color in the tab section to black, but when I adjust the body text color it affects both areas. I ...

Activate a CSS button upon clicking and update the content within the div

In order to achieve the desired result of having menu CSS buttons change the content of a div when clicked, I have managed to do that successfully. However, a problem arises when clicking on the 2nd or 3rd button/link - it changes the div content, but as s ...

Getting a JSON response from a JSP page through an AJAX request

I'm encountering an issue with a JSP page that is supposed to send a JSON response when requested through an AJAX call. However, the response is being directed to the error part of the AJAX call instead of the success part. Below is the code in my JS ...

Attempting to locate the precise jQuery selector for a specific element

Let me show you how I've set up my markup: <li class="websites" id="3"> <span class="id">3</span> <span><a href="http://www.google.com"><span class="url">www.google.com</span></a></span> ...

Can CSS3 animations be executed sequentially for each child element?

Have you ever tried creating a CSS3 animation in HTML? You can check out an example here. <div class="parent"> <a href="#">First</a> <a href="#">Second</a> <a href="#">Third</a> </div> With the ...

Displaying PHP processes within a DIV instantly using JQUERY, without the need to wait for them to complete

I currently have two scripts that I am working with. My goal is to use jQuery to send a form to a PHP file and display the process in a DIV. However, there is a delay in showing the progress until it completes, which can sometimes take a few seconds, caus ...

I am experiencing difficulties when attempting to insert an email link using Codeigniter 3's framework-specific syntax. The function does not

In my Codeignieter 3 project, I am faced with the task of displaying email addresses stored in the database. When using the code <a href="mailto:<?php echo $record->email; ?>"><?php echo $record->email; ?></a></td>, I e ...

How can I convert an HTML Div to CSS styling?

Currently, I am attempting to transform the following HTML code snippet into CSS. While I understand that you can utilize div in CSS, I am uncertain if it is possible to use an href with CSS. Here is the code in question: <div id="menubar1"> <a ...

CSS challenge: designing a tab interface

I am facing a CSS challenge that has got me stumped. I'm not even sure if it's achievable. Here is what I'm trying to achieve: There are three buttons/tabs displayed like this . When a tab is clicked, a different div should be shown for eac ...

Center aligning elements in React using CSS with HTML can be achieved through Flexbox. However, sometimes images

Currently, I'm in the process of developing a website with react and I've encountered an issue with centering elements vertically on the left and right sides. It's been troubling me for a few days now and I haven't found a solution yet. ...

How about a CSS one-by-one black pixel that's not opaque?

I've been attempting to achieve a 70% transparent black background on an element, but unfortunately, I had to use a pixel to address browser compatibility problems. Using CSS alone would make the entire content of the element transparent as well. Her ...

Transmitting HTML5 application settings via URL

I am interested in creating an HTML5 app that utilizes the WebAudio API. This app will allow users to customize certain parameters. Users should be able to 'share' these settings by sending a share URL, which can be clicked by others to view the ...

Fixing the bug in the circle text animation

I followed the instructions in this tutorial and implemented the following code: Splitting(); * { margin: 0; padding: 0; box-sizing: border-box; font-family: monospace; } body { display: flex; justify-content: center; align-items: center; ...