Question

我正在为我的图书馆构建一个简单的幻灯片小部件，显示新标题的书籍封面。我正在使用Jquery AJAX来调用我在Codeigniter中构建的API，然后加载responsiveSlides插件来格式化幻灯片。目标是让其他图书馆员将其粘贴到不同的网站上。

这可能是一个没有冲突的问题吗？因为我使用多个插件？

但是，我在幻灯片中遇到问题。我没有收到任何控制台错误，但幻灯片显示无效。

<div class="rslides result"></div>

<script type="text/javascript">
    jQuery(document).ready(function(){
    //load the jquery and css from responsiveSlides
    jQuery('footer').append('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js">');             
    jQuery('head').append('<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.css">');

    //start AJAX call
    jQuery.ajax({
    async : true,
    crossDomain : true,
    //query the API
    url : "https://library-kit-gortiz022.c9users.io/api/featuredslideshow/1",
    method : "GET",
    dataType : 'json',
    headers : {
        "x-api-key": "123456",
        "cache-control": "no-cache"
    },

    success : function(response){
        var slider;
        //grab the response message
        var records = response.message;
        console.log(records);

        //iterate through the response and format image in slider
        for(var i = 0; i < records.length; i++){
            var record = records[i];
            slider += "<img src=\"" + record.listitem_img + "\" alt=\"\" " +  "title=\"" + record.listitem_title + "\" />";
        }
            //console.log(slider);
            jQuery('.result').append(slider);
        }//end of success

    });//end of ajax request

});//end of documnet.ready

(function(jQuery) {
    jQuery.noConflict();
    jQuery(".rslides").responsiveSlides();
});

非常感谢你的帮助！

带有AJAX和responsiveSlides.JS的图像幻灯片小部件无法加载（noConflict问题？）

0 个答案: