Slider initialization will commence once the slides have been successfully appended

Question

Slider initialization will commence once the slides have been successfully appended

I've been struggling with a jQuery slider that should load after a series of animations finish. Even though I'm appending slides to the slider and trying to initialize it, the slides end up stacking vertically instead of sliding horizontally. My hunch is that when I call $('.slider'), it's empty at that moment. You can see an example here.

The slider container:

<div class="slider"></div>

The slides being added:

var img = $("<img src='http://placehold.it/1042x222&text=1' />");
var img2 = $("<img src='http://placehold.it/1042x222&text=2' />");

The part of my script that appends the slides and calls the slider:

<script src="http://www.ctsciencecenter.org/js/sss.min.js"></script>
<script>
$('.sense1, .sense2, .sense3, .sense4, .sense5, .galatext, .galatext2, #gala5').delay( 800 ).fadeOut( "slow", function() {
$(".slider").append(img,img2);
$('.slider').sss();
});
</script>

This issue has been puzzling me for a while now, so any help or insight you can provide would be greatly appreciated. Thanks for your time.

javascript jquery html css

Answer 1

Answer №1

Behold, the source code at your disposal!

<script>$('#gala5').addClass('animated slideInLeft');$('#gala5').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense1').removeClass('offcanvas')
$('.sense1').addClass('animated slideInLeft')});$('.sense1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense2').removeClass('offcanvas')
$('.sense2').addClass('animated slideInLeft')});$('.sense2').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense3').removeClass('offcanvas')
$('.sense3').addClass('animated slideInLeft')});$('.sense3').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense4').removeClass('offcanvas')
$('.sense4').addClass('animated slideInLeft')});$('.sense4').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense5').removeClass('offcanvas')
$('.sense5').addClass('animated slideInLeft')});$('.sense5').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense1, .sense2, .sense3, .sense4, .sense5, #gala5').removeClass('offcanvas').addClass('animated slideOutLeft')
$('.galatext').removeClass('offrcanvas').addClass('animated slideInRight')});$('.galatext').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.galatext2').removeClass('offrcanvas').addClass('animated slideInRight')});$('.galatext2').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense1, .sense2, .sense3, .sense4, .sense5, .galatext, .galatext2, #gala5').delay(800).fadeOut("slow",function(){$(".slider").append(img,img2);})
$('.slider').sss();});</script>
<script type="text/javascript" src="http://ctsciencecenter.org/wp-content/cache/minify/000000/yyrWLy4u1svNzAMA.js"></script>

wp-content/cache/minify/000000/yyrWLy4u1svNzAMA.js

is identified as sss.min.js

The script sss.min.js is being summoned after its required usage within your code.

Necessitate loading all supplemental scripts beforehand and employ jQuery's DOM ready wrapper $(function(){ ... }); to ensure seamless execution of your script once everything is loaded.

<script type="text/javascript" src="http://ctsciencecenter.org/wp-content/cache/minify/000000/yyrWLy4u1svNzAMA.js"></script>
<script>
    $(function(){
        $('#gala5').addClass( ... etc etc .. 
    });
</script>

While it may suffice with just one or the other, incorporating both practices is recommended for optimal performance.

Answer 2

Behold, the source code at your disposal!

<script>$('#gala5').addClass('animated slideInLeft');$('#gala5').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense1').removeClass('offcanvas')
$('.sense1').addClass('animated slideInLeft')});$('.sense1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense2').removeClass('offcanvas')
$('.sense2').addClass('animated slideInLeft')});$('.sense2').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense3').removeClass('offcanvas')
$('.sense3').addClass('animated slideInLeft')});$('.sense3').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense4').removeClass('offcanvas')
$('.sense4').addClass('animated slideInLeft')});$('.sense4').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense5').removeClass('offcanvas')
$('.sense5').addClass('animated slideInLeft')});$('.sense5').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense1, .sense2, .sense3, .sense4, .sense5, #gala5').removeClass('offcanvas').addClass('animated slideOutLeft')
$('.galatext').removeClass('offrcanvas').addClass('animated slideInRight')});$('.galatext').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.galatext2').removeClass('offrcanvas').addClass('animated slideInRight')});$('.galatext2').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){$('.sense1, .sense2, .sense3, .sense4, .sense5, .galatext, .galatext2, #gala5').delay(800).fadeOut("slow",function(){$(".slider").append(img,img2);})
$('.slider').sss();});</script>
<script type="text/javascript" src="http://ctsciencecenter.org/wp-content/cache/minify/000000/yyrWLy4u1svNzAMA.js"></script>

