title: How to have multiple owl carousel sliders on the same page and move 1 item with click?
body: <p>I am going nuts with a problem I cannot solve on my own.
  I am creating a single pager that features multiple owl carousel slideshows. All the information is being fed in with variables because I am using the kirby cms. So therefore I cannot just add more classes or IDs to each unique slideshow because the whole thing needs to be working with a cms.</p>
  
  <p>What I need this page to do but cannot figure out how, is: I want the user to be able to click on one image in the slideshow which then scrolls automaticly to the center (I am using <code>center: true</code> in the owl carousel settings). What is happening, is: All the slideshows on the page are moving their items, which is of course not what I want it to do.</p>
  
  <p>Here's my code:</p>
  
  <p>JS</p>
  
  <pre><code>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' ) );
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.item {
    cursor: pointer;
    transition: margin 0.4s ease;
  }
  .item.center {
    cursor: auto;
    margin: 0;
  }
  .item:not(.center) &gt; div:hover {
    opacity: .75;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;?php foreach($data-&gt;children()-&gt;visible() as $singleproject): ?&gt;
  
   &lt;div class="project-container"&gt;
  
    &lt;div class="owl-carousel owl-theme project-container-height-adj"&gt;
  
     &lt;?php foreach($singleproject-&gt;images() as $image): ?&gt;
      &lt;div class="item"&gt;
       &lt;img src="&lt;?= $image-&gt;url() ?&gt;" /&gt;
      &lt;/div&gt;
     &lt;?php endforeach ?&gt;
  
    &lt;/div&gt;
  
    &lt;h1&gt;&lt;?php echo $singleproject-&gt;title() ?&gt;&lt;/h1&gt;
    &lt;h2&gt;&lt;?php echo $singleproject-&gt;description() ?&gt;&lt;/h2&gt;
  
   &lt;/div&gt;
  
  &lt;?php endforeach ?&gt;
  </code></pre>
  
  <p>I basically know that the problem is the <code>.item</code> selector: my JS is making every <code>.item</code> on the page move. But I honestly don't know how to just access the <code>.item</code>s that belong to the same div as the <code>.item</code> I am clicking on when I want my slideshow to move.</p>
  
  <p>Can please anyone help me?
  Much appreciated</p>