Skip to main content
1 de 2

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.