Karuzela jQuery. Jak wyświetlić tylko następny lub poprzedni element Tylko

Question

Mam problem z jQuery i naprawdę próbowałem wszystkiego, co wiem (jestem w tym nowicjuszem), więc ..

Problem w skrócie: robię prosty efekt podobny do karuzeli. Używam tego kodu.

(Div .showarea jest DIV, który musi zostać obrócona (next/prev), ale chcę zachować tylko jeden div pokazany na raz.)

To znaczników 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> 

To jest mój jQuery próba

$('.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); 
    } 

}); 

Niestety, next() i prev() nie będą wyświetlane tylko kolejny element, ale wszystkie kolejne elementy i to samo dla prev(). Wszelkie szybkie obejście ..

Czy ktoś może mi pomóc w tej sprawie,

Dzięki

Answer 1

Poniższa będzie się obracać, więc jeśli jesteś na pierwszej pozycji Naciśnięcie przycisku Back pokaże ostatni element ...

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

Można spróbować użyć .eq(0) zaznaczyć pierwszy element w kolekcji podany przez .prev() i .next ().

Należy pamiętać, że i .prev(), podobnie jak większość metod jQuery, działają w kolekcji. Jeśli więc wybierak '.showarea' wybiera wiele elementów, wówczas .next() wybierze następny element siostrzany dla każdego elementu wybranego przez '.showarea' i podobnie dla .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); 
    } 
}