Ayuda en botón avance galería URLs (JQuery)

Hola, buenas,

Comparto este ejercicio para ver si con vuestra ayuda podría resolverlo. Estoy empezando con JS y JQuery y me he bloqueado en este punto.

En HTML consta de un div que embebe diferetes URLs a modo de galería, a través de la etiqueta [object data="http://..."].

Y una flecha de avance que permitiría al usuario ver las siguientes URLs clickando sucesivamente.

[i id="siguiente-flecha" class="fa fa-arrow-right" aria-hidden="true"][/i]

JQuery consta de un array con las siguientes URLs:

var pages = [ 'http://www.elmundo.es', 'http://www.lavanguardia.com', 'http://www.elperiodico.com', 'http://www.abc.es', 'http://www.larazon.es', 'http://www.20minutos.es', 'http://www.eldiario.es']

Y esta función para activar el avance (además de cambiar el color de la flecha):

$("#siguiente-flecha").on("click", function link(e) { e.preventDefault(); $("#siguiente-flecha").css({color:"#000000", cursor:"pointer"});
for (var i = 0; i<pages.length; i++) {
if (i >=pages.length) { i=0; }; $("#content").attr({data:pages[i]});
};

La cuestión es que cuando haglo click en la flecha de avance voy directamente al último elemento del array, pero no consigo recorrerlo.

La función opera bien cuando sustituyo "i" por un número absoluto, pero no consigo activar el bucle ordenadamente usando "i".

Agradezco si es posible detectar el error.

Un saludo, gracias