Slick slider and IE 11 not working

[davehallowell]

Hi, I am using slick slider v. 1.3.13 and Internet Explorer 11. I really like the slider so thanks for all the hard work Mr. Wheeler. For some reason my three images just stack on top of each other like something in the .js is broken but I don't see any errors in the developer tool console. The page works correctly using other browsers, firefox, chrome, opera and safari all work correctly. Here is a URL to an example page: https://pitest.southeast.edu/homepage/slidetest.html

JSLint shows some problems, but it works in other browsers so the errors must not be too great. Of course IE plays by their own rules so . . .

Any help would be appreciated.
-Thanks

[kenwheeler]

Nothing in the console? Does the slick demo page work? I don't have access to ie11 at the moment, but I can look tomorrow.

[davehallowell]

Hi Ken, thanks for responding so quickly. This morning I am getting something in the console. Issue seems to be more with foundation 5 and ie11 not slick slider and ie11. The error being in foundation.min.js "Object doesn't support property or method 'querySelectAll'.

I am checking foundation 5 forum and google for an answer. If you have time to check in ie11 that would be great. BTW, my IE 11 is running in compatibility mode.

I am far from a js expert, but I am trying to learn. -Thanks

[davehallowell]

I forgot to mention that the slick demo page does work. I haven't found a solution in the foundation 5 forum. Still searching. All the scripts are being loaded so it is not a path problem as stated in the forum. I am using lib-sass/grunt/scss.

[davehallowell]

For the life of me, I cannot get slick slider to work on ie11. Works fine on other browsers but then that doesn't surprise me at all. Unfortunately, that is a deal breaker.

[kenwheeler]

Unless you provide a JSFiddle of your settings my hands are kind of tied. The demo page working in IE11 kind of rules out slick as the culprit.

[davehallowell]

Hi Ken. Just wanted to let you and anyone else interested, the issue was with IE and compatibility mode. Our IT staff set a group policy to put IE in compatibility mode for our intranet to work. This made IE operate like IE7 causing my CSS to break. In particular, media queries and border-box. Adding the attached code

as the **first meta tag* in the html fixed the issue. It is extremely important that the code is the first meta tag otherwise, it does not work.

[SJ-sushara]

Hi, the above mentioned solution didn't work for me. Can anyone help me with this?

[jkozma]

I thought I had the same problem, but it was just a matter of the default security settings for IE not allowing scripts for local files. When I clicked "Allow blocked content" in the warning message box, the slideshow worked as expected.

[martinhilary]

Hi Ken. Just wanted to let you and anyone else interested, the issue was with IE and compatibility mode. Our IT staff set a group policy to put IE in compatibility mode for our intranet to work. This made IE operate like IE7 causing my CSS to break. In particular, media queries and border-box. Adding the attached code

as the **first meta tag* in the html fixed the issue. It is extremely important that the code is the first meta tag otherwise, it does not work.

Is there any pertinent problems that would arise from doing this?

[DanielSwain]

I looked at the IE console and it showed a syntax error. I was initializing with an arrow function:

 $(()=> {
    $('#slider').slick({
        slidesToScroll: 1,
        ...
}

Changed the arrow function to $(function() {...}) and it worked.

[jurgenhaas]

Just ran across this problem too and my sliders contained HTML containers with images and text. They got completely messed up as the width calculation always got it wrong. I though, defining the width for the .slick__slider would help - it didn't.

Then I found out that adding the following to my CSS does the trick and now EVERYTHING is working just fine even on IE11:

.slick, .slick-wrapper {
  width: 100%;
}

Not: this is based on v1.8.0 of this library.

[sameen111]

i have some problem on IE about slick slider so how to solve that issue?? it's urgent for me
https://hotelica-pro.cyclonethemes.com/

[FlamingFox911]

@DanielSwain Thank you for this. IE has a problem where it can't process ES6 javascript, so stuff like arrow functions and ` (grave) characters cause issues. After throwing the code in Babel transpiler to convert to ES5, it works.