javascript - How can I vertically center images inside flexslider -

i have tried using flexbox vertically center images working noticed if did hard refresh on firefox slider disappear due flexbox reason. have created demo in codepen reason flexbox doesn't work now. need alternate solution flexbox anyway. can help?

jquery(document).ready(function(){      jquery('.slider').flexslider({          animation: "slide",          slideshow: true,          slideshowspeed: 4000,                     animationspeed: 600,           pauseplay: true,          controlnav: true,          directionnav: false,          pausetext: '',                       playtext: '',          pauseonhover: true,      });    });

.slider{      display: -webkit-box!important;       display: -moz-box!important;      display: -ms-flexbox!important;      display: -webkit-flex!important;       display: flex!important;      -webkit-box-align: center;      -moz-box-align: center;      -ms-flex-align: center;      -webkit-align-items: center;      align-items: center;      width: 100%;      overflow: hidden;      margin-bottom: 0;      max-height: 600px;      box-sizing: border-box;  }    .slider img{      width: 100%;      height: auto;  }    .slides li{      position: relative;  }    .slides li{      max-height: 600px;  }    .flex-control-nav{      position: absolute;      top: 20px;      right: 20px;      bottom: auto;      text-align: center;  }    .flex-control-paging li a{      width: 15px;      height: 15px;      background: #f04d43;  }    .flex-active{      background-color: #404041;  }    .flex-pauseplay{      display: none;  }

<div class="slider">    <ul class="slides">        <li>            <img src="http://79.170.40.172/allianceworkforce.co.uk/wp-content/uploads/2017/07/slider_image.png" alt="" />        </li>            <li>            <img src="http://79.170.40.172/allianceworkforce.co.uk/wp-content/uploads/2017/07/slider_image.png" alt="" />        </li>            <li>            <img src="http://79.170.40.172/allianceworkforce.co.uk/wp-content/uploads/2017/07/slider_image.png" alt="" />        </li>    </ul>  </div>    <script    src="https://code.jquery.com/jquery-3.2.1.min.js"    integrity="sha256-hwg4gsxgfzhoseeamdoygbf13fyquitwlaqgxvsngt4="    crossorigin="anonymous"></script>

i can't upload full code sorry. please go code pen if wish help. https://codepen.io/reece_dev/pen/jyojox

object-fit & object-position used crop image center when needed:

.slides li img {   width:100%;   object-fit:none;   object-position: center center; } 

example https://codepen.io/anon/pen/mvowgo

jquery(document).ready(function(){      jquery('.slider').flexslider({          animation: "slide",          slideshow: true,          slideshowspeed: 4000,                     animationspeed: 600,           pauseplay: true,          controlnav: true,          directionnav: false,          pausetext: '',                       playtext: '',          pauseonhover: true,      });    });  !function($){var e=!0;$.flexslider=function(t,a){var n=$(t);n.vars=$.extend({},$.flexslider.defaults,a);var i=n.vars.namespace,s=window.navigator&&window.navigator.mspointerenabled&&window.msgesture,r=("ontouchstart"in window||s||window.documenttouch&&document instanceof documenttouch)&&n.vars.touch,o="click touchend mspointerup keyup",l="",c,d="vertical"===n.vars.direction,u=n.vars.reverse,v=n.vars.itemwidth>0,p="fade"===n.vars.animation,m=""!==n.vars.asnavfor,f={};$.data(t,"flexslider",n),f={init:function(){n.animating=!1,n.currentslide=parseint(n.vars.startat?n.vars.startat:0,10),isnan(n.currentslide)&&(n.currentslide=0),n.animatingto=n.currentslide,n.atend=0===n.currentslide||n.currentslide===n.last,n.containerselector=n.vars.selector.substr(0,n.vars.selector.search(" ")),n.slides=$(n.vars.selector,n),n.container=$(n.containerselector,n),n.count=n.slides.length,n.syncexists=$(n.vars.sync).length>0,"slide"===n.vars.animation&&(n.vars.animation="swing"),n.prop=d?"top":"marginleft",n.args={},n.manualpause=!1,n.stopped=!1,n.started=!1,n.starttimeout=null,n.transitions=!n.vars.video&&!p&&n.vars.usecss&&function(){var e=document.createelement("div"),t=["perspectiveproperty","webkitperspective","mozperspective","operspective","msperspective"];for(var in t)if(void 0!==e.style[t[a]])return n.pfx=t[a].replace("perspective","").tolowercase(),n.prop="-"+n.pfx+"-transform",!0;return!1}(),n.ensureanimationend="",""!==n.vars.controlscontainer&&(n.controlscontainer=$(n.vars.controlscontainer).length>0&&$(n.vars.controlscontainer)),""!==n.vars.manualcontrols&&(n.manualcontrols=$(n.vars.manualcontrols).length>0&&$(n.vars.manualcontrols)),""!==n.vars.customdirectionnav&&(n.customdirectionnav=2===$(n.vars.customdirectionnav).length&&$(n.vars.customdirectionnav)),n.vars.randomize&&(n.slides.sort(function(){return math.round(math.random())-.5}),n.container.empty().append(n.slides)),n.domath(),n.setup("init"),n.vars.controlnav&&f.controlnav.setup(),n.vars.directionnav&&f.directionnav.setup(),n.vars.keyboard&&(1===$(n.containerselector).length||n.vars.multiplekeyboard)&&$(document).bind("keyup",function(e){var t=e.keycode;if(!n.animating&&(39===t||37===t)){var a=39===t?n.gettarget("next"):37===t?n.gettarget("prev"):!1;n.flexanimate(a,n.vars.pauseonaction)}}),n.vars.mousewheel&&n.bind("mousewheel",function(e,t,a,i){e.preventdefault();var s=0>t?n.gettarget("next"):n.gettarget("prev");n.flexanimate(s,n.vars.pauseonaction)}),n.vars.pauseplay&&f.pauseplay.setup(),n.vars.slideshow&&n.vars.pauseinvisible&&f.pauseinvisible.init(),n.vars.slideshow&&(n.vars.pauseonhover&&n.hover(function(){n.manualplay||n.manualpause||n.pause()},function(){n.manualpause||n.manualplay||n.stopped||n.play()}),n.vars.pauseinvisible&&f.pauseinvisible.ishidden()||(n.vars.initdelay>0?n.starttimeout=settimeout(n.play,n.vars.initdelay):n.play())),m&&f.asnav.setup(),r&&n.vars.touch&&f.touch(),(!p||p&&n.vars.smoothheight)&&$(window).bind("resize orientationchange focus",f.resize),n.find("img").attr("draggable","false"),settimeout(function(){n.vars.start(n)},200)},asnav:{setup:function(){n.asnav=!0,n.animatingto=math.floor(n.currentslide/n.move),n.currentitem=n.currentslide,n.slides.removeclass(i+"active-slide").eq(n.currentitem).addclass(i+"active-slide"),s?(t._slider=n,n.slides.each(function(){var e=this;e._gesture=new msgesture,e._gesture.target=e,e.addeventlistener("mspointerdown",function(e){e.preventdefault(),e.currenttarget._gesture&&e.currenttarget._gesture.addpointer(e.pointerid)},!1),e.addeventlistener("msgesturetap",function(e){e.preventdefault();var t=$(this),a=t.index();$(n.vars.asnavfor).data("flexslider").animating||t.hasclass("active")||(n.direction=n.currentitem<a?"next":"prev",n.flexanimate(a,n.vars.pauseonaction,!1,!0,!0))})})):n.slides.on(o,function(e){e.preventdefault();var t=$(this),a=t.index(),s=t.offset().left-$(n).scrollleft();0>=s&&t.hasclass(i+"active-slide")?n.flexanimate(n.gettarget("prev"),!0):$(n.vars.asnavfor).data("flexslider").animating||t.hasclass(i+"active-slide")||(n.direction=n.currentitem<a?"next":"prev",n.flexanimate(a,n.vars.pauseonaction,!1,!0,!0))})}},controlnav:{setup:function(){n.manualcontrols?f.controlnav.setupmanual():f.controlnav.setuppaging()},setuppaging:function(){var e="thumbnails"===n.vars.controlnav?"control-thumbs":"control-paging",t=1,a,s;if(n.controlnavscaffold=$('<ol class="'+i+"control-nav "+i+e+'"></ol>'),n.pagingcount>1)for(var r=0;r<n.pagingcount;r++){s=n.slides.eq(r),void 0===s.attr("data-thumb-alt")&&s.attr("data-thumb-alt","");var c=""!==s.attr("data-thumb-alt")?c=' alt="'+s.attr("data-thumb-alt")+'"':"";if(a="thumbnails"===n.vars.controlnav?'<img src="'+s.attr("data-thumb")+'"'+c+"/>":'<a href="#">'+t+"</a>","thumbnails"===n.vars.controlnav&&!0===n.vars.thumbcaptions){var d=s.attr("data-thumbcaption");""!==d&&void 0!==d&&(a+='<span class="'+i+'caption">'+d+"</span>")}n.controlnavscaffold.append("<li>"+a+"</li>"),t++}n.controlscontainer?$(n.controlscontainer).append(n.controlnavscaffold):n.append(n.controlnavscaffold),f.controlnav.set(),f.controlnav.active(),n.controlnavscaffold.delegate("a, img",o,function(e){if(e.preventdefault(),""===l||l===e.type){var t=$(this),a=n.controlnav.index(t);t.hasclass(i+"active")||(n.direction=a>n.currentslide?"next":"prev",n.flexanimate(a,n.vars.pauseonaction))}""===l&&(l=e.type),f.settoclearwatchedevent()})},setupmanual:function(){n.controlnav=n.manualcontrols,f.controlnav.active(),n.controlnav.bind(o,function(e){if(e.preventdefault(),""===l||l===e.type){var t=$(this),a=n.controlnav.index(t);t.hasclass(i+"active")||(a>n.currentslide?n.direction="next":n.direction="prev",n.flexanimate(a,n.vars.pauseonaction))}""===l&&(l=e.type),f.settoclearwatchedevent()})},set:function(){var e="thumbnails"===n.vars.controlnav?"img":"a";n.controlnav=$("."+i+"control-nav li "+e,n.controlscontainer?n.controlscontainer:n)},active:function(){n.controlnav.removeclass(i+"active").eq(n.animatingto).addclass(i+"active")},update:function(e,t){n.pagingcount>1&&"add"===e?n.controlnavscaffold.append($('<li><a href="#">'+n.count+"</a></li>")):1===n.pagingcount?n.controlnavscaffold.find("li").remove():n.controlnav.eq(t).closest("li").remove(),f.controlnav.set(),n.pagingcount>1&&n.pagingcount!==n.controlnav.length?n.update(t,e):f.controlnav.active()}},directionnav:{setup:function(){var e=$('<ul class="'+i+'direction-nav"><li class="'+i+'nav-prev"><a class="'+i+'prev" href="#">'+n.vars.prevtext+'</a></li><li class="'+i+'nav-next"><a class="'+i+'next" href="#">'+n.vars.nexttext+"</a></li></ul>");n.customdirectionnav?n.directionnav=n.customdirectionnav:n.controlscontainer?($(n.controlscontainer).append(e),n.directionnav=$("."+i+"direction-nav li a",n.controlscontainer)):(n.append(e),n.directionnav=$("."+i+"direction-nav li a",n)),f.directionnav.update(),n.directionnav.bind(o,function(e){e.preventdefault();var t;""!==l&&l!==e.type||(t=$(this).hasclass(i+"next")?n.gettarget("next"):n.gettarget("prev"),n.flexanimate(t,n.vars.pauseonaction)),""===l&&(l=e.type),f.settoclearwatchedevent()})},update:function(){var e=i+"disabled";1===n.pagingcount?n.directionnav.addclass(e).attr("tabindex","-1"):n.vars.animationloop?n.directionnav.removeclass(e).removeattr("tabindex"):0===n.animatingto?n.directionnav.removeclass(e).filter("."+i+"prev").addclass(e).attr("tabindex","-1"):n.animatingto===n.last?n.directionnav.removeclass(e).filter("."+i+"next").addclass(e).attr("tabindex","-1"):n.directionnav.removeclass(e).removeattr("tabindex")}},pauseplay:{setup:function(){var e=$('<div class="'+i+'pauseplay"><a href="#"></a></div>');n.controlscontainer?(n.controlscontainer.append(e),n.pauseplay=$("."+i+"pauseplay a",n.controlscontainer)):(n.append(e),n.pauseplay=$("."+i+"pauseplay a",n)),f.pauseplay.update(n.vars.slideshow?i+"pause":i+"play"),n.pauseplay.bind(o,function(e){e.preventdefault(),""!==l&&l!==e.type||($(this).hasclass(i+"pause")?(n.manualpause=!0,n.manualplay=!1,n.pause()):(n.manualpause=!1,n.manualplay=!0,n.play())),""===l&&(l=e.type),f.settoclearwatchedevent()})},update:function(e){"play"===e?n.pauseplay.removeclass(i+"pause").addclass(i+"play").html(n.vars.playtext):n.pauseplay.removeclass(i+"play").addclass(i+"pause").html(n.vars.pausetext)}},touch:function(){function e(e){e.stoppropagation(),n.animating?e.preventdefault():(n.pause(),t._gesture.addpointer(e.pointerid),t=0,c=d?n.h:n.w,f=number(new date),l=v&&u&&n.animatingto===n.last?0:v&&u?n.limit-(n.itemw+n.vars.itemmargin)*n.move*n.animatingto:v&&n.currentslide===n.last?n.limit:v?(n.itemw+n.vars.itemmargin)*n.move*n.currentslide:u?(n.last-n.currentslide+n.cloneoffset)*c:(n.currentslide+n.cloneoffset)*c)}function a(e){e.stoppropagation();var a=e.target._slider;if(a){var n=-e.translationx,i=-e.translationy;return t+=d?i:n,m=t,y=d?math.abs(t)<math.abs(-n):math.abs(t)<math.abs(-i),e.detail===e.msgesture_flag_inertia?void setimmediate(function(){t._gesture.stop()}):void((!y||number(new date)-f>500)&&(e.preventdefault(),!p&&a.transitions&&(a.vars.animationloop||(m=t/(0===a.currentslide&&0>t||a.currentslide===a.last&&t>0?math.abs(t)/c+2:1)),a.setprops(l+m,"settouch"))))}}function i(e){e.stoppropagation();var t=e.target._slider;if(t){if(t.animatingto===t.currentslide&&!y&&null!==m){var a=u?-m:m,n=a>0?t.gettarget("next"):t.gettarget("prev");t.canadvance(n)&&(number(new date)-f<550&&math.abs(a)>50||math.abs(a)>c/2)?t.flexanimate(n,t.vars.pauseonaction):p||t.flexanimate(t.currentslide,t.vars.pauseonaction,!0)}r=null,o=null,m=null,l=null,t=0}}var r,o,l,c,m,f,g,h,s,y=!1,x=0,b=0,t=0;s?(t.style.mstouchaction="none",t._gesture=new msgesture,t._gesture.target=t,t.addeventlistener("mspointerdown",e,!1),t._slider=n,t.addeventlistener("msgesturechange",a,!1),t.addeventlistener("msgestureend",i,!1)):(g=function(e){n.animating?e.preventdefault():(window.navigator.mspointerenabled||1===e.touches.length)&&(n.pause(),c=d?n.h:n.w,f=number(new date),x=e.touches[0].pagex,b=e.touches[0].pagey,l=v&&u&&n.animatingto===n.last?0:v&&u?n.limit-(n.itemw+n.vars.itemmargin)*n.move*n.animatingto:v&&n.currentslide===n.last?n.limit:v?(n.itemw+n.vars.itemmargin)*n.move*n.currentslide:u?(n.last-n.currentslide+n.cloneoffset)*c:(n.currentslide+n.cloneoffset)*c,r=d?b:x,o=d?x:b,t.addeventlistener("touchmove",h,!1),t.addeventlistener("touchend",s,!1))},h=function(e){x=e.touches[0].pagex,b=e.touches[0].pagey,m=d?r-b:r-x,y=d?math.abs(m)<math.abs(x-o):math.abs(m)<math.abs(b-o);var t=500;(!y||number(new date)-f>t)&&(e.preventdefault(),!p&&n.transitions&&(n.vars.animationloop||(m/=0===n.currentslide&&0>m||n.currentslide===n.last&&m>0?math.abs(m)/c+2:1),n.setprops(l+m,"settouch")))},s=function(e){if(t.removeeventlistener("touchmove",h,!1),n.animatingto===n.currentslide&&!y&&null!==m){var a=u?-m:m,i=a>0?n.gettarget("next"):n.gettarget("prev");n.canadvance(i)&&(number(new date)-f<550&&math.abs(a)>50||math.abs(a)>c/2)?n.flexanimate(i,n.vars.pauseonaction):p||n.flexanimate(n.currentslide,n.vars.pauseonaction,!0)}t.removeeventlistener("touchend",s,!1),r=null,o=null,m=null,l=null},t.addeventlistener("touchstart",g,!1))},resize:function(){!n.animating&&n.is(":visible")&&(v||n.domath(),p?f.smoothheight():v?(n.slides.width(n.computedw),n.update(n.pagingcount),n.setprops()):d?(n.viewport.height(n.h),n.setprops(n.h,"settotal")):(n.vars.smoothheight&&f.smoothheight(),n.newslides.width(n.computedw),n.setprops(n.computedw,"settotal")))},smoothheight:function(e){if(!d||p){var t=p?n:n.viewport;e?t.animate({height:n.slides.eq(n.animatingto).innerheight()},e):t.innerheight(n.slides.eq(n.animatingto).innerheight())}},sync:function(e){var t=$(n.vars.sync).data("flexslider"),a=n.animatingto;switch(e){case"animate":t.flexanimate(a,n.vars.pauseonaction,!1,!0);break;case"play":t.playing||t.asnav||t.play();break;case"pause":t.pause()}},uniqueid:function(e){return e.filter("[id]").add(e.find("[id]")).each(function(){var e=$(this);e.attr("id",e.attr("id")+"_clone")}),e},pauseinvisible:{visprop:null,init:function(){var e=f.pauseinvisible.gethiddenprop();if(e){var t=e.replace(/[h|h]idden/,"")+"visibilitychange";document.addeventlistener(t,function(){f.pauseinvisible.ishidden()?n.starttimeout?cleartimeout(n.starttimeout):n.pause():n.started?n.play():n.vars.initdelay>0?settimeout(n.play,n.vars.initdelay):n.play()})}},ishidden:function(){var e=f.pauseinvisible.gethiddenprop();return e?document[e]:!1},gethiddenprop:function(){var e=["webkit","moz","ms","o"];if("hidden"in document)return"hidden";for(var t=0;t<e.length;t++)if(e[t]+"hidden"in document)return e[t]+"hidden";return null}},settoclearwatchedevent:function(){cleartimeout(c),c=settimeout(function(){l=""},3e3)}},n.flexanimate=function(e,t,a,s,o){if(n.vars.animationloop||e===n.currentslide||(n.direction=e>n.currentslide?"next":"prev"),m&&1===n.pagingcount&&(n.direction=n.currentitem<e?"next":"prev"),!n.animating&&(n.canadvance(e,o)||a)&&n.is(":visible")){if(m&&s){var l=$(n.vars.asnavfor).data("flexslider");if(n.atend=0===e||e===n.count-1,l.flexanimate(e,!0,!1,!0,o),n.direction=n.currentitem<e?"next":"prev",l.direction=n.direction,math.ceil((e+1)/n.visible)-1===n.currentslide||0===e)return n.currentitem=e,n.slides.removeclass(i+"active-slide").eq(e).addclass(i+"active-slide"),!1;n.currentitem=e,n.slides.removeclass(i+"active-slide").eq(e).addclass(i+"active-slide"),e=math.floor(e/n.visible)}if(n.animating=!0,n.animatingto=e,t&&n.pause(),n.vars.before(n),n.syncexists&&!o&&f.sync("animate"),n.vars.controlnav&&f.controlnav.active(),v||n.slides.removeclass(i+"active-slide").eq(e).addclass(i+"active-slide"),n.atend=0===e||e===n.last,n.vars.directionnav&&f.directionnav.update(),e===n.last&&(n.vars.end(n),n.vars.animationloop||n.pause()),p)r?(n.slides.eq(n.currentslide).css({opacity:0,zindex:1}),n.slides.eq(e).css({opacity:1,zindex:2}),n.wrapup(c)):(n.slides.eq(n.currentslide).css({zindex:1}).animate({opacity:0},n.vars.animationspeed,n.vars.easing),n.slides.eq(e).css({zindex:2}).animate({opacity:1},n.vars.animationspeed,n.vars.easing,n.wrapup));else{var c=d?n.slides.filter(":first").height():n.computedw,g,h,s;v?(g=n.vars.itemmargin,s=(n.itemw+g)*n.move*n.animatingto,h=s>n.limit&&1!==n.visible?n.limit:s):h=0===n.currentslide&&e===n.count-1&&n.vars.animationloop&&"next"!==n.direction?u?(n.count+n.cloneoffset)*c:0:n.currentslide===n.last&&0===e&&n.vars.animationloop&&"prev"!==n.direction?u?0:(n.count+1)*c:u?(n.count-1-e+n.cloneoffset)*c:(e+n.cloneoffset)*c,n.setprops(h,"",n.vars.animationspeed),n.transitions?(n.vars.animationloop&&n.atend||(n.animating=!1,n.currentslide=n.animatingto),n.container.unbind("webkittransitionend transitionend"),n.container.bind("webkittransitionend transitionend",function(){cleartimeout(n.ensureanimationend),n.wrapup(c)}),cleartimeout(n.ensureanimationend),n.ensureanimationend=settimeout(function(){n.wrapup(c)},n.vars.animationspeed+100)):n.container.animate(n.args,n.vars.animationspeed,n.vars.easing,function(){n.wrapup(c)})}n.vars.smoothheight&&f.smoothheight(n.vars.animationspeed)}},n.wrapup=function(e){p||v||(0===n.currentslide&&n.animatingto===n.last&&n.vars.animationloop?n.setprops(e,"jumpend"):n.currentslide===n.last&&0===n.animatingto&&n.vars.animationloop&&n.setprops(e,"jumpstart")),n.animating=!1,n.currentslide=n.animatingto,n.vars.after(n)},n.animateslides=function(){!n.animating&&e&&n.flexanimate(n.gettarget("next"))},n.pause=function(){clearinterval(n.animatedslides),n.animatedslides=null,n.playing=!1,n.vars.pauseplay&&f.pauseplay.update("play"),n.syncexists&&f.sync("pause")},n.play=function(){n.playing&&clearinterval(n.animatedslides),n.animatedslides=n.animatedslides||setinterval(n.animateslides,n.vars.slideshowspeed),n.started=n.playing=!0,n.vars.pauseplay&&f.pauseplay.update("pause"),n.syncexists&&f.sync("play")},n.stop=function(){n.pause(),n.stopped=!0},n.canadvance=function(e,t){var a=m?n.pagingcount-1:n.last;return t?!0:m&&n.currentitem===n.count-1&&0===e&&"prev"===n.direction?!0:m&&0===n.currentitem&&e===n.pagingcount-1&&"next"!==n.direction?!1:e!==n.currentslide||m?n.vars.animationloop?!0:n.atend&&0===n.currentslide&&e===a&&"next"!==n.direction?!1:!n.atend||n.currentslide!==a||0!==e||"next"!==n.direction:!1},n.gettarget=function(e){return n.direction=e,"next"===e?n.currentslide===n.last?0:n.currentslide+1:0===n.currentslide?n.last:n.currentslide-1},n.setprops=function(e,t,a){var i=function(){var a=e?e:(n.itemw+n.vars.itemmargin)*n.move*n.animatingto,i=function(){if(v)return"settouch"===t?e:u&&n.animatingto===n.last?0:u?n.limit-(n.itemw+n.vars.itemmargin)*n.move*n.animatingto:n.animatingto===n.last?n.limit:a;switch(t){case"settotal":return u?(n.count-1-n.currentslide+n.cloneoffset)*e:(n.currentslide+n.cloneoffset)*e;case"settouch":return u?e:e;case"jumpend":return u?e:n.count*e;case"jumpstart":return u?n.count*e:e;default:return e}}();return-1*i+"px"}();n.transitions&&(i=d?"translate3d(0,"+i+",0)":"translate3d("+i+",0,0)",a=void 0!==a?a/1e3+"s":"0s",n.container.css("-"+n.pfx+"-transition-duration",a),n.container.css("transition-duration",a)),n.args[n.prop]=i,(n.transitions||void 0===a)&&n.container.css(n.args),n.container.css("transform",i)},n.setup=function(e){if(p)n.slides.css({width:"100%","float":"left",marginright:"-100%",position:"relative"}),"init"===e&&(r?n.slides.css({opacity:0,display:"block",webkittransition:"opacity "+n.vars.animationspeed/1e3+"s ease",zindex:1}).eq(n.currentslide).css({opacity:1,zindex:2}):0==n.vars.fadefirstslide?n.slides.css({opacity:0,display:"block",zindex:1}).eq(n.currentslide).css({zindex:2}).css({opacity:1}):n.slides.css({opacity:0,display:"block",zindex:1}).eq(n.currentslide).css({zindex:2}).animate({opacity:1},n.vars.animationspeed,n.vars.easing)),n.vars.smoothheight&&f.smoothheight();else{var t,a;"init"===e&&(n.viewport=$('<div class="'+i+'viewport"></div>').css({overflow:"hidden",position:"relative"}).appendto(n).append(n.container),n.clonecount=0,n.cloneoffset=0,u&&(a=$.makearray(n.slides).reverse(),n.slides=$(a),n.container.empty().append(n.slides))),n.vars.animationloop&&!v&&(n.clonecount=2,n.cloneoffset=1,"init"!==e&&n.container.find(".clone").remove(),n.container.append(f.uniqueid(n.slides.first().clone().addclass("clone")).attr("aria-hidden","true")).prepend(f.uniqueid(n.slides.last().clone().addclass("clone")).attr("aria-hidden","true"))),n.newslides=$(n.vars.selector,n),t=u?n.count-1-n.currentslide+n.cloneoffset:n.currentslide+n.cloneoffset,d&&!v?(n.container.height(200*(n.count+n.clonecount)+"%").css("position","absolute").width("100%"),settimeout(function(){n.newslides.css({display:"block"}),n.domath(),n.viewport.height(n.h),n.setprops(t*n.h,"init")},"init"===e?100:0)):(n.container.width(200*(n.count+n.clonecount)+"%"),n.setprops(t*n.computedw,"init"),settimeout(function(){n.domath(),n.newslides.css({width:n.computedw,marginright:n.computedm,"float":"left",display:"block"}),n.vars.smoothheight&&f.smoothheight()},"init"===e?100:0))}v||n.slides.removeclass(i+"active-slide").eq(n.currentslide).addclass(i+"active-slide"),n.vars.init(n)},n.domath=function(){var e=n.slides.first(),t=n.vars.itemmargin,a=n.vars.minitems,i=n.vars.maxitems;n.w=void 0===n.viewport?n.width():n.viewport.width(),n.h=e.height(),n.boxpadding=e.outerwidth()-e.width(),v?(n.itemt=n.vars.itemwidth+t,n.itemm=t,n.minw=a?a*n.itemt:n.w,n.maxw=i?i*n.itemt-t:n.w,n.itemw=n.minw>n.w?(n.w-t*(a-1))/a:n.maxw<n.w?(n.w-t*(i-1))/i:n.vars.itemwidth>n.w?n.w:n.vars.itemwidth,n.visible=math.floor(n.w/n.itemw),n.move=n.vars.move>0&&n.vars.move<n.visible?n.vars.move:n.visible,n.pagingcount=math.ceil((n.count-n.visible)/n.move+1),n.last=n.pagingcount-1,n.limit=1===n.pagingcount?0:n.vars.itemwidth>n.w?n.itemw*(n.count-1)+t*(n.count-1):(n.itemw+t)*n.count-n.w-t):(n.itemw=n.w,n.itemm=t,n.pagingcount=n.count,n.last=n.count-1),n.computedw=n.itemw-n.boxpadding,n.computedm=n.itemm},n.update=function(e,t){n.domath(),v||(e<n.currentslide?n.currentslide+=1:e<=n.currentslide&&0!==e&&(n.currentslide-=1),n.animatingto=n.currentslide),n.vars.controlnav&&!n.manualcontrols&&("add"===t&&!v||n.pagingcount>n.controlnav.length?f.controlnav.update("add"):("remove"===t&&!v||n.pagingcount<n.controlnav.length)&&(v&&n.currentslide>n.last&&(n.currentslide-=1,n.animatingto-=1),f.controlnav.update("remove",n.last))),n.vars.directionnav&&f.directionnav.update()},n.addslide=function(e,t){var a=$(e);n.count+=1,n.last=n.count-1,d&&u?void 0!==t?n.slides.eq(n.count-t).after(a):n.container.prepend(a):void 0!==t?n.slides.eq(t).before(a):n.container.append(a),n.update(t,"add"),n.slides=$(n.vars.selector+":not(.clone)",n),n.setup(),n.vars.added(n)},n.removeslide=function(e){var t=isnan(e)?n.slides.index($(e)):e;n.count-=1,n.last=n.count-1,isnan(e)?$(e,n.slides).remove():d&&u?n.slides.eq(n.last).remove():n.slides.eq(e).remove(),n.domath(),n.update(t,"remove"),n.slides=$(n.vars.selector+":not(.clone)",n),n.setup(),n.vars.removed(n)},f.init()},$(window).blur(function(t){e=!1}).focus(function(t){e=!0}),$.flexslider.defaults={namespace:"flex-",selector:".slides > li",animation:"fade",easing:"swing",direction:"horizontal",reverse:!1,animationloop:!0,smoothheight:!1,startat:0,slideshow:!0,slideshowspeed:7e3,animationspeed:600,initdelay:0,randomize:!1,fadefirstslide:!0,thumbcaptions:!1,pauseonaction:!0,pauseonhover:!1,pauseinvisible:!0,usecss:!0,touch:!0,video:!1,controlnav:!0,directionnav:!0,prevtext:"previous",nexttext:"next",keyboard:!0,multiplekeyboard:!1,mousewheel:!1,pauseplay:!1,pausetext:"pause",playtext:"play",controlscontainer:"",manualcontrols:"",customdirectionnav:"",sync:"",asnavfor:"",itemwidth:0,itemmargin:0,minitems:1,maxitems:0,move:0,allowoneslide:!0,start:function(){},before:function(){},after:function(){},end:function(){},added:function(){},removed:function(){},init:function(){}},$.fn.flexslider=function(e){if(void 0===e&&(e={}),"object"==typeof e)return this.each(function(){var t=$(this),a=e.selector?e.selector:".slides > li",n=t.find(a);1===n.length&&e.allowoneslide===!1||0===n.length?(n.fadein(400),e.start&&e.start(t)):void 0===t.data("flexslider")&&new $.flexslider(this,e)});var t=$(this).data("flexslider");switch(e){case"play":t.play();break;case"pause":t.pause();break;case"stop":t.stop();break;case"next":t.flexanimate(t.gettarget("next"),!0);break;case"prev":case"previous":t.flexanimate(t.gettarget("prev"),!0);break;default:"number"==typeof e&&t.flexanimate(e,!0)}}}(jquery);

.slider{        display: flex;      align-items: center;      width: 100%;      overflow: hidden;      margin-bottom: 0;      max-height: 100vh;/* demo purpose , reset own value */      box-sizing: border-box;  }      .slides li{      position: relative;  }  .slides li img {    width:100%;    object-fit:none;    object-position: center center;  }    .slides li{      max-height: 100vh;/* demo purpose , reset own value */  }    .flex-control-nav{      position: absolute;      top: 20px;      right: 20px;      bottom: auto;      text-align: center;  }    .flex-control-paging li a{      width: 15px;      height: 15px;      background: #f04d43;  }    .flex-active{      background-color: #404041;  }    .flex-pauseplay{      display: none;  }      .flex-container a:hover,  .flex-slider a:hover {    outline: none;  }  .slides,  .slides > li,  .flex-control-nav,  .flex-direction-nav {    margin: 0;    padding: 0;    list-style: none;  }  .flex-pauseplay span {    text-transform: capitalize;  }  .flexslider {    margin: 0;    padding: 0;  }  .flexslider .slides > li {    display: none;  }  .flexslider .slides img {    width: 100%;    display: block;  }  .flexslider .slides:after {    content: "\0020";    display: block;    clear: both;    visibility: hidden;    line-height: 0;    height: 0;  }  html[xmlns] .flexslider .slides {    display: block;  }  * html .flexslider .slides {    height: 1%;  }  .no-js .flexslider .slides > li:first-child {    display: block;  }  .flexslider {    margin: 0 0 60px;    background: #fff;    border: 4px solid #fff;    position: relative;      border-radius: 4px;       box-shadow:  0 1px 4px rgba(0, 0, 0, 0.2);  }  .flexslider .slides img {    height: auto;  }  .flex-viewport {    max-height: 2000px;      transition: 1s ease;  }  .loading .flex-viewport {    max-height: 300px;  }  .carousel li {    margin-right: 5px;  }  .flex-direction-nav {    text-decoration: none;    display: block;    width: 40px;    height: 40px;    margin: -20px 0 0;    position: absolute;    top: 50%;    z-index: 10;    overflow: hidden;    opacity: 0;    cursor: pointer;    color: rgba(0, 0, 0, 0.8);    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);    transition: 0.3s ease-in-out;  }  .flex-direction-nav a:before {    font-family: "flexslider-icon";    font-size: 40px;    display: inline-block;    content: '\f001';    color: rgba(0, 0, 0, 0.8);    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);  }  .flex-direction-nav a.flex-next:before {    content: '\f002';  }  .flex-direction-nav .flex-prev {    left: -50px;  }  .flex-direction-nav .flex-next {    right: -50px;    text-align: right;  }  .flexslider:hover .flex-direction-nav .flex-prev {    opacity: 0.7;    left: 10px;  }    .flexslider:hover .flex-direction-nav .flex-next {    opacity: 0.7;    right: 10px;  }  .flexslider:hover .flex-direction-nav .flex-next:hover {    opacity: 1;  }  .flex-direction-nav .flex-disabled {    opacity: 0!important;    filter: alpha(opacity=0);    cursor: default;    z-index: -1;  }  .flex-pauseplay {    display: block;    width: 30px;    height: 30px;    position: absolute;    right: 30px;      top: 40px;    opacity: 0.8;    z-index: 10;    overflow: hidden;    cursor: pointer;    color: #000;  }  .flex-pauseplay a:before {    font-family: "flexslider-icon";    font-size: 30px;    display: inline-block;    content: '\f004';  }  .flex-pauseplay a:hover {    opacity: 1;  }  .flex-pauseplay a.flex-play:before {    content: '\f003';  }  .flex-control-nav{      position: absolute;      top: 43px;      right: 30px;      text-align: center;  }  .flex-control-nav li {    margin: 0 6px;    display: inline-block;  }  .flex-control-paging li {    width: 15px;    height: 15px;    display: block;    background: #f04d43;    cursor: pointer;    text-indent: -9999px;    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);    border-radius: 20px;  }  .flex-control-paging li a.flex-active {    background: #404041;    cursor: default;  }  .flex-control-thumbs {    margin: 5px 0 0;    position: static;    overflow: hidden;  }  .flex-control-thumbs li {    width: 25%;    float: left;    margin: 0;  }  .flex-control-thumbs img {    width: 100%;    height: auto;    display: block;    opacity: .7;    cursor: pointer;    transition: 1s ease;  }  .flex-control-thumbs img:hover {    opacity: 1;  }  .flex-control-thumbs .flex-active {    opacity: 1;    cursor: default;  }  @media screen , (max-width: 860px) {    .flex-direction-nav .flex-prev {      opacity: 1;      left: 10px;    }    .flex-direction-nav .flex-next {      opacity: 1;      right: 10px;    }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="slider">    <ul class="slides">        <li>            <img src="http://79.170.40.172/allianceworkforce.co.uk/wp-content/uploads/2017/07/slider_image.png" alt="" />        </li>                <li>            <img src="http://79.170.40.172/allianceworkforce.co.uk/wp-content/uploads/2017/07/slider_image.png" alt="" />        </li>          <li>            <img src="http://79.170.40.172/allianceworkforce.co.uk/wp-content/uploads/2017/07/slider_image.png" alt="" />        </li>    </ul>  </div>