jQuery Carousel. Come mostrare la successiva o precedente elemento solo

Question

Ho un problema jQuery, e ho davvero cercato tutto quello che so (io sono così newbie a questo) così ..

Il problema in breve è che sto facendo un semplice effetto giostra. Sto usando questo codice.

(Il .showarea div è il DIV che deve essere ruotato (successivo/precedente), ma voglio mantenere un solo div mostrato alla volta.)

Questo è il markup HTML.

<div class="maincarousel"> 
     <div class="showarea"><a href="#"><img src="img/sampleshow.png" alt="" title="" /></a></div> 
     <div class="showarea"><a href="#"><img src="img/sampleshow2.png" alt="" title="" /></a></div> 
     <div class="showarea"><a href="#"><img src="img/sampleshow3.png" alt="" title="" /></a></div> 
     <a href="#carouselPrev" class="leftarrow" title="Previous"></a> 
     <a href="#carouselNext" class="rightarrow" title="Next"></a> 
    </div> 

Questo è il mio tentativo di jQuery

$('.showarea').hide(); 
$('.showarea:first').fadeIn(500); 

$('.maincarousel a').click(function() { 

    if ($(this).attr('href') == '#carouselNext') { 
     $('.showarea').hide(); 
     $('.showarea').next('.showarea').fadeIn(500); 
    } 

    if ($(this).attr('href') == '#carouselPrev') { 
     $('.showarea').hide(); 
     $('.showarea').prev('.showarea').fadeIn(500); 
    } 

}); 

Purtroppo, next() e prev() non visualizzerà solo l'elemento successivo, ma tutti i futuri elementi e stessa cosa per prev(). Qualsiasi soluzione rapida ..

Qualcuno mi può aiutare in questo,

Grazie

Answer 1

Il sotto ruoterà quindi se siete alla prima voce premendo di nuovo sarà poi mostrare l'ultimo elemento ...

Demo here

$('div.showarea').fadeOut(0); 
$('div.showarea:first').fadeIn(500); 

$('a.leftarrow, a.rightarrow').click(function (ev) { 
    //prevent browser jumping to top 
    ev.preventDefault(); 

    //get current visible item 
    var $visibleItem = $('div.showarea:visible'); 

    //get total item count 
    var total = $('div.showarea').length; 

    //get index of current visible item 
    var index = $visibleItem.prevAll().length; 

    //if we click next increment current index, else decrease index 
    $(this).attr('href') === '#carouselNext' ? index++ : index--; 

    //if we are now past the beginning or end show the last or first item 
    if (index === -1){ 
     index = total-1; 
    } 
    if (index === total){ 
     index = 0 
    } 

    //hide current show item 
    $visibleItem.hide(); 

    //fade in the relevant item 
    $('div.showarea:eq(' + index + ')').fadeIn(500); 

}); 

Answer 2

Si potrebbe provare a utilizzare .eq(0) per selezionare il primo elemento della collezione fornito dal .PREV() e .Next ().

Nota che .next() e .prev(), come la maggior parte dei metodi jQuery, operano su una raccolta. Quindi se il tuo selettore '.showarea' sta selezionando più elementi, allora .next() selezionerà l'elemento fratello successivo per ciascun elemento selezionato da '.showarea' e allo stesso modo per .prev().

---

if ($(this).attr('href') == '#carouselNext') { 
    $('.showarea').hide(); 
    var el = $('.showarea').next('.showarea').eq(0); 
    if (el.length) { 
     el.fadeIn(500); 
    } 

} 

if ($(this).attr('href') == '#carouselPrev') { 
    $('.showarea').hide(); 
    var el = $('.showarea').prev('.showarea').eq(0); 
    if (el.length) { 
     el.fadeIn(500); 
    } 
}