CODEWITHSUNDEEP
javascriptjqueryhtmlcss
notchris
notchris

Reputation: 180

Initializing slider after appending slides

I have a jQuery slider that should load after a set of animations have completed. Slides are appended to the slider and then I attempt to initialize the slider, however, the slides only seem to stack vertically. I believe that at the time I am calling $('.slider'), it is empty. Here is an example.

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 has been confusing me for a week now, thank you for your time, I really do appreciate any insight to this issue.

Upvotes: 0

Views: 431

Answers (3)

Popnoodles
Popnoodles

Reputation: 28409

This is your source code

<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 sss.min.js

sss.min.js is being loaded after you're trying to use it.

Load all your included scripts first and use jQuery's DOM ready wrapper $(function(){ ... }); to make your script wait until the scripts are loaded.

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

You might get away with one or the other, but you should do both as standard practice.

Upvotes: 1

ostapische
ostapische

Reputation: 1592

jsFiddle

JS 

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();
    }
}

Better wait when all images all loaded.

UPD
Try 

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

Your sss loads strange... There is no $.fn.sss, but jQuery.fn.sss exists. Maybe something overrides that jQuery acessible by $.

Upvotes: 0

Tuğrul
Tuğrul

Reputation: 372

$(".slider").append(img,img2).queue(function() {
    $('.slider').sss();
});

Put this in $('document').ready( .. )

Upvotes: 0

Related Questions