Mehrere Schieberegler/Karussells auf einer Seite

Question

Ich benutze "Datalife Engine" CMS mit "Entreprise" Vorlage. Es ist ein Slider, die wie dieser

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

Der Schieber mit diesem auf der Seite fügt läuft JS (glaube ich)

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

Diese aSlider Funktion

/* 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) 
; 

ist

Und meine Frage ist - Wie mehrere (4 genau) Schieberegler auf einer Seite hinzufügen? Ursache, wenn ich nur HTML-Code klonen, rufen alle Schieberegler die Funktion zur gleichen Zeit und die Aktualisierung ist Looping. Versucht, Funktion mit anderen Variablen zu klonen, aber fehlgeschlagen. Hilfe bitte.

Answer 1

Sie müssen jede Instanz in ein Array einfügen, wenn sie instanziiert wird. Dann können Sie jede Instanz unabhängig über ihre Array-Position referenzieren. dh.

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); 

dann die verschiedenen Methoden und Requisiten dieser Instanz zuzugreifen:

sliderArr[0].yourMethod(); 

Wenn Sie eine zweite Instanz hatte, würden Sie es auf die gleiche Weise zugreifen:

dh.

sliderArr[1].yourMethod();