jquery - wordpress json data with owl carousel -
following code working perfect , showing result. when add owl carousal show result slider. single line div not slide show. data getting json wordpress plugin.
$(document).ready(function(){ $.getjson("./blog/?json=1",function(data) { //console.log(data); (var i=0;i<data.posts.length;++i){ if (data.posts[i].date.substring(6, 7) == 01){ var mymonth = "jan"}; if (data.posts[i].date.substring(6, 7) == 02){ var mymonth = "feb"}; if (data.posts[i].date.substring(6, 7) == 03){ var mymonth = "mar"}; if (data.posts[i].date.substring(6, 7) == 04){ var mymonth = "apr"}; if (data.posts[i].date.substring(6, 7) == 05){ var mymonth = "may"}; if (data.posts[i].date.substring(6, 7) == 06){ var mymonth = "jun"}; if (data.posts[i].date.substring(6, 7) == 07){ var mymonth = "jul"}; if (data.posts[i].date.substring(6, 7) == 08){ var mymonth = "aug"}; if (data.posts[i].date.substring(6, 7) == 09){ var mymonth = "sep"}; if (data.posts[i].date.substring(6, 7) == 10){ var mymonth = "oct"}; if (data.posts[i].date.substring(6, 7) == 11){ var mymonth = "nov"}; if (data.posts[i].date.substring(6, 7) == 12){ var mymonth = "dec"}; $('.blog-slider').append('<div class="item"><a href="'+data.posts[i].url+'"><div><img src="' + data.posts[i].attachments[0].url + '" class="img-responsive" target="new"></div></a><ul><li><span>'+ data.posts[i].date.substring(8, 11) +'<br>'+ mymonth +'</span></li><li><span>'+ data.posts[i].title + '</span></li></ul></div>'); //console.log(mnth[meme]); } }); });
and owl carousel configurations are
$(document).ready(function() { $('.blog-slider').owlcarousel({ loop:true, margin:0, nav:false, autoplay:true, autoplaytimeout:4000, responsive:{ 0:{ items:1 }, 600:{ items:2 }, 1000:{ items:3 } } });
kindly advice
my json url 'blog/?json=1' link plugin json api of wordpress. trying call wordpress posts inside owl carousal.
Comments
Post a Comment