1つのページに複数のスライダー/カルーセルを作成する

Question

"Entreprise"テンプレートで "Datalife Engine" CMSを使用しています。これはJSとスライダーが走るこの

<div id="slider-wrapper"> 
<div class="slider"> 
    <div class="slide" style="background-image: url(/uploads/fotos/lager.jpg);"> 
     <div class="cnt"> 
      <div class="slide-text"> 
       <h2>Duis felis tortor, consequat</h2> 
       <p>Duis felis tortor, consequat In sed elementum risus. Phasellus venenatis hendrerit pharetra. Suspendisse ultricies malesuada metus, non placerat lectus pellentesque at. Vivamus ut molestie lorem, non bibendum neque. Nam sagittis luctus egestas. Donec libero turpis, faucibus vitae iaculis vel, mattis at tortor.</p> 
      </div> 
     </div> 
    </div> 
    <div class="slide" style="background-image: url(/uploads/fotos/day_lager.jpg);"> 
     <div class="cnt"> 
      <div class="slide-text right-text"> 
       <h2>Phasellus venenatis hendrerit pharetra</h2> 
       <p>Duis felis tortor, consequat In sed elementum risus. Phasellus venenatis hendrerit pharetra. Suspendisse ultricies malesuada metus, non placerat lectus pellentesque at. Vivamus ut molestie lorem, non bibendum neque. Nam sagittis luctus egestas. Donec libero turpis, faucibus vitae iaculis vel, mattis at tortor.</p> 
      </div> 
     </div> 
    </div> 
</div> 
<span class="slider-button slider-button-prev"><i class="fa fa-angle-left"></i></span> 
<span class="slider-button slider-button-next"><i class="fa fa-angle-right"></i></span> 

のようにページに追加スライダー、（私は思う）

$(".slider").aSlider({ 
    prevBtn: '.slider-button-prev', 
    nextBtn: '.slider-button-next', 
    fadeSpeed: 500, // скорость затухания/появления слайда 
    autoPlay: true, // автоперелистывание слайдов (true/false) 
    autoPlayDelay: 5000, // время показа в слайдах в миллисекундах 
    slideDelay: 500 
}); 

がありますこれは

/* jQuery aSlider v1.2 */ 
; 
! function (e) { 
    jQuery.fn.aSlider = function (a) { 
     var a = e.extend({ 
       nextBtn: ".aSliderNext", 
       prevBtn: ".aSliderPrev", 
       fadeSpeed: 300, 
       autoPlay: !1, 
       autoPlayDelay: 3e3, 
       slideDelay: 0 
      }, a), 
      d = function() { 
       function d() { 
        e(a.nextBtn).click(), r = setTimeout(d, a.autoPlayDelay) 
       } 
       var t = e(this), 
        n = t.children(".slide:first-child"), 
        l = t.children(".slide:last-child"), 
        i = n.index(), 
        f = l.index(), 
        u = n; 
       if (t.css("overflow", "hidden"), t.find(".slide").fadeOut(0), n.fadeIn(0), e(a.nextBtn).click(function (e) { 
         return e.preventDefault(), u.index() != f ? (u.fadeOut(a.fadeSpeed), u = u.next().delay(a.slideDelay).fadeIn(a.fadeSpeed)) : (u.fadeOut(a.fadeSpeed), n.delay(a.slideDelay).fadeIn(a.fadeSpeed), u = n), !1 
        }), e(a.prevBtn).click(function (e) { 
         return e.preventDefault(), u.index() != i ? (u.fadeOut(a.fadeSpeed), u = u.prev().delay(a.slideDelay).fadeIn(a.fadeSpeed)) : (u.fadeOut(a.fadeSpeed), l.delay(a.slideDelay).fadeIn(a.fadeSpeed), u = l), !1 
        }), a.autoPlay) { 
        var r = setTimeout(d, a.autoPlayDelay); 
        t.parent().hover(function() { 
         clearTimeout(r) 
        }, function() { 
         r = setTimeout(d, a.autoPlayDelay) 
        }) 
       } 
      }; 
     return this.each(d) 
    } 
}(jQuery); 

// SmoothScroll for websites v1.2.1 
// Licensed under the terms of the MIT license. 
// People involved 
// - Balazs Galambosi (maintainer) 
// - Michael Herf  (Pulse Algorithm) 
; 

aSlider機能です

そして私の質問は - 複数の（正確には4つの）スライダーを1ページに追加するには？私はちょうどhtmlコードを複製する場合、すべてのスライダは同時に関数を呼び出しており、リフレッシュはループしています。他の変数と機能を複製しようとしましたが、失敗しました。助けてください。

Answer 1

各インスタンスをインスタンス化する際に配列に配置する必要があります。配列の位置からインスタンスを個別に参照できます。 すなわちそのインスタンスのメソッドや小道具にアクセスするための

その後

var sliderArr = []; 

var _slider = $(".slider").aSlider({ 
    prevBtn: '.slider-button-prev', 
    nextBtn: '.slider-button-next', 
    fadeSpeed: 500, // скорость затухания/появления слайда 
    autoPlay: true, // автоперелистывание слайдов (true/false) 
    autoPlayDelay: 5000, // время показа в слайдах в миллисекундах 
    slideDelay: 500 
}); 

sliderArr.push(_slider); 

：

sliderArr[0].yourMethod(); 

あなたが2番目のインスタンスを持っていた場合、あなたは同じようにアクセスします。

すなわち。

sliderArr[1].yourMethod();