0

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.

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 center: true 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.

Here's my code:

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 ?>

I basically know that the problem is the .item selector: my JS is making every .item on the page move. But I honestly don't know how to just access the .items that belong to the same div as the .item I am clicking on when I want my slideshow to move.

Can please anyone help me? Much appreciated

tiny dog boots
  • 1
  • 4
  • 2
    Try replacing `$owl` with `$(this).parent()` in your click handler. –  Oct 05 '17 at 23:24
  • Wow, thank you. That solved the problem regarding the universal sliding but created a new one (yey!): Now when I click, it skips every other item (instead of sliding one, it slides two items). – tiny dog boots Oct 05 '17 at 23:30

0 Answers0