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 Slider FalconMasters

Tema en 'Jquery' comenzado por chivodev, 13 de Marzo de 2017.

  1. chivodev

    chivodev Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    78
    Me gusta recibidos:
    18
    Puntos de trofeos:
    8
    Género:
    Hombre
    Buen dia comunidad, espero me ayuden con este caso, resulta que quiero implementar el slider que @FalconMasters uso en el video tutorial de tarjeta de presentacion, y quisiera saber si saben como poner este slider automatico o me ayuden con un tutorial de como hacerlo, aclaro que se bastante poco de javascript y jquery, pero entiendo cada concepto que se usa, asi que si alguien tiene algun tutorial le agradezco.

    Se que existen muchos slider en la red que son automaticos, pero he querido tomar uno que no lo sea, y ver si puedo hacerlo auto.

    Gracias
     
  2. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    657
    Me gusta recibidos:
    498
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Hola que tal ...!! lo que das a mencionar es que el slider de tarjeta de presentación que realizo FalconMaster últimamente lo quieres hacer automático...

    Eso lo puedes hacer mediante el uso de setTimeout() de javascript ... En donde en la función setTimeout puedes poner de la siguiente manera, pero ojo tienes que restructurar part del código que describió Falcomaster en funciones para que los puedas llamar fácilmente

    Código (Javascript):

    function nextSlider(){
      if (info.posicion < info.numeroSlides){
        //realizas las misma ejecuciones del slider
        info.posicion = info.posicion + 1;  // incrementa la posición
      }else{  /*En caso contrario realiza los mismo que describe el slider */   }
       
       altoInfo(); // llamamos la función altoinfo();

        setTimeout( (e) =>{
            nextSlider(); // Espera un time de 3 segundos y vuelve a ejecutar la función      
         },3000 );

    }
     nextSlider(); // Llama la función desde el exterior de javascript para ejecutarse

    $('#info-next').on('click', function(e){
            e.preventDefault();
           nextSlider(); // Lama la función al hacer clic en el botón >
    })
     
    Este fragmento ya no lo utilizarías ya que lo reemplaza nextSlider();
    Código (Javascript):

     info.padre.children('.slide').first().css({
         'left': 0
     });
     
    Este tienes que editarlo dentro de la función nextSlider() ya que sino te marcara la primera posición active de los puntitos antes de ejecutarse la función nextSlider
    Código (Javascript):

    $('#botones').children('span').first().addClass('active');
     

    Espero sea de tu ayuda ... Aunque se puede hacer de muchas manera, te dejo el siguiente link de otro slider

    Ejemplo de A PEN BY Agustin Ortiz
    http://codepen.io/Creaticode/pen/xIfmw?editors=1010
     
    A AngelKrak le gusta esto.
  3. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    657
    Me gusta recibidos:
    498
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Pues si lo querías hacer automático tu mismo no era necesario que pidieras ayuda como hacer un slider autmático no crees, y si en la web existen mucho tanto slider de solo CSS con javacript
     
  4. chivodev

    chivodev Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    78
    Me gusta recibidos:
    18
    Puntos de trofeos:
    8
    Género:
    Hombre
    @Dawud muchas gracias...
     

Comparte esta página