Добавить Далее Предыдущая кнопка эта галерея миниатюр

Question

Пожалуйста, помогите мне включить кнопки «Далее», «Предыдущая», работать вместе с миниатюрой, пожалуйста. Миниатюрные клики работают отлично. Я хочу, чтобы стрелки навигации работали вместе с миниатюрой. Спасибо, ребята!

Ниже вы можете увидеть, как это работает. Просто нужно включить стрелки для навигации, как сейчас.

Я бы не хотел менять текущую структуру div, так как этот шаблон уже реализован,

  // Product image gallery
    $(".thumbLink").click(function(event) {        
        var image = $(this).attr("rel");
        $(".thumbLink").removeClass('active');
        $( this ).addClass( "active" );
        $('.main-pimage').hide();
        $('.main-pimage').fadeIn('slow');
        $('.main-pimage').html('<img src="' + image + '" class="custom img-fluid"/>');
        return false;
    });

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
        <!-- Product Gallery      -->
        <div class="col-md-5">
          <aside class="pgallery">     
            <div class="row">
              <!-- Thumbs -->
              <div class="col-lg-2">
                <div class="thumbnails d-flex flex-row flex-lg-column h-100">
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=AA" class="thumbLink active"><img width="" src="http://via.placeholder.com/50x50?text=A" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=BB" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=B" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=CC" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=C" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=DD" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=D" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=EE" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=E" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=FF" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=F" alt="" class="pthumb img-fluid"></a>
                  </div>                  
                </div>
              </div>
              <!-- Thumbs -->

              <!-- Main image -->
              <div class="col-lg-10">
                <div class="zoom main-pimage" id="izoomy">
                    <img src="http://via.placeholder.com/300x300?text=AA" alt="" class="custom img-fluid">
                </div>
                <div class="slidy">
                  <a id="prev">Prev</a>
                  <a id="next">Next</a>
                </div>
              </div>
              <!-- Main image -->
            </div>

          </aside>
        </div>
        <!-- Product Gallery ends -->
</div>

Answer 1

Вы можете использовать jQuery для поиска следующей / предыдущей миниатюры ...

$("#next").click(function(event) {        
    $(".thumbLink.active").parent().next().find(".thumbLink").trigger('click');
});

$("#prev").click(function(event) {        
    $(".thumbLink.active").parent().prev().find(".thumbLink").trigger('click');
});

Рабочая демоверсия

Answer 2

Попробуйте приведенный ниже пример

$(".thumbLink").click(function(event) {        
         var image = $(this).attr("rel");
        $(".thumbLink").removeClass('active');
        $( this ).addClass( "active" );
        $('.main-pimage').hide();
        $('.main-pimage').fadeIn('slow');
        $('.main-pimage').html('<img src="' + image + '" class="custom img-fluid"/>');

        return false;
    });

 $("#next").click(function() {
 $('.thumbLink.active').parent('.tsack').next('div').find($('.thumbLink')).trigger('click')
});

$("#prev").click(function() {
  $('.thumbLink.active').parent('.tsack').prev('div').find($('.thumbLink')).trigger('click')
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
        <!-- Product Gallery      -->
        <div class="col-md-5">
          <aside class="pgallery">     
            <div class="row">
              <!-- Thumbs -->
              <div class="col-lg-2">
                <div class="thumbnails d-flex flex-row flex-lg-column h-100">
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=AA" class="thumbLink active"><img width="" src="http://via.placeholder.com/50x50?text=A" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=BB" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=B" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=CC" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=C" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=DD" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=D" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=EE" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=E" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=FF" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=F" alt="" class="pthumb img-fluid"></a>
                  </div>                  
                </div>
              </div>
              <!-- Thumbs -->

              <!-- Main image -->
              <div class="col-lg-10">
                <div class="zoom main-pimage" id="izoomy">
                    <img src="http://via.placeholder.com/300x300?text=AA" alt="" class="custom img-fluid">
                </div>
                <div class="slidy">
                  <a id="prev">Prev</a>
                  <a id="next">Next</a>
                </div>
              </div>
              <!-- Main image -->
            </div>

          </aside>
        </div>
        <!-- Product Gallery ends -->
</div>