How to Add Dynamic Slides to OWL Carousel via Ajax

A tutorial on how to add Dynamic Slides to Owl Carousel via Ajax jQuery. Similar to ClickFunnel recent purchases user slides.

Tweet
Share
Share
Pin

This is a small tutorial on how to add dynamic slides to OWL Carousel via AJAX jQuery Call. I used this to create a random user testimonials for ClickFunnels. Similar to what ClickFunnels has in the home page a sliding feed of users that have purchase ClickFunnels.

Use this as you like this is the JavaScript Code. 

<script>
	$(document).ready(function(){
		var html = '';   
		var owl = $('.owl-carousel').owlCarousel({
		    loop:true,
		    smartSpeed: 100,
		    autoplay: true,
		    autoplaySpeed: 100,
		    mouseDrag: false,
		    margin:10,
		    animateIn: 'slideInUp',
		    animateOut: 'fadeOut',
		    nav:false,
		    responsive:{
		        0:{
		            items:1
		        },
		        600:{
		            items:1
		        },
		        1000:{
		            items:1
		        }
		    }
		});
		$.ajax({
		  url: 'https://randomuser.me/api/?results=20&gender=male&nat=us',
		  dataType: 'json',
		  success: function(data) {
		    console.log(data.results);
		    $.each(data.results, function(k, v) {
			  	var random_num =  Math.floor(Math.random()*60);
			    owl.trigger('add.owl.carousel', [jQuery('<div class="notification-message"> <img src="'+v.picture.thumbnail+'" class="user-image" alt=""> <div class="user-name">'+ v.name.first+' '+v.name.last+' <span class="lighter">from '+v.location.city+'</span></div> <div class="bought-details">Bought This <br>'+random_num+' minutes ago</div> </div>')]);
			});
			owl.trigger('refresh.owl.carousel');
			
			
		
			
			
		  }
		});
	  
	});
</script>

View Demo