javascriptでhorizo​​nSwiperイベントをトリガーした現在の要素IDを取得するにはどうすればよいですか？

Question

私はphp（Yii2）のウェブサイトにhorizo​​nSwiperを実装しています.1つのアルバムの画像を左と右のスクロールでスワイプするだけでなく、そのページに複数のアルバムがそれぞれ異なるIDを持っています。そして、左/右にスクロールするときにlazyloadingを追加するか、左右にスワイプする必要があります。しかし、現在選択されているdiv idを取得してスクロールイメージのアルバムIDを見つけられませんでした。

次のように私は、swiperを実装するための

$('.horizon-swiper.fix-item-width').horizonSwiper({ 
    showItems: 7, 
    arrows: true, 
    onSlideStart: function(){ 
    alert('slide started'); 
    }, 
    onDragStart: function(){ 
    alert('drag started'); 
    } 
}); 

を http://horizon-swiper.sebsauer.de/

そして、私のjavascriptのコードを次のリンクを使用している私は.horizo​​n-swiper.fix-「1で私のアルバムIDを追加しましたアイテムの幅」のdivと

onSlideStartとonDragStart関数内で私のHTMLはリクであることを取得しますeは、

<div class="horizon-swiper fix-item-width" id="alb_<?php echo $album['albumId']; ?>"> 
    <div class="horizon-item" data-horizon-index="0" id="img_<?php echo $album['albumId']; ?>_<?php echo $count; ?>"> 
    <div class="card view view-second"> 
     <img class="img responsive " src="<?php echo $baseurl; ?>/images/uploaded_images/profile/<?php echo $img['img']; ?>" width="100%;" height="350px;"> 
    </div> 
    </div> 
</div> 

を次のこのHTMLがループ

ためであることに注意してください誰もがこのための一つの解決策を見つけるためのお手伝いをすることはできますか？

は、私は、ソースコードの地平線 - swiper.jsを見てきました

Answer 1

...事前にありがとうございます。しかし、私が考える限り、それはあなたがスワイパーが起こっている現在の要素の参照を得ることができる機能を持っていない（申し訳ありませんが間違っているかもしれない、私はそれを深くチェックする十分な時間がなかった）。だから私はhorizo​​n-swiper.jsファイルを少し修正しました。そして、あなたはswiperが起こっている現在の要素のリファレンスを得ることができます。

地平線-swiper.jsファイルの先頭に、私はただの設定でもう一つの値が "currentElm"

という名前で追加し、次のオブジェクトを追加している

var settings = { 

// Default settings 
item: '.horizon-item', 
showItems: 'auto', 
dots: false, 
numberedDots: false, 
arrows: true, 
arrowPrevText: '', 
arrowNextText: '', 
animationSpeed: 500, 
mouseDrag: true, 

// Methods and callbacks 
onStart: function onStart() {}, 
onEnd: function onEnd() {}, 
onSlideStart: function onSlideStart() {}, 
onSlideEnd: function onSlideEnd() {}, 
onDragStart: function onDragStart() {}, 
onDragEnd: function onDragEnd() {}, 

    }; 

var settings = { 

// Default settings 
item: '.horizon-item', 
showItems: 'auto', 
dots: false, 
numberedDots: false, 
arrows: true, 
arrowPrevText: '', 
arrowNextText: '', 
animationSpeed: 500, 
mouseDrag: true, 

// Methods and callbacks 
onStart: function onStart() {}, 
onEnd: function onEnd() {}, 
onSlideStart: function onSlideStart() {}, 
onSlideEnd: function onSlideEnd() {}, 
onDragStart: function onDragStart() {}, 
onDragEnd: function onDragEnd() {}, 
currentElm:"" 
    }; 

と交換機能

Plugin.prototype.getElem=function(){ 
    this.settings.currentElm=this.$element; 
} 

Plugin.prototype.init機能

後

と

Plugin.prototype.init = function() { 
    var that = this; 

    that._setWrapper(); 
    that._addArrows(); 
    that._addDots(); 
    that._mouseDrag(); 
    that._setSizes(); 
    that._resize(); 

    that._checkPosition(); 
    that.getElem(); //call here our newly made function 
    that.initialized = true; 
    }; 

で

Plugin.prototype.init = function() { 
    var that = this; 

    that._setWrapper(); 
    that._addArrows(); 
    that._addDots(); 
    that._mouseDrag(); 
    that._setSizes(); 
    that._resize(); 

    that._checkPosition(); 
    that.initialized = true; 
    }; 

を交換する今、あなたは、次のような要素の参照を取得することができます。

$('.horizon-swiper.fix-item-width').horizonSwiper({ 
    arrows: true, 
    dots:true, 
    onSlideStart: function(){ 
    console.log($(this)[0].currentElm.attr('id')); 
    }, 
    onDragStart: function(){ 

    } 
}); 

各divにid属性があることを確認してください。 これが役立つことを願っています。