Google Spreadsheet Json & Owl Slider-Integration

Question

Ich habe nach einer Möglichkeit gesucht, Google-Blätter zu verwenden, um einen Eulen-Slider zu betreiben, der Hauptgrund ist, dass ich in der Lage sein möchte, eine Reihe von Schiebereglern dynamisch aus einem Datenfeed zu aktualisieren.

Das gemachte Problem, das ich habe, ist, dass der Owl Slider nicht in der Lage sein wird, das JSon zu interpretieren, das ein Google Blatt ausgibt. Nach ihren Beispielen here und Code-Format unten.

{ 
    "items" : [ 
    { 
     "img": "assets/owl1.jpg", 
     "alt" : "Owl Image 1" 
    }, 
    { 
     "img": "assets/owl2.jpg", 
     "alt" : "Owl Image 2" 
    }, 
    { 
     "img": "assets/owl3.jpg", 
     "alt" : "Owl Image 1" 
    }, 
    { 
     "img": "assets/owl4.jpg", 
     "alt" : "Owl Image 2" 
    }, 
    { 
     "img": "assets/owl5.jpg", 
     "alt" : "Owl Image 1" 
    }, 
    { 
     "img": "assets/owl6.jpg", 
     "alt" : "Owl Image 2" 
    } 
    ] 
} 

So hat mein Ansatz gewesen jquery zu verwenden, um das Google-Blatt zu analysieren zuerst die untergeordneten Elemente zu erstellen und dann die Eule Karussell div Zielrutschen dort bereits für sie jedes Mal, aber drehen durch, ich bin nicht in der Lage um es zu animieren, sitzt es einfach auf dem ersten Gegenstand.

Ich habe versucht, es in Codepen zu bekommen, aber es funktioniert nicht für mich. hier ist ein Arbeits Link in dem Beispiel angebracht Ich bin Targeting nicht die Eule div Targeting eine gerade ich die JSon arbeitete

http://www.tmkcreative.com/test-slider/index.html

Jede Hilfe machen gemacht oder geschätzt werden würde beraten.

Answer 1

Also nach einigem Herumspielen konnte ich es zum Laufen bringen, das Problem war das DOM-Element, das ich mit meiner Funktion anvisierte. Das einzige Problem, das ich im Moment habe, ist, dass ich das Ziel-Div mit der Menge der Folien füllen muss, die ich aus der JSON-Datei ziehen möchte, kein großes Problem, da wahrscheinlich eine Menge vorhanden ist, die ich wahrscheinlich anzeigen werde , aber es wäre ince, wenn dies dynamisch abgeschlossen wurde.

// ID of the Google Spreadsheet 
var spreadsheetID = "SPREADSHEET-KEY"; 

// Make sure it is public or set to Anyone with link can view 
var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json"; 

// make JSON call to Google Data API 
$.getJSON(url, function(data) { 

// set global html variable 
var html3 = ''; 

// loop to build html output for each row 
var entry = data.feed.entry; 
/** 
** Change to descending order 
** for (var i = entry.length - 1; i >= 0; i -= 1) { 
*/ 
for (var i = 0; i < entry.length; i++) { 
html3 += '<div class="owl-item"><div class="item"><a href="' + entry[i]['gsx$img']['$t'] + '"><img class="lazyOwl" src="' + entry[i]['gsx$img']['$t'] + '" alt=" '+ entry[i]['gsx$alt']['$t'] + '"></a></div></div>'; 

} 
// output html 
    $('#owl-demo2 > div.owl-wrapper-outer > div ').html(html3);