Javascript 在一页上制作多个滑块/旋转木马

Javascript 在一页上制作多个滑块/旋转木马,javascript,jquery,html,css,slider,Javascript,Jquery,Html,Css,Slider,我正在使用“Datalife Engine”CMS和“Enterprise”模板。有一个滑块,它在页面上添加如下内容 <div id="slider-wrapper"> <div class="slider"> <div class="slide" style="background-image: url(/uploads/fotos/lager.jpg);"> <div class="cnt"> &

我正在使用“Datalife Engine”CMS和“Enterprise”模板。有一个滑块,它在页面上添加如下内容

<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>
这是aSlider函数

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

我的问题是-如何在一个页面上添加多个(4个)滑块?因为,如果我只是克隆html代码,所有的滑块都在同时调用函数,刷新正在循环。尝试用其他变量克隆函数,但失败。请提供帮助。

您需要在实例化每个实例时将其放入一个数组中,然后您可以通过其数组位置独立引用每个实例。 即

然后访问该实例的方法和道具:

sliderArr[0].yourMethod();
如果您有第二个实例,您将以相同的方式访问它:

 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();
 sliderArr[1].yourMethod();