0

自力では解けない問題に頭がおかしくなる。複数のフクロウ カルーセル スライドショーを備えた 1 つのページャーを作成しています。カービィ cms を使用しているため、すべての情報が変数で入力されています。したがって、すべてが cms で動作する必要があるため、一意のスライドショーごとにクラスや ID を追加することはできません。

このページで実行する必要があるのですが、その方法がわかりません: ユーザーがスライドショーの 1 つの画像をクリックして、自動的に中央にスクロールできるようにしたい (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