In the process of developing a slider feature that includes both images and paragraphs on each slide, I have encountered a stumbling block while attempting to create a new div element. Despite trying various solutions, the methods that previously worked for an image-only slider seem ineffective now. The slider refuses to slide, and new divs fail to materialize. Can anyone shed light on what might be causing this issue? Below is the code snippet in question:
var slide = function () {
if (number_of_image <= 1) number_of_image++;
else number_of_image = 0;
$('div.slider:first-of-type').after("<div class='slider'><img src='" + images[number_of_image] + "' alt='" + alts[number_of_image] + "' /></div>");
var windowWidth = $(window).width();
$('div.slider:last-of-type').css({
'display': 'inline-block',
'position': 'absolute',
'top': $('div.slider:first-of-type').position().top + 'px',
'left': windowWidth + 'px'
});
$('div.slider:first-of-type').animate({
left: '-' + windowWidth + 'px'
}, {
duration: 2000,
queue: false,
complete: function () {
$('div.slider:first-of-type').remove();
}
});
$('div.slider:last-of-type').animate({
left: 0
}, {
duration: 2000,
queue: false
});
}
var time = 10000;
var tick = function () {
time -= 100;
if (time <= 0) {
slide();
time = 10000;
}
}
setInterval(tick, 100);
UPDATE: An error message "Uncaught TypeError: Cannot read property 'top' of undefined" is being triggered on this line of code:
'top': $('div.slider:first-of-type').position().top + 'px',