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.
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>