CODEWITHSUNDEEP
javascriptjqueryajaxcarousel
Philip
Philip

Reputation: 331

slick slider will not instantiate when content is loaded via ajax

What I am trying to do is load in a portfolio item on the click of a div that pertains to that portfolio item. It will load the portfolio single page and populate the view. However the slick slider is not being instantiated and does not work when loaded via ajax.

This is the code that instantiates the slick slider (usually wrapped in $(document).ready. If I enter it in the console after it the ajax gets loaded it works, however if I add it to the end of the .click() function (which will load the content via ajax) it seems to not be intantiated - and nothing in the console to tell me why not:

$('.slick-slider').slick({
		lazyLoad: 'ondemand',
		centerMode: true,
		centerPadding: '60px',
		variableWidth: true,
		speed: 300,
		slidesToShow: 1,
		adaptiveHeight: true,
		responsive: [
		    {
		      breakpoint: 1024,
		      settings: {
		        slidesToShow: 3,
		        slidesToScroll: 3,
		        infinite: true,
		        dots: true
		      }
		    },
		    {
		      breakpoint: 600,
		      settings: {
		        slidesToShow: 2,
		        slidesToScroll: 2
		      }
		    },
		    {
		      breakpoint: 480,
		      settings: {
		        slidesToShow: 1,
		        slidesToScroll: 1
		      }
		    }
		    // You can unslick at a given breakpoint now by adding:
		    // settings: "unslick"
		    // instead of a settings object
		]
	  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Then here is my code for the click of 

$(document).ready(function() {
	$('#gallery-view > div').click(function() {
		
		var toLoad = $(this).attr('id')+' #portfolio-single';
	    $('#ajax-view').hide('fast',loadContent);
	    $('#load').remove();
	    $('#ajax-wrapper').append('<span id="load">LOADING...</span>');
	    $('#load').fadeIn('normal');
	
	    //window.location.hash = $(this).attr('id').substr(0,$(this).attr('href'));
	    function loadContent() {
	        $('#ajax-view').delay(1000).load(toLoad,'',showNewContent());
	    }
	   
	    function showNewContent() {
		    	        $('#ajax-view').show('normal',hideLoader());	         
	    }
	    function hideLoader() {
	        $('#load').delay(1000).fadeOut('normal');
	    }

	});
	
	  
});

The link for which I am trying to accomplish this can be found at:

http://april.philiparudy.com/gallery/

If you click on a div with a circle image you will see it loading without slick slider.

I have the single slick slider working here: http://april.philiparudy.com/portfolio/abby-warner/

Is there some type of callback function I could be running to instantiate the slick slider after ajax is loaded?

Upvotes: 1

Views: 2333

Answers (1)

gon250
gon250

Reputation: 3545

Your code it's almost ok. The problem is you are assigning the click to the #gallery-view > div.

You must get an existing element, not an element you have added after the function click.so try to change that and get the parent or show me the ajax call to see where are you adding the new item.

Also change the click to onclick and the functions should not be inside the $(document).ready

Take a look below.

$(document).ready(function() {
    $('#gallery-view > div').on('click', function() {
        var toLoad = $(this).attr('id')+' #portfolio-single';
        $('#ajax-view').hide('fast',loadContent);
        $('#load').remove();
        $('#ajax-wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
    });  
});

    function loadContent() {
        $('#ajax-view').delay(1000).load(toLoad,'',showNewContent());
    }

    function showNewContent() {
                    $('#ajax-view').show('normal',hideLoader());             
    }
    function hideLoader() {
        $('#load').delay(1000).fadeOut('normal');
    }

Hope it's helps!

Upvotes: 1

Related Questions