Vertically align picture in the slider

Hello this is a bit tricky and it would require either editing the output of metaslider / flexslider I don’t know what you are using as you would either need extra ‘divs’ to be able to align them accordingly.

What you could check out is if possible to achieve what you want with some jQuery magic.

these 2 functions with center either on X or Y axis accordingly anything comparing to anything.

$.fn.centerX = function () {
        this.css("position", "absolute");
        this.css("left", Math.max(0, (($('.TO_WHAT').outerWidth() - $(this).outerWidth()) / 2)) + "px");
        return this;
    };

    $.fn.centerY = function () {
        this.css("position", "absolute");
        this.css("top", Math.max(0, (($('.TO_WHAT').outerHeight() - $(this).outerHeight()) / 2)) + "px");
        return this;
    };

Just change the ‘TO_WHAT’ with whatever class or id of the element you like, in your case probably, $(‘.slides’)

Then you do this : $(‘.slides li img’).centerY();

This would center the img dead center on Y ( that means the .slides ) box.

I don’t know if I made it clear but it’s a bit funky for me to explain this.

If that doesn’t work, you’ve learned 2 helpful jQuery functions that will prove themselves worthy somewhere somehow ^_^ .

Best regards,

Hello,

It seems that isn’t working. I wrote this in the JS editor

jQuery(document).ready(function( $ ){
    // $.fn.centerX = function () {
        this.css("position", "absolute");
        this.css("left", Math.max(0, (($('.metaslider id=153').outerWidth() - $(this).outerWidth()) / 2)) + "px");
        return this;
    };

    $.fn.centerY = function () {
        this.css("position", "absolute");
        this.css("top", Math.max(0, (($('.metaslider id=153').outerHeight() - $(this).outerHeight()) / 2)) + "px");
        return this;
    };

jQuery(document).ready(function( $ ){
    //$(‘.metaslider id=153’).centerY(
  };
});