重新创建功能以在按钮中单击以执行相同的任务

Question

问候。我有一个图像轮播，可让您单击它，并使单击的图像成为活动图像，并在图像顶部显示文本。我希望上一个（prevSlide）和下一个（nextSlide）按钮执行相同的功能。我很难完成此操作。

感谢您的帮助。

JavaScript：

            var galleryInner = $('.field--name-field-photo-gallery');

            var galleryInnerItem = $('.field--name-field-photo-gallery .field__item');

            var galleryInnerSize = $('.field--name-field-photo-gallery >.field__item').length;

            var finalLength = galleryInnerSize * 170 - 850;
            var slidePos = 0;
            var nextSlide = $('.next-pg');
            var imageActive = $('.active-slide');
            var prevSlide = $('.prev-pg');
            galleryInner.css('width', finalLength);
            var activeDescription = $('.active-description');


            galleryInnerItem.on('click', function () {
                galleryInnerItem.removeClass('active-slide');
                $(this).addClass('active-slide');
                var thisImage = $(this).find('img').attr('src');
                var thisDescription = $(this).find('.field--name-field-summary p').text();
                activeDescription.text(thisDescription);
                imageActive.attr('src', thisImage);
            });

            nextSlide.on('click', function () {
                if (slidePos > -finalLength){
                    slidePos = slidePos - 170;
                    galleryInner.css('left', slidePos);
                }
            });


            prevSlide.on('click', function () {
                if (slidePos !== 0){
                    slidePos = slidePos + 170;
                    galleryInner.css('left', slidePos);
                };
            })

HTML：

<div class="image-active">
  <img class="active-slide">
  <p class="active-description"></p>
</div>

<div class="galerry-interior">
  <img class="gallerybg" src="/themes/defeatdd/img/inline-images/gallerybg.png">
   <div class="prev-pg">
     <img class="active" src="/themes/defeatdd/img/inline-images/prev-og.png">
     <img class="inactive" src="/themes/defeatdd/img/inline-images/prevg.png">
   </div>
   <div class="gallery-container">

    <div class="gallery-wrapper">
      <div class="field field--name-field-photo-gallery field--type-field-collection field--label-hidden field__items quickedit-field"> 
      <div class="field__item active-slide"></div>
      <div class="field__item">IMAGE</div>
      <div class="field__item">IMAGE</div>
      <div class="field__item">IMAGE</div>
      <div class="field__item">IMAGE</div>
      </div>
    </div>
</div>
<div class="prev-pg">BUTTON</div>
<div class="next-pg">BUTTON</div>