entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Slider usando solo javascript y jquery

Hola People...
alguien me podra dar una mano con este problema...
estoy intentando realizar un slider con javascript y jquery(sin ningun plugin adicional )...

<div id="slide">
    <span id="text-1">texto1</span>
    <span id="text-2">texto2</span>
    <span id="text-3">texto3</span>

</div>
#slide span{
    position:absolute;
    width:50%;
    top:0;
    //display:none;
}
    var $img = $('#slide span'),
        n = $img.length,          
        c = 0;                   

    $img.not(':eq('+c+')').hide();

    (function loop(){
      $img.delay(2000).fadeTo(500, 0).eq(++c%n).fadeTo( 1000, 1, loop );
    })();

ahora bien el slider si funciona , el problema cuando quiero agregarle la funcionalidad de paginar... y conseguir ese efecto
que cuando le de click al primer #button1 , que regrese al #text-1 y asi susecivamente, y que continue con el efecto del slider

<div id="spin" >   
    <div id="button1" class="posit" href="" data-id="one"></div>
    <div id="button2" class="posit" href="" data-id="two"></div>
    <div id="button3" class="posit" href="" data-id="three"></div>
</div>
.posit
{
    height: 8px;
    width: 8px;
    border-radius: 4px;
    background-color: black;
    vertical-align: top;
    border: 5px;
    float: left;
    margin: 5px;
}
#spin
{
    position: absolute;
    top: 8%;
    left: 5%;
}

1 Respuesta

2votos

white Puntos75880

Hola @charlee77 que tal si registras un evento para los elementos, podrías usar el atributo data-* para guardar una relacion entre los slides.

<a id="button1" class="posit" href="" data-slide-btn data-slide-id="text-1">1</a>
$('[data-slide-btn]').on('click', function () {
    var slideID = $(this).data('slide-id'),
        slide;

    if ((slide = $('#' + slideID)).length) {
        slide.fadeIn();
    } 
});

0voto

charlee77 comentado

Hola @white
estuve haciendo pruebas con tu codigo
pero no me funciono , derrepente he hecho algo mal. :s

http://jsfiddle.net/charlee77/naaodcp5/

Saludos Bro

0voto

white comentado

te propongo crear una mejor estructura para el loop de tu slider, aca te pongo un ejemplo:

(function(options) {
    'use strict';

    var current, last, next, prev, timer, loop, slides;

    current = 1;
    slides = $('#slide > span').hide();

    // show first slide
    slides.first().show();

    loop = function () {
        timer = setTimeout(function () {

            next = ((current + 1) > slides.length-1 ? 0 : (current + 1));
            prev = current - 1;

            if (last === current) {
                console.log('stuck');
                return loop();
            }

            slides.stop().fadeOut();
            slides.eq(current).stop().fadeIn();

            last = current;
            current = next;
            loop();
        }, options.delay);
    };

    loop();

    $('[data-slide-btn]').on('click', function () {
        var slideID, slide, indexSlide;

        slideID = $(this).data('slide-id');

        if ((slide = $('#' + slideID)).length) {

            indexSlide = slides.index(slide);
            current = ((indexSlide + 1) > slides.length - 1 ? 0 : (indexSlide + 1));
            last = -1;

            clearTimeout(timer);
            slides.stop().fadeOut();
            slide.stop().fadeIn();
            loop();
        }
    });
})({
    delay: 2000
});

http://jsfiddle.net/naaodcp5/1/

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta