1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Movimiendo de sliderbox, problema.

Tema en 'Javascript' comenzado por Trop, 28 de Agosto de 2016.

  1. Trop

    Trop Nuevo Miembro

    Se incorporó:
    26 de Agosto de 2016
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Tengo un problema, y es que el codigo JS no me esta funcionando para que mi slider mueva la imagen hacia la izquierda, se supone deberia moverla cada 3 segundos (Por el momento) , pero no se me esta ejecutando ¿Alguien puede echarle un ojo? AngelKrak me dijo que le agregara las comillas a mi left en el codigo js, pero no me sirvio.


    https://gist.github.com/anonymous/a824b7a076d24f8ab1ed6b34e3dff8a0
     
  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.398
    Me gusta recibidos:
    633
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    otro error que no habia visto:oops: que pasa con los selectores pues? diario los tienes mal jajaja xD

    Ahi no hay ningun bloque/elemento llamado galeria, solamente ID galeria con clase inner
    Código (Javascript):
    $("galeria. inner").css({
    Deberia de ser asi:
    Código (Javascript):
    $("#galeria .inner").css({
     
  3. Trop

    Trop Nuevo Miembro

    Se incorporó:
    26 de Agosto de 2016
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Pues no se que me pasa con eso jaja, pero nada, lo acomode tal cual y aun no arranca :(:(

    Código (Javascript):
    ;(function(){

    setInterval(()=>{
        $("#galeria .inner").css({
            left:"-100%"
            })
        },1000)
    });
    En mi codigo de #galeria me faltaba un positivion relative, ahora me va si lo hago manual pero el codigo js debe estar mal por que no me anda.
     
    Última modificación: 28 de Agosto de 2016
  4. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.398
    Me gusta recibidos:
    633
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    prueba con las comillas que te dije en el left... si no funciona, fijate que error te da en la Consola ;)
     
  5. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    653
    Me gusta recibidos:
    492
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Debes de checar bien tus elementos de html.... en la funcion de js menciona que tendrá un intervalo de 1000 segundo que cumplirá que la id galería seguida de la clase inner que tenga un left de -100 y termina. El detalle es que le esta colocando el intervalo a tu div de la clase inner el left de -100% y eso hace que no se vean tus imagenes por que estas quitando la posicion del div inner a un -100% de su posición y no a las imagenes que quieres animar.
    Otro detalla por lo que veo en tu código html despues de del div inner tienes varios divs con la clase image con un estilo de background-image: puedes escribirlo mas limpio de otra manera utilizando la etiqueta img de html para declarar tu imagenes...
    me imagino para tu slider estar usando un plugin de jquery_ checa que este bien escrito
     
    A AngelKrak le gusta esto.
  6. Trop

    Trop Nuevo Miembro

    Se incorporó:
    26 de Agosto de 2016
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    los intervalos en JS se miden por milisegundos, por eso 1000 implica 1 segundo, y si le aplico el left a la clase de .inner es para que se me mueva a la izquierda todo el contenido cada cierto tiempo.

    en teoria sirve manual si se lo modifico al momento de usar inspeccionar elemento, pero el codigo JS debe tener algun error.

    [​IMG]
    Angel, incluso con las comillas no me sirve, y no me da error.
     
  7. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.398
    Me gusta recibidos:
    633
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    Mira, prueba con este codigo, el tuyo esta mal >_<

    Código (Javascript):
    setInterval(function() {
      $("#galeria .inner").css({
        left: "-100%"
      });
    }, 1000);
    http://codepen.io/AngelKrak/pen/XKvwEN
     
    A Trop le gusta esto.
  8. Trop

    Trop Nuevo Miembro

    Se incorporó:
    26 de Agosto de 2016
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Pues me ha servido, graaaaacias angel ! jajaja

    Ahora la cuestion es que, si quiero que me muestre 5 imagenes, deberia lanzarle un currentPosition = 0 , y agregarselo, pero el let donde deberia ir ?

    Código (Javascript):
    setInterval(function() {
        let currentPosition = 0
            currentPosition++
              $("#galeria .inner").css({
                left: "-"+currentPosition*100+"%"
      });
    }, 1000);
     
     
    Última modificación: 29 de Agosto de 2016
  9. Trop

    Trop Nuevo Miembro

    Se incorporó:
    26 de Agosto de 2016
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    ¿Tengo que abrir el codigo de JS de otra manera?
     
  10. Trop

    Trop Nuevo Miembro

    Se incorporó:
    26 de Agosto de 2016
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    ¿Alguien me puede ayudar por aca?
     
  11. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.398
    Me gusta recibidos:
    633
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    aqui el unico soy yo pero no entendi eso :/ jajaja xD
     
  12. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    653
    Me gusta recibidos:
    492
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Mira este video, no te quitará mucho tiempo, solo consta de 14 minutes



    Es un ejemplo bien explicado parecido a lo que quieres realizar pero esta realizado la animación mediante puro CCS..

    Sería mas cómodo que compartiera todo tu código para mejor solución a lo que tienes... Te recomiendo Codepen para mejor visualización y mejor interación en el momento
     
    A AngelKrak le gusta esto.
  13. DieMedina

    DieMedina Miembro

    Se incorporó:
    18 de Julio de 2016
    Mensajes:
    41
    Me gusta recibidos:
    26
    Puntos de trofeos:
    18
    Género:
    Hombre
    Ocupación:
    Desarrollador
    Localización:
    Argentina
    Buenas Aca mire un poco tu codigo el problema es donde estas definiendo el let , cada 1 segundo currentPosition vuelve a valer 0 y nunca va a incrementar ese valor, lo que debes hacer es dejarlo afuera del setInterval y luego si tienes 5 imagenes hacer un if dentro del setInterval preguntado que en caso que sea mayor a 5 vuelva a 0 para que el slider comienze nuevamente . Te dejo el codigo resulto
    Código (Javascript):

    let currentPosition = 0
    setInterval(function() {
            currentPosition++
            if(currentPosition > 5){
                   currentPosition = 0
            }
              $("#galeria .inner").css({
                left: "-"+currentPosition*100+"%"
      });
    }, 1000);
     
     
    A AngelKrak le gusta esto.

Comparte esta página