jQuery Carousel. How to show the Next or Previous Element only.

Question

Hello,

I have a jQuery problem, and I've really tried everything I know (i am so newbie at this) so ..

The problem in short is I am doing a simple carousel-like effect. I am using this code.

(The div .showarea is the DIV which needs to be rotated (next/prev) but I want to keep only one div shown at a time.)

This is the html markup.

    <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>

This is my jquery attempt

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

});

Unfortunately, next() and prev() won't display the next element only, but all next elements and same thing for prev(). Any quick workaround..

Can someone help me on this,

Thanks

Answer 1

You could try using .eq(0) to select the first element in the collection given to you by .prev() and .next().

Note that .next() and .prev(), like most jQuery methods, are operating on a collection. So if your selector '.showarea' is selecting multiple elements, then .next() will select the next sibling element for each element selected by '.showarea', and similarly for .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);
    }
}

Answer 2

The below will rotate so if you are at the first item pressing back will then show the last item...

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);

});