jQuery Карусель. Как показать только следующий или предыдущий элемент

Question

У меня проблема с jQuery, и я действительно попробовал все, что знаю (я новичок в этом), так что ...

Проблема в том, что я делаю простой карусельный эффект. Я использую этот код.

(div .showarea - это DIV, который нужно повернуть (следующий / предыдущий), но я хочу, чтобы одновременно отображался только один div.)

Это 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>

Это моя попытка 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);
    }

});

К сожалению, next () и prev () не будут отображать только следующий элемент, но все последующие элементы и то же самое для prev (). Любое быстрое решение ..

Может ли кто-нибудь помочь мне в этом,

Спасибо

Answer 1

Вы можете попробовать использовать .eq(0), чтобы выбрать первый элемент в коллекции, предоставленный вам .prev () и .next ().

Обратите внимание, что .next() и .prev(), как и большинство методов jQuery, работают с коллекцией. Таким образом, если ваш селектор '.showarea' выбирает несколько элементов, то .next() выберет следующий родственный элемент для каждого элемента, выбранного с помощью '.showarea', и аналогично для .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

Ниже будет вращаться, поэтому, если вы нажмете назад на первый элемент, появится последний элемент ...

Демо здесь

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

});