jQuery Carrusel. Cómo mostrar el elemento siguiente o anterior solo

Question

Tengo un problema jQuery, y realmente he intentado con todo lo que sé (soy tan novato en esto) así que ...

El problema en breve es que estoy haciendo un simple efecto de carrusel. Estoy usando este código

(El .showarea div es el DIV que debe ser rotado (siguiente/anterior), pero quiero mantener sólo un div se muestra a la vez.)

Este es el formato 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> 

Este es mi intento de 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); 
    } 

}); 

Desafortunadamente, next() y prev() no se mostrará sólo el siguiente elemento, pero todos los elementos próximos y lo mismo para prev(). Cualquier solución rápida ..

Alguien me puede ayudar en esto,

Gracias

Answer 1

La continuación girará por lo que si usted está en el primer elemento de presión posterior se mostrará el último elemento ...

demostración 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

Usted podría tratar de usar .eq(0) para seleccionar el primer elemento de la colección que le ha asignado .prev() y .Next ()

Tenga en cuenta que .next() y .prev(), como la mayoría de los métodos jQuery, están funcionando en una colección. Entonces, si su selector '.showarea' está seleccionando múltiples elementos, entonces .next() seleccionará el siguiente elemento hermano para cada elemento seleccionado por '.showarea', y de manera similar para .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); 
    } 
}