My content slider works well on the first page of ajax loaded content. However, when I navigate to the next page from ajax loaded content and try to update the sliding animation for newly loaded future content using #readyslider, the slider starts glitching. The timing and fade events start malfunctions. Why is this happening?
As I continue to the next pages, the slider problems worsen.
I've searched online and tried various solutions including using jQuery noConflict method but to no avail. Here's an example:
I attempted replacing all instances of $ with j using jQuery noConflict like so:
Unfortunately, this did not resolve the issue.
EDIT : I have provided the entire HTML and CSS code for my slider. Try clicking the ReadySlider button multiple times to see the problem.
My Approach:
var j = jQuery.noConflict();
j(document).ready(function () {
j(document).on("click", '#readyslider', function(event) {
setTimeout(function () {
var interval;
var interval = false;
j("#subttlslider > div:gt(0)").hide();
function updateDiv() {
j('#subttlslider > div:first')
.fadeOut(600)
.next()
.fadeIn(400)
.end()
.appendTo('#subttlslider');
}
j("#nextclick").click(function(){
$('#subttlslider > div:first-child')
.fadeOut(600)
.next()
.fadeIn(400)
.end()
.appendTo('#subttlslider');
});
j("#prevclick").click(function(){
$('#subttlslider > div:first-child')
.fadeOut(0)
$('#subttlslider > div:last-child')
.prependTo('#subttlslider')
.fadeOut();
$('#subttlslider > div:first-child').fadeIn();
});
j(".play").click(function() {
if(!interval){
interval = setInterval(updateDiv, 5000);
}
});
The original code for my slider is:
$(document).on("click", '#readyslider', function(event) {
setTimeout(function () {
var interval;
var interval = false;
$("#subttlslider > div:gt(0)").hide();
function updateDiv() {
$('#subttlslider > div:first')
.fadeOut(600)
.next()
.fadeIn(400)
.end()
.appendTo('#subttlslider');
}
$("#nextclick").click(function(){
$('#subttlslider > div:first-child')
.fadeOut(600)
.next()
.fadeIn(400)
.end()
.appendTo('#subttlslider');
});
$("#prevclick").click(function(){
$('#subttlslider > div:first-child')
.fadeOut(0)
$('#subttlslider > div:last-child')
.prependTo('#subttlslider')
.fadeOut();
$('#subttlslider > div:first-child').fadeIn();
});
$(".play").click(function() {
if(!interval){
interval = setInterval(updateDiv, 5000);
}
});
$(".pause").click(function() {
clearInterval(interval);
interval = false;
});
}, 10);
});#subttlslider>div {
position: absolute;
}
... (CSS styles omitted for brevity) ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
... (HTML and buttons omitted for brevity) ...
<div id="subttlslidermaindiv">
<div id="subttlslider" class="detailcontainer">
<div class='slideInLeft'>1) There is a lot of stress around us whole day which creates lot of hindrance in our mind.
... (more slider content omitted for brevity) ...
</div>It seems that the problem arises from injecting the slider code repeatedly by clicking on the #readyslider button when my ajax content updates...
I'm unsure about the alternative solution to ensure the slider runs smoothly each time after navigating to ajax-loaded content without any glitches.
Any assistance on this matter would be greatly appreciated! Thank you in advance :)