Responsive jQuery Slider

tsbmusic

Erfahrenes Mitglied
Moin,

ich arbeite gerade an einem responsiven jQuery Slider mit Layern und habe ein Problem mit der Position der Layer wenn die Größe des Sliders geändert wird. (Durch ändern der Fenstergröße)

Also ich nehme die ursprüngliche Breite des Sliders und dann die aktuelle um so den Koeffizienten zu finden um die restlichen Größen zu berechnen. Hier ist der Code:

Javascript:
      _resize: function(){

        var self = this;

        var factor = this.$el.width() < this.options.width ? 1 / this.options.width * this.$el.width() : 1;

        var new_height = Math.ceil(this.options.height * factor);

        //Resize slider
        this.$el.animate({
          maxHeight: new_height,
          height: this.$items.eq(this.current).height()
        }, {
          duration: 100
        });

        //resize layers
        this.$el.find('.layer_container').find('.slider_layer').each(function(){

          $(this).css({
            '-moz-transform': 'scale('+factor+','+factor+')',
            '-webkit-transform': 'scale('+factor+','+factor+')',
            '-ms-transform': 'scale('+factor+','+factor+')',
            '-o-transform': 'scale('+factor+','+factor+')',
            'transform': 'scale('+factor+','+factor+')',
            left: $(this).data('position-x') * factor + 'px',
            top: $(this).data('position-y') * factor + 'px'
          });

        });

      }

Die Standard-Position der Layer haben diese im data-Attribut gespeichert und werden dann mit dem Faktor multipliziert um die neue Position zu erhalten. Die neue Position ist aber nicht da wo sie seien soll sonder immer ein Stück zu weit. Woran kann das liegen?

tsbmusic
 

Neue Beiträge

Zurück