Как иметь несколько слайдеров для совы на одной странице и перемещать 1 элемент одним нажатием?

Question

Я схожу с ума от проблемы, которую не могу решить самостоятельно. Я создаю один пейджер с несколькими слайд-шоу с каруселью для сов. Вся информация подается с переменными, потому что я использую Kirby CMS. Поэтому я не могу просто добавить больше классов или идентификаторов для каждого уникального слайд-шоу, потому что все это должно работать с CMS.

Мне нужна эта страница, но я не могу понять, как это сделать: я хочу, чтобы пользователь мог щелкнуть одно изображение в слайд-шоу, которое затем автоматически прокручивается к центру (я использую center: true в настройках совы карусели). Происходит следующее: все слайд-шоу на странице перемещают свои элементы, что, конечно, не то, что я хочу.

Вот мой код:

JS

var $owl = $('.owl-carousel');

$owl.children().each( function( index ) {
$(this).attr( 'data-position', index ); // NB: .attr() instead of .data()
});

$owl.owlCarousel({
margin: 20,
nav: false,
dots: true,
autoWidth:true,
items: 3,
loop: false, 
center: true,
});

$(document).on('click', '.item', function() {
$owl.trigger('to.owl.carousel', $(this).data( 'position' ) );
});

CSS

.item {
  cursor: pointer;
  transition: margin 0.4s ease;
}
.item.center {
  cursor: auto;
  margin: 0;
}
.item:not(.center) > div:hover {
  opacity: .75;
}

HTML

<?php foreach($data->children()->visible() as $singleproject): ?>

 <div class="project-container">

  <div class="owl-carousel owl-theme project-container-height-adj">

   <?php foreach($singleproject->images() as $image): ?>
    <div class="item">
     <img src="<?= $image->url() ?>" />
    </div>
   <?php endforeach ?>

  </div>

  <h1><?php echo $singleproject->title() ?></h1>
  <h2><?php echo $singleproject->description() ?></h2>

 </div>

<?php endforeach ?>

Я в основном знаю, что проблема заключается в .item селектор: мой JS делает каждый .item на страницу переместить. Но я, честно говоря, не знаю, как просто получить доступ к .items, которые принадлежат к тому же div, что и .item Я нажимаю, когда хочу, чтобы мое слайд-шоу двигалось.

Может кто-нибудь помочь мне? Очень признателен