njester
Cadet 2nd Year
- Registriert
- Aug. 2012
- Beiträge
- 25
Hallo,
ich versuche gerade mit jQuery einen Slider zu bauen. Da er für mehrere Slider auf einer Seite funktioniern soll, lege ich im HTML eine CSS-Klasse mit der Slider Nummer an z.B. (slide-1). Beim erzeugen des Sliderobjeketes kann ich dann die Nummer übergeben.
Leider wird jedoch beim erzeugen des 2. Objekts das erste überschrieben, sprich ich steuere mit den Buttons des ersten Sliders den zweiten.
Über Hilfe wie man das Problem behen kann wäre ich sehr dankbar
So wird der slider aufgerufen:
PS: Er geht 2 mal in die init() und übergibt die passenden Werte und lädt auch die richtigen Objekte.
ich versuche gerade mit jQuery einen Slider zu bauen. Da er für mehrere Slider auf einer Seite funktioniern soll, lege ich im HTML eine CSS-Klasse mit der Slider Nummer an z.B. (slide-1). Beim erzeugen des Sliderobjeketes kann ich dann die Nummer übergeben.
Leider wird jedoch beim erzeugen des 2. Objekts das erste überschrieben, sprich ich steuere mit den Buttons des ersten Sliders den zweiten.
Über Hilfe wie man das Problem behen kann wäre ich sehr dankbar
Code:
var sliderWidget = {
init: function( settings ){
this.config = {
sliderNumber: 0,
hasBullets: false,
hasThumbnails: false
};
$.extend( this.config, settings );
this.initials = {
$thumbnails: {},
$pictures: {},
$bntNext: {},
$btnPrev: {},
$bullets: {},
total: 0,
currentIndex: 0
};
$.extend( this, this.initials );
sliderWidget.setup();
},
setup: function(){
this.$pictures = $(".slide-"+this.config.sliderNumber);
this.$btnNext = $(".slider-btn-next-"+this.config.sliderNumber);
this.$btnPrev = $(".slider-btn-prev-"+this.config.sliderNumber);
if(this.config.hasThumbnails){
this.$thumbnails = $(".own-thumbnail-" + this.config.sliderNumber);
this.$thumbnails.click($.proxy(function(event){
this.config.currentIndex = $(event.currentTarget).index();
this.cycleItems();
},this));
}
this.$btnNext.click($.proxy(function () {
this.updateIndex(1);
this.cycleItems();
}, this));
this.$btnPrev.click($.proxy(function () {
this.updateIndex(-1);
this.cycleItems();
}, this));
this.total = this.$pictures.length;
if(this.config.hasBullets){
var $previewSlider = $(".preview-slider");
$previewSlider.append("<ul class='bullets'>");
for(var i = 0; i < this.total;i++){
$previewSlider.append("<li class='bullet bullet-" + this.config.sliderNumber +"'</li>");
}
$previewSlider.append("</ul>");
this.$bullets = $(".bullet-" + this.config.sliderNumber);
}
},
updateIndex: function(increment){
this.currentIndex += increment;
if (this.currentIndex > this.total - 1) {
this.currentIndex = 0;
}else if(this.currentIndex < 0){
this.currentIndex = this.total - 1;
}
},
cycleItems: function() {
var $picture = this.$pictures.eq(this.currentIndex);
if(this.config.hasThumbnails){
var $thumbnail = this.$thumbnails.eq(this.currentIndex);
this.$thumbnails.removeClass("active");
$thumbnail.addClass("active");
}
this.$pictures.removeClass("active");
$picture.addClass("active");
}
}
So wird der slider aufgerufen:
Code:
$(function() {
var args = {
hasThumbnails: true,
sliderNumber: 1,
hasBullets: true
}
var args2 = {
hasThumbnails: false,
sliderNumber: 2,
hasBullets: false
}
sliderWidget.init(args);
sliderWidget.init(args2);
});
PS: Er geht 2 mal in die init() und übergibt die passenden Werte und lädt auch die richtigen Objekte.
Zuletzt bearbeitet: