No estoy seguro si es lo que quieres hacer, pero echale un vistazo a este código a ver si te ayuda, es un slider de citas que hice para un curso. <!doctype html> <html> <head><meta charset="utf-8"><title>CITAS</title> <link rel="stylesheet" type="text/css" href="css/citas_slide.css" /> <script type="text/javascript" src="javascript/jquery-2.1.4.min.js" ></script> <script type="text/javascript" src="javascript/galeria.js" ></script> <script type="text/javascript" src="javascript/zepto.min.js" ></script> <script type="text/javascript"> var t, actual; function select(i){ actual = i; galeria=JSON.parse(localStorage['citas']); $("nav a") .removeClass("on off") .addClass(function(j){return(j===i)?"on":"off";}); $("#persona").html(galeria[i].persona); $("#frase").html(galeria[i].frase); $("#foto").attr("src", galeria[i].foto); clearTimeout(t); t = setTimeout( function(){select((i + 1) % galeria.length);}, 3000); } function generar_selector(){ // regenera la botonera galeria=JSON.parse(localStorage['citas']); var selector = $("#selector"); selector.html(""); galeria.forEach(function(elem,i) { selector.append("<li><a onClick='select("+i+")'></a></li>"); }); } $(function (){ //creo una copia en local para ir modificando localStorage.citas =(localStorage.citas || JSON.stringify(galeria)); //creo una copia del original en local para hacer refresh localStorage.original =(localStorage.original || JSON.stringify(galeria)); generar_selector(); $("#editar").on("click", function(){ clearTimeout(t); $("#persona_d").html(galeria[actual].persona); $("#frase_d").html(galeria[actual].frase); $("#foto_d").html(galeria[actual].foto); $("#datos").css("display", "block"); //la edición se realiza sobre galería y se guarda en local localStorage.citas=JSON.stringify(galeria); }) $("#nuevo").on("click", function(){ $("#datos").css("display", "none"); actual = galeria.push({ persona:$("#persona_d").html(), frase:$("#frase_d").html(), foto:$("#foto_d").html() }) - 1; //crear una nueva cita se realiza sobre galería y se guarda en local localStorage.citas=JSON.stringify(galeria); generar_selector(); select(actual); }) $("#borrar").on("click", function(){ $("#datos").css("display", "none"); galeria.splice(actual,1); //la eliminación se realiza sobre galería y se guarda en local localStorage.citas=JSON.stringify(galeria); generar_selector(); select(actual-1); }) $("#guardar").on("click", function(){ $("#datos").css("display", "none"); actual = galeria.splice(actual,1,{ persona:$("#persona_d").html(), frase:$("#frase_d").html(), foto:$("#foto_d").html() }) - 1; //el guardado se realiza sobre galería y se guarda en local localStorage.citas=JSON.stringify(galeria); generar_selector(); select(0); }) $("#reestablecer").on("click", function(){ $("#datos").css("display", "none"); if(confirm("¿Desea reestablecer los valores por defecto?")) { //recargo la galeria original y me posiciono en la 1 cita aux=JSON.parse(localStorage['original']);; localStorage.citas=JSON.stringify(aux); generar_selector(); select(0); } }) select(0); }); </script> </head> <body> <div class="contenido"> <nav> <ul id="selector"></ul> </nav> <section id="caja"> <img id="foto" alt="" /> <div class="textos"> <p id="frase"></p> <p id="persona"></p> </div> </section> <div class="editar" id="editar"> <img src="images/carat-d-white.svg" alt=""/> </div> <section id="datos"> <div contentEditable="true" id="persona_d"></div> <div contentEditable="true" id="frase_d"></div> <div contentEditable="true" id="foto_d"></div> <div id="botones"> <ul> <li><img src="images/edit-black.svg" alt="" id="guardar"/></li> <li><img src="images/plus-black.svg" alt="" id="nuevo"/></li> <li><img src="images/delete-black.svg" alt="" id="borrar"/></li> </ul> </div> <div id="botones"> <hr> <ul> <li><img src="images/back-black.svg" alt="" id="reestablecer"/></li> </ul> </div> </section> </div> </body> </html> galeria.js var galeria = [ { persona:"Buddha - बुद्धा", frase:"En la confrontación entre el arrollo y la roca, el arrollo siempre ganará, no por la fuerza, sino por la persistencia.", foto:"http://www.imagexia.com/img/Cara-de-Buda.jpg" }, { persona:"Khalil Gibran - جبران خليل جبران بن ميخائل بن سعد", frase:"El silencio del envidioso está lleno de ruidos.", foto:"http://www.hannaharendtcenter.org/wp-content/uploads/2015/05/111.jpg" }, { persona:"Confucio - 孔子", frase: "Todo tiene belleza pero no todo el mundo la puede ver.", foto:"http://3.bp.blogspot.com/-VlsuMSoivLU/VeMlD-LymUI/AAAAAAABKPU/Q8PYwsFbqxg/s1600/confucio.jpeg" }, { persona:"Lev Nikoláievich Tolstói - Лев Николаевич Толстой", frase:"Mi felicidad consiste en que sé apreciar lo que tengo y no deseo con exceso lo que no tengo.", foto:"http://malba.s3-website-sa-east-1.amazonaws.com/wp-content/uploads/2014/09/tolstoi-05.jpg" }, { persona:"Platón - Πλάτων", frase:"El más importante y principal negocio público es la buena educación de la juventud.", foto:"https://s-media-cache-ak0.pinimg.com/236x/ee/c4/f3/eec4f3420f7024c58f1b44de233d8ecd.jpg" }, { persona:"Henrik Ibsen - hɛnɾɪk ˈjoːhɑn ˈɪpsən", frase:"Si dudas de ti mismo, estás vencido de antemano.", foto:"https://ebooks.adelaide.edu.au/i/ibsen/henrik/gosse/images/bust2.jpg" } ]; CSS body { margin:0; padding:0; background-color:#ccc; } img { vertical-align:bottom; } .contenido { position:relative; background-color:#000; height:427px; width:100%; min-width:640px; } #caja { position:relative; text-align:right; width:100%; height:100%; } #foto{ height:100%; max-height:427px; width:auto; } .textos { position: absolute; top: 20%; left: 5%; width: 50%; color: #FFFFFF; font-family: Helvetica, Arial, sans-serif; font-size: large; } #persona { font-style: italic; } nav { position:absolute; width:100%; bottom:10px; z-index:100; } nav ul { list-style-type:none; padding:0; margin:0; display:flex; flex-flow: row; justify-content: space-between; width:100px; margin-left:auto; margin-right:auto; } nav a { display:block; width:10px; height:10px; background-color: white; border-radius:50%; } nav a.on{ background-color: orange; } nav a.off{ background-color: white; } nav a:hover { background-color: red; } .contenido #datos { margin-top:5vh; margin-left: 10%; margin-right:10%; display:none; } .contenido #datos div { padding: 0.5em; background-color: #D4D4D4; border: 1px solid #000000; margin-bottom:0.2em; } .editar { background-color: #626262; padding: 0.2em; text-align: right; height:28px; cursor:pointer; } .editar img { padding: 6px; border-radius:50%; } .editar:hover > img { background-color: #000000; } .contenido #datos div#botones { border: 1px none #000000; background-color:#ccc; } div #botones ul { margin:0; padding:0; list-style-type:none; display:flex; flex-direction: row; justify-content: flex-end; } div #botones ul li { } div #botones ul li img { width:20px; height:20px; padding: 0.3em; border-radius:50%; background-color: #626262; margin-right:0.3em; } div #botones ul li img:hover { background-color: white; } Espero que te ayude, un saludo.