Slickslider doesn't work with dynamic content
Below is an example I made on jsFiddle to re-handle the problem I was facing. I am running init function to create slider after loading dynamic content via ajax. Some of the elements and classes created by slick are added to the DOM, but they don't work.
function top_posts(el){
var reqUrl = 'https://jsonplaceholder.typicode.com/users';
el.children('.loadspan').html('<i class="fa fa-circle-o-notch fa-spin fa-fw" style="padding: 0;"></i>');
$.ajax({
url: reqUrl,
dataType: 'json',
}).done(function( data ) {
el.children('.loadspan').hide();
if(data != ""){
console.log(data);
$.each(data, function(index) {
var output = '<div class="card-out">' +
'<div class="card-bg" style="background-image: url(https://placeimg.com/640/480/any);"></div>' +
'<div class="card-content">' +
'<div class="card-title">' +
this.name +
'</div>' +
'</div>' +
'</div>';
setTimeout(function() {
el.append(output);
}, (100 * (index + 1)));
});
top_slider_init();
} else{
el.children('.loadspan').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>');
}
}).fail(function(jqXHR, textStatus) {
el.children('.loadspan').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>');
console.log("Request failed: " + textStatus);
});
return false;
}
var el = $('.top-posts-slider');
top_posts(el);
function top_slider_init() {
$('.top-posts-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
speed: 300,
adaptiveHeight: false,
variableWidth: false,
autoplay: true,
autoplaySpeed: 3000,
infinite: true,
dots: false,
arrows: false,
centerMode: false,
centerPadding: "50px",
cssEase: "ease-in-out",
draggable: true,
fade: false,
focusOnSelect: false,
pauseOnFocus: true,
pauseOnDotsHover: false,
vertical: false,
verticalSwiping: false,
rtl: false,
});
}
.card-out {
height: 200px;
width: 100%;
position: relative;
}
.card-bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: cover;
}
.card-title {
position: absolute;
bottom: 10px;
left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="top-posts-slider">
<div class="loadspan"></div>
</div>
any help is appreciated :)
source to share
you need to remove setTimeout
because your content is added in top-posts-slider
after slick loading:
function top_posts(el){
var reqUrl = 'https://jsonplaceholder.typicode.com/users';
el.children('.loadspan').html('<i class="fa fa-circle-o-notch fa-spin fa-fw" style="padding: 0;"></i>');
$.ajax({
url: reqUrl,
dataType: 'json',
}).done(function( data ) {
el.children('.loadspan').hide();
if(data != ""){
console.log(data);
$.each(data, function(index) {
var output = '<div class="card-out">' +
'<div class="card-bg" style="background-image: url(https://placeimg.com/640/480/any);"></div>' +
'<div class="card-content">' +
'<div class="card-title">' +
this.name +
'</div>' +
'</div>' +
'</div>';
//remove settimeout
el.append(output);
});
top_slider_init();
} else{
el.children('.loadspan').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>');
}
}).fail(function(jqXHR, textStatus) {
el.children('.loadspan').html('<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>');
console.log("Request failed: " + textStatus);
});
return false;
}
source to share
First, what is the div load being executed inside the slider container? When you click that it will try to use it as a slide.
Also, it looks like you have a race condition between the markup you generate and the slider initialization. The slider is initialized before the content is actually inside the container. I also don't think you need this setTimeout function, you should create it something like
var output = '';
$.each(data, function(index) {
output += 'All of your markup';
}
el.append(output);
top_slider_init();
source to share