Auto height

Please, someone can give a code to eliminate the fixed height for sliders? I tried on several ways, the height is always the same defined on settings page. How I can change it for auto height?

Hi,

The height setting is correlated with the width setting, not the slide height. For example, if you set your slider to be 300X300px and allow full width and height resize, if when displayed the fullwidth slider will have 800px width, the height will also become 800px (1:1 ratio).

For now there’s no setting to resize the slider according to content inside it. You can modify the theme though to make it work as you need.

First step (optional but needed) is to create an additional slider themes folder inside wp-content to avoid having your changes overwritten when you will update the plugin on future releases. This process is described here: How to move FA slider themes outside the plugin folder.

Next, you will need to modify theme Simple starter.min.js (and starter.dev.js) like this (make sure you modify on the copy you made in your external folder):

;(function($){
	$(document).ready( function(){
		$('.fa_slider_simple').FeaturedArticles({
			slide_selector 	: '.fa_slide',
			nav_prev 		: '.go-back',
			nav_next		: '.go-forward',
			nav_elem		: '.main-nav .fa-nav',
			effect	: false,
			begin	: load,
			before	: before,
			after	: after,
			stop	: stop,
			start	: start
		});
	});

	var load = function(){
		var options = this.settings(),
			self = this;
		this.progressBar = $(this).find('.progress-bar');
		this.mouseOver;
		this.sliderHeight = $(this).height();
		var h = $( this.slides()[0] ).find(options.content_container).outerHeight() + 40;
		if( h > this.sliderHeight ){
			$(this).css({'max-height':h}).animate({'height' : h}, { queue: false, duration:200 });
		}else{
			$(this).css({'max-height':this.sliderHeight}).animate({'height' : this.sliderHeight}, { queue: false, duration:200 });
		}
	}

	var before = function( d ){
		var options = this.settings();
		this.progressBar.stop().css({'width':0});	

		var h = $( d.next ).find(options.content_container).outerHeight() + 40;
		if( h > this.sliderHeight ){
			$(this).css({'max-height':h}).animate({'height' : h}, { queue: false, duration:200 });
		}else{
			$(this).css({'max-height':this.sliderHeight}).animate({'height' : this.sliderHeight}, { queue: false, duration:200 });
		}
	}

	var after = function(){
		var options 	= this.settings(),
			duration 	= options.slide_duration;

		if( this.mouseOver || this.stopped || !options.auto_slide ){
			return;
		}

		this.progressBar.css({width:0}).animate(
			{'width' : '100%'},
			{duration: duration, queue:false, complete: function(){
				$(this).css({'width':0});
			}
		});
	}

	var stop = function(){
		this.progressBar.stop().css({'width':0});
		this.mouseOver = true;
	}

	var start = function(){
		this.mouseOver = false;
		if( this.animating() ){
			return;
		}

		var options 	= this.settings(),
			duration 	= options.slide_duration;		

		this.progressBar.css({width:0}).animate(
			{'width' : '100%'},
			{duration: duration, queue:false, complete: function(){
				$(this).css({'width':0});
			}
		});
	}

})(jQuery);

Optionally, you can minify starter.min.js. This should be it, I tested this and it works by resizing the slider height according to each individual slide height when changing slides.

THANK YOU CodeFlavors!

It’s perfect, works like a charm!

I am happy now. Thanks again for this awesome support!

My pleasure, this is a perfect example of what you can do with this plugin. I would appreciate it if you could give the plugin a rating and mark the ticket as resolved, thank you.

Done! ??

Thank you, much appreciated. If you ever run into trouble with anything else, just let us know either here or on our forums.