wp-content/cache/minify/000000/yyrWLy4u1svNzAMA.js

is identified as sss.min.js

The script sss.min.js is being summoned after its required usage within your code.

Necessitate loading all supplemental scripts beforehand and employ jQuery's DOM ready wrapper $(function(){ ... }); to ensure seamless execution of your script once everything is loaded.

<script type="text/javascript" src="http://ctsciencecenter.org/wp-content/cache/minify/000000/yyrWLy4u1svNzAMA.js"></script>
<script>
    $(function(){
        $('#gala5').addClass( ... etc etc .. 
    });
</script>

While it may suffice with just one or the other, incorporating both practices is recommended for optimal performance.

Answer 3

Answer №2

$(".carousel").append(image1, image2).queue(function() {
    $('.carousel').slideshow();
});

Make sure to include this within $('document').ready( .. )

Answer 4

$(".carousel").append(image1, image2).queue(function() {
    $('.carousel').slideshow();
});

Make sure to include this within $('document').ready( .. )

Answer 5

Answer №3

View my code on jsFiddle

JavaScript Code:

var img, img2, imagesSize = 2;
$( function() {
    img = $( "<img src='http://placehold.it/1042x222&text=1' />" );
    img.load( imgLoaded );
    img2 = $( "<img src='http://placehold.it/1042x222&text=2' />" );
    img2.load( imgLoaded );
} );
function imgLoaded() {
    imagesSize--;
    if ( imagesSize == 0 ) {
        $( ".slider" ).append( img, img2 ).sss();
    }
}

It's advisable to wait for all images to be loaded before proceeding.

Update:
Give this a try:

`jQuery( ".slider" ).sss();`

Your sss seems to be loading strangely... It appears there is no $.fn.sss, but jQuery.fn.sss does exist. It's possible that something is overriding the jQuery accessible by $.

Answer 6

View my code on jsFiddle

JavaScript Code:

var img, img2, imagesSize = 2;
$( function() {
    img = $( "<img src='http://placehold.it/1042x222&text=1' />" );
    img.load( imgLoaded );
    img2 = $( "<img src='http://placehold.it/1042x222&text=2' />" );
    img2.load( imgLoaded );
} );
function imgLoaded() {
    imagesSize--;
    if ( imagesSize == 0 ) {
        $( ".slider" ).append( img, img2 ).sss();
    }
}

It's advisable to wait for all images to be loaded before proceeding.

Update:
Give this a try:

`jQuery( ".slider" ).sss();`

Your sss seems to be loading strangely... It appears there is no $.fn.sss, but jQuery.fn.sss does exist. It's possible that something is overriding the jQuery accessible by $.

Slider initialization will commence once the slides have been successfully appended

Answer №1

Answer №2

Answer №3

Similar questions

The div is meant to be concealed, however, it remains visible

Exploring the diversity of perspectives through Angular

Invoking a JavaScript class using a script tag

Stopping the execution of a request handling function in Express/Node: tips and tricks

Setting default values in Angular dropdown select using TypeScript

Adding JavaScript files to a project in Ionic2 with Angular2 integration

I am having issues with this code as the submit button seems to be malfunctioning. Can you help me

How to obliterate tinyMce completely?

Enhance the appearance of testNG's HTML report

The child module invokes a function within the parent module and retrieves a result

After receiving the response, the Ajax success function does not run as expected

Tips for displaying nested components in React

Guide to successfully implement a POST action using jquery/ajax Colorbox! Check out the demo here

Having trouble getting the libphonenumber npm package up and running, encountering an error stating that fs.readFileSync is not functioning properly

Cannot change class until class is reapplied

Where is the location of the response for Gravity Forms Ajax?

middleware for handling multiple domains in Next.js

Converting JavaScript code into PHP syntax

Enhancing MySQL data retrieval with a custom jQuery timepicker integration

Making a Chrome extension that allows for cross-domain jQuery.Ajax requests