Skip to main content
adicionou 2 caracteres ao conteúdo
Fonte Link
Miguel
  • 29,5mil
  • 5
  • 43
  • 80

Eu estou a fazer um slider fadeIn/Out automático mas gostaria de implementar controlos também (next/prev), o problema é que não consigo ligar estas duas funcionalidades. Por ex: se estiver no slide1 e eu carregar no next (slide2) a parte automática vai mudar outravez para o slide2 em vez de mudar para o slide3, visto que o slide2 é onde estamos.

HTML:

<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="1" class="containerHigh" style="background-image:url(hola.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="2" class="containerHigh" style="background-image:url(hey.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="3" class="containerHigh" style="background-image:url(hi.jpg);">

JQUERY: controlos:

function sliderHighlights() {

    $(".containerHigh:gt(0)").hide();

    $(document).on('click', '#nextHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightNext = highlightOn+1;

        if(highlightOn == $('.containerHigh').length) {
            highlightNext = 1;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightNext+ '"]').stop().fadeIn(500);

    });

    $(document).on('click', '#prevHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightprev = highlightOn-1;

        if(highlightOn == 1) {
            highlightprev = $('.containerHigh').length;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightprev+ '"]').stop().fadeIn(500);

    });
 }

JQUERY: autoSlider

function autoSliderHighlights() {
setInterval(function() { 
  $('.containerHigh:eq(0)'visible')
    .fadeOut(800).next().fadeIn(800).end().appendTo('#sliderHighlight');
},  5000);
}

NOTA: Cada um deles por si só trabalha bem, só quando tento juntar os dois é que existe incoerência. Alguma dica?

Eu estou a fazer um slider fadeIn/Out automático mas gostaria de implementar controlos também (next/prev), o problema é que não consigo ligar estas duas funcionalidades. Por ex: se estiver no slide1 e eu carregar no next (slide2) a parte automática vai mudar outravez para o slide2 em vez de mudar para o slide3, visto que o slide2 é onde estamos.

HTML:

<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="1" class="containerHigh" style="background-image:url(hola.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="2" class="containerHigh" style="background-image:url(hey.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="3" class="containerHigh" style="background-image:url(hi.jpg);">

JQUERY: controlos:

function sliderHighlights() {

    $(".containerHigh:gt(0)").hide();

    $(document).on('click', '#nextHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightNext = highlightOn+1;

        if(highlightOn == $('.containerHigh').length) {
            highlightNext = 1;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightNext+ '"]').stop().fadeIn(500);

    });

    $(document).on('click', '#prevHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightprev = highlightOn-1;

        if(highlightOn == 1) {
            highlightprev = $('.containerHigh').length;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightprev+ '"]').stop().fadeIn(500);

    });
 }

JQUERY: autoSlider

function autoSliderHighlights() {
setInterval(function() { 
  $('.containerHigh:eq(0)')
    .fadeOut(800).next().fadeIn(800).end().appendTo('#sliderHighlight');
},  5000);
}

NOTA: Cada um deles por si só trabalha bem, só quando tento juntar os dois é que existe incoerência. Alguma dica?

Eu estou a fazer um slider fadeIn/Out automático mas gostaria de implementar controlos também (next/prev), o problema é que não consigo ligar estas duas funcionalidades. Por ex: se estiver no slide1 e eu carregar no next (slide2) a parte automática vai mudar outravez para o slide2 em vez de mudar para o slide3, visto que o slide2 é onde estamos.

HTML:

<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="1" class="containerHigh" style="background-image:url(hola.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="2" class="containerHigh" style="background-image:url(hey.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="3" class="containerHigh" style="background-image:url(hi.jpg);">

JQUERY: controlos:

function sliderHighlights() {

    $(".containerHigh:gt(0)").hide();

    $(document).on('click', '#nextHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightNext = highlightOn+1;

        if(highlightOn == $('.containerHigh').length) {
            highlightNext = 1;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightNext+ '"]').stop().fadeIn(500);

    });

    $(document).on('click', '#prevHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightprev = highlightOn-1;

        if(highlightOn == 1) {
            highlightprev = $('.containerHigh').length;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightprev+ '"]').stop().fadeIn(500);

    });
 }

JQUERY: autoSlider

function autoSliderHighlights() {
setInterval(function() { 
  $('.containerHigh:visible')
    .fadeOut(800).next().fadeIn(800).end().appendTo('#sliderHighlight');
},  5000);
}

NOTA: Cada um deles por si só trabalha bem, só quando tento juntar os dois é que existe incoerência. Alguma dica?

removeu 3 caracteres do conteúdo
Fonte Link
Wallace Vizerra
  • 107,4mil
  • 106
  • 440
  • 920

