4

Gostaria de saber como posso alterar o script de Slide Show abaixo para que ele funcione com dois controles de ação denominados Próximo e Anterior sendo que necessito que o Slide só mude o texto caso o usuário clique em um dos botões para realizar a mudança do Slide Show.

Jquery

jQuery(document).ready(function(){ 
    $(function(){
        $('#slideshow h4:gt(0)').hide();
        setInterval(function(){
          $('#slideshow :first-child').fadeOut(2000)
             .next('div').fadeIn(2000)
             .end().appendTo('#slideshow');}, 
          2000);
    });
});

HTML

<div id="slideshow">
    <div class="slideshow-element">Test 1</div>
    <div class="slideshow-element">Test 2</div>
    <div class="slideshow-element">Test 3</div>
    <div class="slideshow-element">Test 4</div>
</div>

CSS

.slideshow-element{
    position: absolute;
}

Demo do Script funcionando

5
  • 1
    Você tentou algo ? Commented 1/09/2015 às 14:35
  • Ainda não sei muita coisa de Jquery e JS.
    – Striffer
    Commented 1/09/2015 às 14:36
  • Pra implementar os botões creio que seja necessária uma alteração considerável. Commented 1/09/2015 às 14:38
  • Você não quer mais transição automática, apenas os botões, é isso ? Commented 1/09/2015 às 14:40
  • Sim ta ótimo do geito que ficou transição automática iria pesar muito o site.
    – Striffer
    Commented 1/09/2015 às 16:12

2 Respostas 2

5

Fiz uns ajustes simples para o slideshow funcionar apenas com os botões next e prev, e não mais com transições automáticas:

$(function() {
    var $slideshow = $("#slideshow div:first").addClass("visible").fadeIn(2000);

    $("#prev").on("click", function()
    {
        var $visible = $("#slideshow .visible");
        var $prev = $visible.prev();

        if ($prev.length > 0)
        {
            $visible.removeClass("visible").fadeOut(2000, function() {
                $prev.addClass("visible").fadeIn(2000);
            });
        }
    });

    $("#next").on("click", function()
    {
        var $visible = $("#slideshow .visible");
        var $next = $visible.next();

        if ($next.length > 0)
        {
            $visible.removeClass("visible").fadeOut(2000, function() {
                $next.addClass("visible").fadeIn(2000);
            });
        }
    });
});

Criei uma classe fake chamada visible para controlar qual elemento está visível no momento da troca. Essa classe é atribuída ao primeiro elemento logo no início, assim como a exibição (fadeIn) do mesmo.

As funções próximo e anterior são semelhantes. Primeiro é achado o slide atual $("#slideshow .visible") e então é achado o próximo elemento ou o anterior, dependendo da ação do usuário, ex. var $prev = $visible.prev();. Se o elemento foi encontrado if ($prev.length > 0), é feita a transição:

$visible.removeClass("visible").fadeOut(2000, function() {
    $prev.addClass("visible").fadeIn(2000);
});

Fiddle

3
  • Obrigada pela ajuda.
    – Striffer
    Commented 1/09/2015 às 14:59
  • @Rodrigo tranquilo! Ficou clara a explicação? Commented 1/09/2015 às 14:59
  • Sim entendi perfeitamente.
    – Striffer
    Commented 1/09/2015 às 16:13
3

Boa tarde, Aqui deixo uma solução bem mais simples.

Javascript/jQuery:

jQuery(document).ready(function(){ 
    $(function(){
        $('#slideshow h4:gt(0)').hide();
        setInterval(function(){
          $('#slideshow :first-child').fadeOut(2000)
             .next('div').fadeIn(2000)
             .end().appendTo('#slideshow');}, 
          2000);
    });
});

CSS:

.slideshow-element{
    position: absolute;
    display: none;
}

HTML:

 <div id="slideshow">
        <div class="slideshow-element">Test 1</div>
        <div class="slideshow-element">Test 2</div>
        <div class="slideshow-element">Test 3</div>
        <div class="slideshow-element">Test 4</div>
    </div>

Esta solução é bastante facil visto que só corrigi a sua. Espero estar a ajudar, os melhores cumprimentos.

2
  • Mas ele quer que o slideshow tenha botões de avançar/voltar e que o conteúdo seja alterado diante da interação do usuário com esses botões. Commented 1/09/2015 às 17:33
  • tem toda a razão. não percebi. caso seja necessario alterar o codigo o autor que me indique que eu ajudo :)
    – Wilson -
    Commented 2/09/2015 às 9:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .