0

我对自己无法解决的问题发疯了。我正在创建一个具有多个猫头鹰轮播幻灯片的寻呼机。因为我使用的是 kirby cms，所以所有信息都通过变量输入。因此，我不能只为每个独特的幻灯片添加更多的类或 ID，因为整个事情都需要使用 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页面上的每一个都移动。但老实说，当我希望幻灯片移动时，我不知道如何访问与我单击.item的属于同一 div 的 s 。.item

可以请任何人帮助我吗？非常感激

4

0 回答 0