Question

以下代码工作正常并显示结果。但是当我添加owl carousal以显示结果为滑块时。这是单行div而不是幻灯片放映。我的所有数据都是从wordpress插件中获取json。

$(document).ready(function(){
    $.getJSON("./blog/?json=1",function(data) {
        //console.log(data);
         for (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]);
         }
    });
});

我的猫头鹰旋转木马配置

$(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
        }
    }
});

善意的建议

Answer 1

我的json url就是这样的'blog /？json = 1'，它基本上是wordpress的插件json api的链接。我试图在owl carousal里面调用wordpress帖子。

wordl json数据与猫头鹰旋转木马

1 个答案: