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.