Eu estou a fazer um slider fadeIn/Out automático mas gostaria de implementar controlos também (next/preveiwprev), o problema é que não consigo ligar estas duas funcionalidades. Por ex: se estiver no slide1 e eu carregar no next (slide2) a parte automática vai mudar outravez para o slide2 em vez de mudar para o slide3, visto que o slide2 é onde estamos.

HTML:

<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="1" class="containerHigh" style="background-image:url(hola.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="2" class="containerHigh" style="background-image:url(hey.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="3" class="containerHigh" style="background-image:url(hi.jpg);">

JQUERY: controlos:

function sliderHighlights() {

    $(".containerHigh:gt(0)").hide();

    $(document).on('click', '#nextHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightNext = highlightOn+1;

        if(highlightOn == $('.containerHigh').length) {
            highlightNext = 1;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightNext+ '"]').stop().fadeIn(500);

    });

    $(document).on('click', '#prevHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightprev = highlightOn-1;

        if(highlightOn == 1) {
            highlightprev = $('.containerHigh').length;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightprev+ '"]').stop().fadeIn(500);

    });
 }

JQUERY: autoSlider

function autoSliderHighlights() {
setInterval(function() { 
  $('.containerHigh:eq(0)')
    .fadeOut(800).next().fadeIn(800).end().appendTo('#sliderHighlight');
},  5000);
}

NOTA: Cada um deles por si só trabalha bem, só quando tento juntar os dois é que existe incoerência. Alguma dica?

Eu estou a fazer um slider fadeIn/Out automático mas gostaria de implementar controlos também (next/preveiw), o problema é que não consigo ligar estas duas funcionalidades. Por ex: se estiver no slide1 e eu carregar no next (slide2) a parte automática vai mudar outravez para o slide2 em vez de mudar para o slide3, visto que o slide2 é onde estamos.

HTML:

<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="1" class="containerHigh" style="background-image:url(hola.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="2" class="containerHigh" style="background-image:url(hey.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="3" class="containerHigh" style="background-image:url(hi.jpg);">

JQUERY: controlos:

function sliderHighlights() {

    $(".containerHigh:gt(0)").hide();

    $(document).on('click', '#nextHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightNext = highlightOn+1;

        if(highlightOn == $('.containerHigh').length) {
            highlightNext = 1;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightNext+ '"]').stop().fadeIn(500);

    });

    $(document).on('click', '#prevHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightprev = highlightOn-1;

        if(highlightOn == 1) {
            highlightprev = $('.containerHigh').length;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightprev+ '"]').stop().fadeIn(500);

    });
 }

JQUERY: autoSlider

function autoSliderHighlights() {
setInterval(function() { 
  $('.containerHigh:eq(0)')
    .fadeOut(800).next().fadeIn(800).end().appendTo('#sliderHighlight');
},  5000);
}

NOTA: Cada um deles por si só trabalha bem, só quando tento juntar os dois é que existe incoerência. Alguma dica?

Eu estou a fazer um slider fadeIn/Out automático mas gostaria de implementar controlos também (next/prev), o problema é que não consigo ligar estas duas funcionalidades. Por ex: se estiver no slide1 e eu carregar no next (slide2) a parte automática vai mudar outravez para o slide2 em vez de mudar para o slide3, visto que o slide2 é onde estamos.

HTML:

<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="1" class="containerHigh" style="background-image:url(hola.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="2" class="containerHigh" style="background-image:url(hey.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="3" class="containerHigh" style="background-image:url(hi.jpg);">

JQUERY: controlos:

function sliderHighlights() {

    $(".containerHigh:gt(0)").hide();

    $(document).on('click', '#nextHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightNext = highlightOn+1;

        if(highlightOn == $('.containerHigh').length) {
            highlightNext = 1;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightNext+ '"]').stop().fadeIn(500);

    });

    $(document).on('click', '#prevHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightprev = highlightOn-1;

        if(highlightOn == 1) {
            highlightprev = $('.containerHigh').length;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightprev+ '"]').stop().fadeIn(500);

    });
 }

JQUERY: autoSlider

function autoSliderHighlights() {
setInterval(function() { 
  $('.containerHigh:eq(0)')
    .fadeOut(800).next().fadeIn(800).end().appendTo('#sliderHighlight');
},  5000);
}

NOTA: Cada um deles por si só trabalha bem, só quando tento juntar os dois é que existe incoerência. Alguma dica?

removeu 11 caracteres do conteúdo
Fonte Link
Miguel
  • 29,5mil
  • 5
  • 43
  • 80

Eu estou a fazer um slider fadeIn/Out automático mas gostaria de implementar controlos também (next/preveiw), o problema é que não consigo ligar estas duas funcionalidades. Por ex: se estiver no slide1 e eu carregar no next (slide2) a parte automática vai mudar outravez para o slide2 em vez de mudar para o slide3, visto que o slide2 é onde estamos.

