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.