0
Ich habe ein Schieber, ich möchte, dass sie in Reaktion auf machen das Problem ist die Größe des Schiebers in die jQueryMachen Sie einen Schieber in Reaktion (jQuery)
säen Datei, wie ich den Code bearbeiten können?
Code von jQuery
(function(window, $, undefined) {
\t var $event = $.event, resizeTimeout;
\t $event.special.smartresize \t = {
\t \t setup: function() {
\t \t \t $(this).bind("resize", $event.special.smartresize.handler);
\t \t },
\t \t teardown: function() {
\t \t \t $(this).unbind("resize", $event.special.smartresize.handler);
\t \t },
\t \t handler: function(event, execAsap) {
\t \t \t // Save the context
\t \t \t var context = this,
\t \t \t \t args \t = arguments;
\t \t \t // set correct event type
\t \t \t event.type = "smartresize";
\t \t \t if (resizeTimeout) { clearTimeout(resizeTimeout); }
\t \t \t resizeTimeout = setTimeout(function() {
\t \t \t \t jQuery.event.handle.apply(context, args);
\t \t \t }, execAsap === "execAsap"? 0 : 100);
\t \t }
\t };
\t $.fn.smartresize \t \t \t = function(fn) {
\t \t return fn ? this.bind("smartresize", fn) : this.trigger("smartresize", ["execAsap"]);
\t };
\t
\t $.Slideshow \t \t \t \t = function(options, element) {
\t
\t \t this.$el \t \t \t = $(element);
\t \t
\t \t /***** images ****/
\t \t
\t \t // list of image items
\t \t this.$list \t \t \t = this.$el.find('ul.ei-slider-large');
\t \t // image items
\t \t this.$imgItems \t \t = this.$list.children('li');
\t \t // total number of items
\t \t this.itemsCount \t \t = this.$imgItems.length;
\t \t // images
\t \t this.$images \t \t = this.$imgItems.find('img:first');
\t \t
\t \t /***** thumbs ****/
\t \t
\t \t // thumbs wrapper
\t \t this.$sliderthumbs \t = this.$el.find('ul.ei-slider-thumbs').hide();
\t \t // slider elements
\t \t this.$sliderElems \t = this.$sliderthumbs.children('li');
\t \t // sliding div
\t \t this.$sliderElem \t = this.$sliderthumbs.children('li.ei-slider-element');
\t \t // thumbs
\t \t this.$thumbs \t \t = this.$sliderElems.not('.ei-slider-element');
\t \t
\t \t // initialize slideshow
\t \t this._init(options);
\t \t
\t };
\t
\t $.Slideshow.defaults \t \t = {
\t \t // animation types:
\t \t // "sides" : new slides will slide in from left/right
\t \t // "center": new slides will appear in the center
\t \t animation \t \t \t : 'center', // sides || center
\t \t // if true the slider will automatically slide, and it will only stop if the user clicks on a thumb
\t \t autoplay \t \t \t : false,
\t \t // interval for the slideshow
\t \t slideshow_interval \t : 3000,
\t \t // speed for the sliding animation
\t \t speed \t \t \t : 800,
\t \t // easing for the sliding animation
\t \t easing \t \t \t : '',
\t \t // percentage of speed for the titles animation. Speed will be speed * titlesFactor
\t \t titlesFactor \t \t : 0.60,
\t \t // titles animation speed
\t \t titlespeed \t \t \t : 800,
\t \t // titles animation easing
\t \t titleeasing \t \t \t : '',
};
\t
\t $.Slideshow.prototype \t \t = {
\t \t _init \t \t \t \t : function(options) {
\t \t \t
\t \t \t this.options \t \t = $.extend(true, {}, $.Slideshow.defaults, options);
\t \t \t
\t \t \t // set the opacity of the title elements and the image items
\t \t \t this.$imgItems.css('opacity', 0);
\t \t \t this.$imgItems.find('div.ei-title > *').css('opacity', 0);
\t \t \t
\t \t \t // index of current visible slider
\t \t \t this.current \t \t = 0;
\t \t \t
\t \t \t var _self \t \t \t = this;
\t \t \t
\t \t \t // preload images
\t \t \t // add loading status
\t \t \t this.$loading \t \t = $('<div class="ei-slider-loading">Loading</div>').prependTo(_self.$el);
\t \t \t
\t \t \t $.when(this._preloadImages()).done(function() {
\t \t \t \t
\t \t \t \t // hide loading status
\t \t \t \t _self.$loading.hide();
\t \t \t \t
\t \t \t \t // calculate size and position for each image
\t \t \t \t _self._setImagesSize();
\t \t \t \t
\t \t \t \t // configure thumbs container
\t \t \t \t _self._initThumbs();
\t \t \t \t
\t \t \t \t // show first
\t \t \t \t _self.$imgItems.eq(_self.current).css({
\t \t \t \t \t 'opacity' \t : 1,
\t \t \t \t \t 'z-index' \t : 10
\t \t \t \t }).show().find('div.ei-title > *').css('opacity', 1);
\t \t \t \t
\t \t \t \t // if autoplay is true
\t \t \t \t if(_self.options.autoplay) {
\t \t \t \t
\t \t \t \t \t _self._startSlideshow();
\t \t \t \t
\t \t \t \t }
\t \t \t \t
\t \t \t \t // initialize the events
\t \t \t \t _self._initEvents();
\t \t \t
\t \t \t });
\t \t \t
\t \t },
\t \t _preloadImages \t \t : function() {
\t \t \t
\t \t \t // preloads all the large images
\t \t \t
\t \t \t var _self \t = this,
\t \t \t \t loaded \t = 0;
\t \t \t
\t \t \t return $.Deferred(
\t \t \t
\t \t \t \t function(dfd) {
\t \t \t
\t \t \t \t \t _self.$images.each(function(i) {
\t \t \t \t \t \t
\t \t \t \t \t \t $('<img/>').load(function() {
\t \t \t \t \t \t
\t \t \t \t \t \t \t if(++loaded === _self.itemsCount) {
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t dfd.resolve();
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t }
\t \t \t \t \t \t
\t \t \t \t \t \t }).attr('src', $(this).attr('src'));
\t \t \t \t \t
\t \t \t \t \t });
\t \t \t \t \t
\t \t \t \t }
\t \t \t \t
\t \t \t).promise();
\t \t \t
\t \t },
\t \t _setImagesSize \t \t : function() {
\t \t \t
\t \t \t // save ei-slider's width
\t \t \t this.elWidth \t = this.$el.width();
\t \t \t
\t \t \t var _self \t = this;
\t \t \t
\t \t \t this.$images.each(function(i) {
\t \t \t \t
\t \t \t \t var $img \t = $(this);
\t \t \t \t \t imgDim \t = _self._getImageDim($img.attr('src'));
\t \t \t \t \t
\t \t \t \t $img.css({
\t \t \t \t \t width \t \t : imgDim.width,
\t \t \t \t \t height \t \t : imgDim.height,
\t \t \t \t \t marginLeft \t : imgDim.left,
\t \t \t \t \t marginTop \t : imgDim.top
\t \t \t \t });
\t \t \t \t
\t \t \t });
\t \t
\t \t },
\t \t _getImageDim : function(src) {
\t \t \t
\t \t \t var $img = new Image();
\t \t \t \t \t \t \t
\t \t \t $img.src = src;
\t \t \t \t \t
\t \t \t var c_w \t \t = this.elWidth,
\t \t \t \t c_h \t \t = this.$el.height(),
\t \t \t \t r_w \t \t = c_h/c_w,
\t \t \t \t
\t \t \t \t i_w \t \t = $img.width,
\t \t \t \t i_h \t \t = $img.height,
\t \t \t \t r_i \t \t = i_h/i_w,
\t \t \t \t new_w, new_h, new_left, new_top;
\t \t \t \t \t
\t \t \t if(r_w > r_i) {
\t \t \t \t
\t \t \t \t new_h \t = c_h;
\t \t \t \t new_w \t = c_h/r_i;
\t \t \t
\t \t \t }
\t \t \t else {
\t \t \t
\t \t \t \t new_h \t = c_w * r_i;
\t \t \t \t new_w \t = c_w;
\t \t \t
\t \t \t }
\t \t \t \t \t
\t \t \t return {
\t \t \t \t width \t : new_w,
\t \t \t \t height \t : new_h,
\t \t \t \t left \t : (c_w - new_w)/2,
\t \t \t \t top \t \t : (c_h - new_h)/2
\t \t \t };
\t \t
\t \t },
\t \t _initThumbs \t \t \t : function() {
\t \t
\t \t \t // set the max-width of the slider elements to the one set in the plugin's options
\t \t \t // also, the width of each slider element will be 100%/total number of elements
\t \t \t this.$sliderElems.css({
\t \t \t \t 'width' \t \t : 100/this.itemsCount + '%'
\t \t \t });
\t \t \t
\t \t \t // set the max-width of the slider and show it
\t \t \t this.$sliderthumbs.css('width', this.options.thumbMaxWidth * this.itemsCount + 'px').show();
\t \t \t
\t \t },
\t \t _startSlideshow \t \t : function() {
\t \t
\t \t \t var _self \t = this;
\t \t \t
\t \t \t this.slideshow \t = setTimeout(function() {
\t \t \t \t
\t \t \t \t var pos;
\t \t \t \t
\t \t \t \t (_self.current === _self.itemsCount - 1) ? pos = 0 : pos = _self.current + 1;
\t \t \t \t
\t \t \t \t _self._slideTo(pos);
\t \t \t \t
\t \t \t \t if(_self.options.autoplay) {
\t \t \t \t
\t \t \t \t \t _self._startSlideshow();
\t \t \t \t
\t \t \t \t }
\t \t \t
\t \t \t }, this.options.slideshow_interval);
\t \t
\t \t },
\t \t // shows the clicked thumb's slide
\t \t _slideTo \t \t \t : function(pos) {
\t \t \t
\t \t \t // return if clicking the same element or if currently animating
\t \t \t if(pos === this.current || this.isAnimating)
\t \t \t \t return false;
\t \t \t
\t \t \t this.isAnimating \t = true;
\t \t \t
\t \t \t var $currentSlide \t = this.$imgItems.eq(this.current),
\t \t \t \t $nextSlide \t \t = this.$imgItems.eq(pos),
\t \t \t \t _self \t \t \t = this,
\t \t \t \t
\t \t \t \t preCSS \t \t \t = {zIndex \t : 10},
\t \t \t \t animCSS \t \t \t = {opacity \t : 1};
\t \t \t
\t \t \t // new slide will slide in from left or right side
\t \t \t if(this.options.animation === 'sides') {
\t \t \t \t
\t \t \t \t preCSS.left \t \t = (pos > this.current) ? -1 * this.elWidth : this.elWidth;
\t \t \t \t animCSS.left \t = 0;
\t \t \t
\t \t \t } \t
\t \t \t
\t \t \t // titles animation
\t \t \t $nextSlide.find('div.ei-title > h2')
\t \t \t \t \t .css('margin-right', 50 + 'px')
\t \t \t \t \t .stop()
\t \t \t \t \t .delay(this.options.speed * this.options.titlesFactor)
\t \t \t \t \t .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing)
\t \t \t \t \t .end()
\t \t \t \t \t .find('div.ei-title > h3')
\t \t \t \t \t .css('margin-right', -50 + 'px')
\t \t \t \t \t .stop()
\t \t \t \t \t .delay(this.options.speed * this.options.titlesFactor)
\t \t \t \t \t .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing)
\t \t \t
\t \t \t $.when(
\t \t \t \t
\t \t \t \t // fade out current titles
\t \t \t \t $currentSlide.css('z-index' , 1).find('div.ei-title > *').stop().fadeOut(this.options.speed/2, function() {
\t \t \t \t \t // reset style
\t \t \t \t \t $(this).show().css('opacity', 0); \t
\t \t \t \t }),
\t \t \t \t
\t \t \t \t // animate next slide in
\t \t \t \t $nextSlide.css(preCSS).stop().animate(animCSS, this.options.speed, this.options.easing),
\t \t \t \t
\t \t \t \t // "sliding div" moves to new position
\t \t \t \t this.$sliderElem.stop().animate({
\t \t \t \t \t left \t : this.$thumbs.eq(pos).position().left
\t \t \t \t }, this.options.speed)
\t \t \t \t
\t \t \t).done(function() {
\t \t \t \t
\t \t \t \t // reset values
\t \t \t \t $currentSlide.css('opacity' , 0).find('div.ei-title > *').css('opacity', 0);
\t \t \t \t \t _self.current \t = pos;
\t \t \t \t \t _self.isAnimating \t \t = false;
\t \t \t \t
\t \t \t \t });
\t \t \t \t
\t \t },
\t \t _initEvents \t \t \t : function() {
\t \t \t
\t \t \t var _self \t = this;
\t \t \t
\t \t \t // window resize
\t \t \t $(window).on('smartresize.eislideshow', function(event) {
\t \t \t \t
\t \t \t \t // resize the images
\t \t \t \t _self._setImagesSize();
\t \t \t
\t \t \t \t // reset position of thumbs sliding div
\t \t \t \t _self.$sliderElem.css('left', _self.$thumbs.eq(_self.current).position().left);
\t \t \t
\t \t \t });
\t \t \t
\t \t \t // click the thumbs
\t \t \t this.$thumbs.on('click.eislideshow', function(event) {
\t \t \t \t
\t \t \t \t if(_self.options.autoplay) {
\t \t \t \t
\t \t \t \t \t clearTimeout(_self.slideshow);
\t \t \t \t \t _self.options.autoplay \t = false;
\t \t \t \t
\t \t \t \t }
\t \t \t \t
\t \t \t \t var $thumb \t = $(this),
\t \t \t \t \t idx \t \t = $thumb.index() - 1; // exclude sliding div
\t \t \t \t \t
\t \t \t \t _self._slideTo(idx);
\t \t \t \t
\t \t \t \t return false;
\t \t \t
\t \t \t });
\t \t \t
\t \t }
\t };
\t
\t var logError \t \t \t \t = function(message) {
\t \t
\t \t if (this.console) {
\t \t \t
\t \t \t console.error(message);
\t \t \t
\t \t }
\t \t
\t };
\t
\t $.fn.eislideshow \t \t \t = function(options) {
\t
\t \t if (typeof options === 'string') {
\t \t
\t \t \t var args = Array.prototype.slice.call(arguments, 1);
\t \t \t this.each(function() {
\t \t \t
\t \t \t \t var instance = $.data(this, 'eislideshow');
\t \t \t \t
\t \t \t \t if (!instance) {
\t \t \t \t \t logError("cannot call methods on eislideshow prior to initialization; " +
\t \t \t \t \t "attempted to call method '" + options + "'");
\t \t \t \t \t return;
\t \t \t \t }
\t \t \t \t
\t \t \t \t if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
\t \t \t \t \t logError("no such method '" + options + "' for eislideshow instance");
\t \t \t \t \t return;
\t \t \t \t }
\t \t \t \t
\t \t \t \t instance[ options ].apply(instance, args);
\t \t \t
\t \t \t });
\t \t
\t \t }
\t \t else {
\t \t
\t \t \t this.each(function() {
\t \t \t
\t \t \t \t var instance = $.data(this, 'eislideshow');
\t \t \t \t if (!instance) {
\t \t \t \t \t $.data(this, 'eislideshow', new $.Slideshow(options, this));
\t \t \t \t }
\t \t \t
\t \t \t });
\t \t
\t \t }
\t \t
\t \t return this;
\t \t
\t };
\t
})(window, jQuery);Wie kann ich bearbeiten, dass sie reaktionsfähiger zu machen? Kannst du ein Beispiel geben ?
ich einen Schieber haben und es funktioniert, aber ich möchte, dass meine machen Website reagiert, aber ich habe ein Problem. Weil die jQuery-Datei Breite und Höhe hat, also muss ich wissen, wie man die Breite in jQuery-Datei bearbeitet. – saad12
Sorry, aber ich muss dich fragen ... Warum ersetzt man nicht für ein neues mit everything? Ich meine ... der Code von bxSlider ist fertig! Sie haben ein ansprechendes System und Effekte, die angewendet werden können. Warum versuchen Sie, Ihren eigenen Code neu zu erstellen? Ich weiß nicht, wie viel Zeit du verbracht hast, aber in deinem Fall, glaube ich, müssen wir das Rad nicht neu erfinden. Wir können damit die Dinge schneller und besser erstellen. Deshalb verwenden wir zum Beispiel jQuery. Bitte beachten Sie diesen Kommentar mit nur einem Vorschlag, ich versuche nur zu helfen. Prost! –
Ich habe zwei Schieberegler, nicht ansprechend, also, ich möchte sie reagieren, Wenn Sie mir Ihre Gmail geben möchten, um den Code für den Schieberegler zu senden, wenn ich es diese Funktion machen $ (Dokument) .ready (Funktion() { $ ('. bxslider'). bxSlider(); }); in meinem Code? – saad12