HTML:

<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="1" class="containerHigh" style="background-image:url(hola.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="2" class="containerHigh" style="background-image:url(hey.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="3" class="containerHigh" style="background-image:url(hi.jpg);">

JQUERY: controlos:

function sliderHighlights() {

    $(".containerHigh:gt(0)").hide();

    $(document).on('click', '#nextHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightNext = highlightOn+1;

        if(highlightOn == $('.containerHigh').length) {
            highlightNext = 1;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightNext+ '"]').stop().fadeIn(500);

    });

    $(document).on('click', '#prevHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightprev = highlightOn-1;

        if(highlightOn == 1) {
            highlightprev = $('.containerHigh').length;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightprev+ '"]').stop().fadeIn(500);

    });
 }

JQUERY: autoSlider

function loopHighlightsautoSliderHighlights(highlightOn) {
setInterval(function() { 
  $('#sliderHighlight '.containerHigh:eq(0)')
    .fadeOut(800).next().fadeIn(800).end().appendTo('#sliderHighlight');
},  5000);
}

NOTA: Cada um deles por si só trabalha bem, só quando tento juntar os dois é que existe incoerência. Alguma dica?

Eu estou a fazer um slider fadeIn/Out automático mas gostaria de implementar controlos também (next/preveiw), o problema é que não consigo ligar estas duas funcionalidades. Por ex: se estiver no slide1 e eu carregar no next (slide2) a parte automática vai mudar outravez para o slide2 em vez de mudar para o slide3, visto que o slide2 é onde estamos.

HTML:

<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="1" class="containerHigh" style="background-image:url(hola.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="2" class="containerHigh" style="background-image:url(hey.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="3" class="containerHigh" style="background-image:url(hi.jpg);">

JQUERY: controlos:

function sliderHighlights() {

    $(".containerHigh:gt(0)").hide();

    $(document).on('click', '#nextHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightNext = highlightOn+1;

        if(highlightOn == $('.containerHigh').length) {
            highlightNext = 1;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightNext+ '"]').stop().fadeIn(500);

    });

    $(document).on('click', '#prevHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightprev = highlightOn-1;

        if(highlightOn == 1) {
            highlightprev = $('.containerHigh').length;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightprev+ '"]').stop().fadeIn(500);

    });
 }

JQUERY: autoSlider

function loopHighlights(highlightOn) {
setInterval(function() { 
  $('#sliderHighlight .containerHigh:eq(0)')
    .fadeOut(800).next().fadeIn(800).end().appendTo('#sliderHighlight');
},  5000);
}

NOTA: Cada um deles por si só trabalha bem, só quando tento juntar os dois é que existe incoerência. Alguma dica?

Eu estou a fazer um slider fadeIn/Out automático mas gostaria de implementar controlos também (next/preveiw), o problema é que não consigo ligar estas duas funcionalidades. Por ex: se estiver no slide1 e eu carregar no next (slide2) a parte automática vai mudar outravez para o slide2 em vez de mudar para o slide3, visto que o slide2 é onde estamos.

HTML:

<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="1" class="containerHigh" style="background-image:url(hola.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="2" class="containerHigh" style="background-image:url(hey.jpg);">
<a href="project.php?name=Orange_Summer_Day" data-sliderHighlight="3" class="containerHigh" style="background-image:url(hi.jpg);">

JQUERY: controlos:

function sliderHighlights() {

    $(".containerHigh:gt(0)").hide();

    $(document).on('click', '#nextHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightNext = highlightOn+1;

        if(highlightOn == $('.containerHigh').length) {
            highlightNext = 1;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightNext+ '"]').stop().fadeIn(500);

    });

    $(document).on('click', '#prevHighlight', function() {

        $('.containerHigh').stop().fadeOut(500);
        var highlightOn = parseInt($('.containerHigh:visible').attr('data-sliderHighlight'));
        var highlightprev = highlightOn-1;

        if(highlightOn == 1) {
            highlightprev = $('.containerHigh').length;
        }

        $('.containerHigh[data-sliderHighlight="' +highlightprev+ '"]').stop().fadeIn(500);

    });
 }

JQUERY: autoSlider

function autoSliderHighlights() {
setInterval(function() { 
  $('.containerHigh:eq(0)')
    .fadeOut(800).next().fadeIn(800).end().appendTo('#sliderHighlight');
},  5000);
}

NOTA: Cada um deles por si só trabalha bem, só quando tento juntar os dois é que existe incoerência. Alguma dica?

Fonte Link
Miguel
  • 29,5mil
  • 5
  • 43
  • 80
Carregando