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>